Vue基本使用

传统开发模式对比

原生JS

<div id="msg"></div>
<script type="text/javascript">
var msg = 'Hello World';
var div = document.getElementById('msg');
div.innerHTML = msg;
</script>

jQuery

<div id="msg"></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var msg = 'Hello World';
$('#msg').html(msg);
</script>

Vue.js之HelloWorld基本步骤

Vue

<div id="app">
<div>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'HelloWorld'
}
})
</script>

Vue.js之HelloWorld细节分析

1. 实例参数分析
⚫ el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
⚫ data：模型数据（值是一个对象）
2. 插值表达式用法
⚫ 将数据填充到HTML标签中
⚫ 插值表达式支持基本的计算操作
3. Vue代码运行原理分析
⚫ 概述编译过程的概念（Vue语法→原生语法