首先，直接在html里引入官方的vue文件：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>html结构如下：
<div id="app">
<!--输出data数据里的name值-->
{{ name }}
</div>再写一个史上最简单的vue初始化代码：
var app = new Vue({
//选择元素
el: "#app",
data: { //绑定数据到#app的实例上
name: "qdi5"
}
});以上代码，就是将Vue作为构造函数，使用new构造出了一个vue实例，el表示选择的dom元素(el可以为字符串，dom元素或函数)，其作用是为实例提供挂载元素。data里的数据也一并绑定在了这个实例上面，我们可以通过app.name直接访问到值：
console.log(app.$el === document.getElementById('app')); //true,跟原生的选择元素一样
console.log(app.name); //qdi5html里面的{{ name }}编译为了vue实例里的name的值：qdi5;这里的双大括号,为"Mustache"语法(源自前端模板引擎Mustache.js，类似的模板引擎还有Handlebars等)，前端模板引擎主要用于渲染页面以及页面相关的数据;
接下来，我们看看vue实例的一个方法: $watch;代码如下：
var app = new Vue({
//选择元素
el: "#app",
data: { //绑定数据到#app的实例上
name: "qdi5"
}
});//arg01:监听什么值;arg02: 回调，回调有2个参数：变化后的值；变化之前的值；//added
app.$watch('name', function(newValue, oldValue){ //added
console.log(newValue, oldValue); //打印新值和旧值 //added
});
$watch用于监听vue实例app的data里面的属性，当我们在控制台修改name属性值时，会触发这个监听的回调函数，回调函数的两个参数，分别是修改后的新值和修改之前的值:
同时、html显示的数据也是最新的值了：
这个是vue其中一个很重要的特点：以数据为驱动来自动操控dom变化，让开发者专注于业务逻辑的开发。
接下来，我们来看看vue常用的几个指令：
1、v-once
<div id="app" v-once>
{{ name }}
</div>这个指令表示html中 {{name}} 的值 永远绑定了vue初始化时data.name的值，之后data.name不管怎么变化，都不会影响{{ name }}显示的值。
2、v-html
<div id="app" v-html="name">
{{ name }}
</div>
var app = new Vue({
el: "#app",
data: {
name: "<div style='color: pink;'>qdi5</div>"
}
});v-html用于输出带有html结构或css样式的内容，比如这里，会输出粉色的qdi5：
这个指令很有用，比如说你想展示一篇博客，里面有很多图片(img标签的字符串)，就可以使用v-html展示出图片，它不会转义html字符串；
3、v-bind
v-bind(简写形式为冒号:)用来给html元素绑定属性的值；比如我们给p标签绑定一个class为box的类名，代码如下：
.box {
color: red;
}<div id="app">
<p :class="classname">这里是p标签</p>
</div> var app = new Vue({
el: "#app",
data: {
classname: 'box'
}
});html页面显示效果如下：
添加多个类名有以下两种方法：
1、使用数组的形式绑定
<div id="app">
<p :class="[classOne, classTwo]" class="pink">这里是p标签</p>
</div>var app = new Vue({
el: "#app",
data: {
classOne: 'red',
classTwo: 'green'
}
});相应的css代码：
.red {
color: red;
}
.green {
background: green;
}
.pink {
border: 3px solid pink;
}显示效果如下：
2、以对象形式绑定，属性名就是需要绑定的class类名，属性值是boolean值，表示是否应用这个class类；
<div id="app">
<p :class="{red: redclass,green: greenclass, pink: pinkclass}">这里是p标签</p>
</div>var app = new Vue({
el: "#app",
data: {
redclass: true,
greenclass: true,
pinkclass: true
}
});在data里面我们把所有样式都设置为true，应用了red、green、pink三个样式，显示效果同上;
4、v-model
v-model指令对表单元素进行双向数据绑定，在修改表单元素值的同时，实例app中对应的属性值也同时更新；反之，当app对应的属性值修改时，表单元素的值也会随之修改。
我们继续使用上面v-bind的代码，添加一些checkbox并绑定v-model的值为 data里的属性，代码如下：
<div id="app">
<p :class="{red: redclass,green: greenclass, pink: pinkclass}">这里是p标签</p>
<input type="checkbox" name="color" v-model="redclass" >红色文字
<input type="checkbox" name="color" v-model="greenclass">绿色背景
<input type="checkbox" name="color" v-model="pinkclass">粉色边框
</div>var app = new Vue({
el: "#app",
data: {
redclass: true,
greenclass: false,
pinkclass: false
}
});默认情况下，p标签只有一个红色文字的样式，当我们勾选其他checkbox时，会加上对应checkbox的class；效果如下：
5、v-for
v-for指令,循环渲染html结构和数据；
<div id="app">
<ul>
<li v-for="item in details">{{item.name}}----{{item.age}}</li>
</ul>
</div> var app = new Vue({
el: "#app",
data: {
details: [{name: '张三',age: 25},
{ name: '李四', age: 18 },
{ name: '王五', age: 12 },
{ name: '赵六', age: 23 },
{ name: '田七', age: 15 }
]
}
});
渲染结果如下：
这种渲染模式，有点类似js里面的for....in循环,item代表的是当前被循环的对象；除了这种循环写法，还有第二种：
<li v-for="(item, index) in details" v-bind:key="item.age">{{item.name}}----{{item.age}}</li>当循环包含参数index时，对象参数修改为(item, index),这样与js Array对象的新方法forEach和map，以及一些对象迭代器(例如lodash)的参数能保持一致。在使用v-for循环时，一般要给循环的元素(此处是li)加上 v-bind:key，否则在vue2.X中会报错;
此外、以下代码中的索引是从1开始的，输出结果为1到10；代码如下：
<ul>
<li v-for="n in 10">{{ n }}</li>
</ul>6、v-if/v-else-if/v-else
<div id="app">
<div v-if="name==='1'">
<!-- v-bind:key 给input唯一标识，不复用input的值 -->
用户名: <input type="text" v-bind:key="1" />
</div>
<div v-else-if="name==='2'">
密码：<input type="text" :key="2" />
</div>
<div v-else>
输入1或2显示对应input框
</div>
<input v-model="name" type="text" />
</div>var app = new Vue({
el: "#app",
data: {
name: true
}
});与原生js的条件判断差不多，这里就不看效果了。
7、v-on
v-on指令主要用于事件绑定，简写形式为：@;
<button @click="handleClick">点击事件</button>var app = new Vue({
el: "#app",data: {counter: 1},
methods: {
handleClick () {
alert('触发vue点击事件');
}
}
});如果逻辑简单，可以直接在@click中写js代码，例如：
<button @click="counter+=1">自增1</button>v-on指令的修饰符主要有以下几个：
1、事件修饰符
stop(阻止事件冒泡)
prevent(阻止浏览器默认行为)
self(事件只在当前元素下触发，在其子元素上触发不了这个绑定的事件)
capture(以捕获模式触发事件，即先在自身触发事件，在将事件传递给其子元素)
以下代码直接从vue官网copy过来的：
!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>2、按键修饰符
当用户按enter键时触发事件submit：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">其他按键修饰符用法差不多；全部按键别名(copy自vue官网)：
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
8、v-show
v-show用于显示隐藏元素；当我们勾选checkbox的时候，显示表单元素，代码如下：
<div id="app">
<div v-show="show">
<form action="">
用户名: <input type="text"/>
密码: <input type="text" />
</form>
</div>
<input v-model="show" type="checkbox" />勾选显示登录表单
</div>var app = new Vue({
el: "#app",
data: {
show: false
}
});效果如下：
9、v-text
v-text，参数类型为String，作用是更新元素的textContent。{{}}文本插入值本身也会编译成textNode的一个v-text指令。
而与直接使用{{}}不同的是，v-text需要绑定在某个元素上，能避免未编译前的闪现问题。
<span v-text="msg"></span>var app = new Vue({
el: "#app",
data: {
msg: 'qdi5'
}
});如果直接使用<span>{{msg}}</span>,在生命周期beforeCompile期间，此刻msg数据尚未编译至{{msg}}中，用户能看到一瞬间的 '{{msg}}'字符串，然后闪现为：qdi5;
11、v-cloak
v-cloak指令相当于在元素上添加了一个[v-cloak]的属性，直到关联的实例结束编译。官方推荐可以和css规则[v-cloak]{display: none}一起使用，可以隐藏未编译的Mustache标签直到实例准备完毕。例如：
<div v-cloak>{{ msg }}</div>12、v-pre
v-pre的作用是跳过编译这个元素和子元素，显示原始的{{}}Mustache标签，用来减少编译时间。例如：
<div id="app">
<div v-pre>
{{ name }}
</div>
</div>var app = new Vue({
el: "#app",
data: {
name: "qdi5"
}
});显示结果为：
以上就是本文的所有内容，后续还会继续更新vue2.X相关基础知识和应用实战，敬请期待！
说明：本文内容部分摘抄自《Vue.js前端开发快速入门与专业应用》以及网络视频
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
