1、创建vue实例
var vm = new Vue({
el: '#example', //选择元素
data: {a:1} //基本数据
})
2、模板语法
（一）基本语法
<span>Message: {{ msg }}</span> //msg双向数据绑定
（二）只有第一次渲染
<span v-once>这个将不会改变: {{ msg }}</span> //不会双向绑定
（三）自动渲染html代码
<span v-html="rawHtml"></span> //自动识别内敛样式等
（四）如果是内敛样式要使用双向数据绑定，通常都要加上v-bind
<div v-bind:id="dynamicId"></div>
（五）在双花括号当中可以使用单行的JavaScript的语法
{{ ok ? 'YES' : 'NO' }}
3、计算属性以及观察方法
（一）基本写法
var vm = new Vue({
computed: { //计算属性方法名
reversedMessage: function () { //计算属性的名称
return this.message.slice(0,1) //计算属性执行的方法
}
},
watch: { //监听数据变化就执行的方法
message: function (val) { //message数据变化就执行
this.message = val + ' ' + this.message //val表示改变的新值
}
}
})
（二）computed的get和set
get就是获取得时候触发，set就是自身改变的时候触发（默认只有get）
computed:{
message: {
get:function(){
return this.test+1
},
set:function(newValue){
console.log(newValue); //newValue改变的新值
}
}
4、Class 与 Style 绑定
（一）Class的对象语法（根据数据的布尔值确定是否有这个class）
data: {
isActive: true,
hasError: false
}
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
data: { //这样写法更清晰
classObject: {
active: true,
'text-danger': false
}
}
<div v-bind:class="classObject"></div>
（二）Class的数组语法（直接获取这个数组的值的字符串）
data:{
activeClass:"asd",
errorClass:"ret"
}
<div v-bind:class="[activeClass, errorClass]"></div>
（三）Class的对象语法和数组语法可以共同使用
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
（四）内联样式的对象语法
data: {
activeColor: 'red',
fontSize: 30
}
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
（五）内联样式的数组语法
data: {
baseStyles:{
color:"#e4393c"
},
overridingStyles:{
border:"1px solid #ddd"
}
}
<div v-bind:style="[baseStyles, overridingStyles]"></div>
5、条件渲染
（一）基本语法
<h1 v-if="ok==1">1</h1> <h1 v-else-if="ok==2">2</h1> <h1 v-else>No</h1>
（二）template，多个元素条件渲染
<template v-if="ok"> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
（三）如果没有key，自动复用已存在的标签
<input placeholder="Enter your username" key="user" v-if="loginType === 'username'"> //加上了key就不会自动复用标签里的内容 <input placeholder="Enter your email address" key="email" v-else>
（四）v-show，类似于v-if不过只是简单的修改display的值。并且不能用v-else和不支持template。
<h1 v-show="ok==1">Hello1!</h1>
6、列表渲染
（一）渲染数组语法
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
<li v-for="item in items">
{{ item.message }} //单纯的渲染值
</li>
<li v-for="(item, index) in items">
{{ index }} - {{ item.message }} //渲染建和值
</li>
（二）渲染对象语法
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
<li v-for="value in object">
{{ value }} //单纯的渲染值
</li>
<li v-for="(value,key,index) in object">
{{index}}:{{ key }}: {{ value }} //渲染建和值
</li>
（三）渲染时最好加上一个特殊的key值，如果顺序改变方便后续跟踪操作
<div v-for="item in items" :key="item.id"><!-- 内容 --></div>
（四）数组方法
【1】数组本身变异方法
vm.array.push({ message: 'Baz' }); //后面增加一个
vm.array.pop(); //后面删除一个
vm.array.shift(); //前面删除一个
vm.array.unshift({message:'Baz'}); //前面增加一个
vm.array.splice(0,1,{message:'Asb'}); //瑞士军刀，从第几个开始删除多少个，替换成什么
vm.array.sort((a,b)=>a-b); //根据里面的方法排序
vm.array.reverse(); //颠倒排序
【2】数组新建方法
vm.array.concat(arr1); //数组拼接
vm.array.join(""); //数组转换成字符串
vm.array.slice(start,end); //截取一段数组
vm.array.filter(fun); //根据方法过滤
（五）重新设置数组
【1】重置设置其中一个值
Vue.set(example1.items, indexOfItem, newValue)
example1.items.splice(indexOfItem, 1, newValue)
【2】重置长度
example1.items.splice(newLength)
【3】对象赋予多个新属性
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
7、事件处理的方法
（一）基本语法
<div id="app">
<button v-on:click="greet">Greet</button> //事件触发
</div>
var example2 = new Vue({
methods: {
greet: function (event) { //event是事件处理方法
if (event) {
alert(event.target.tagName)
}
}
}
})
（二）传参数，并且要求event还存在
<button @click="greet('hi',$event)"></button> //除了传参数还要传个事件$event
（三）事件修饰符
<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> <a v-on:click.once="doThis"></a> //只触发一次
（四）按键修饰符
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="submit"> <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 所有特殊按键 --> .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right <!-- 系统修饰符 --> <!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div> <!-- exact修饰符 --> <!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button> <!-- 鼠标修饰符 --> .left .right .middle
8、表单输入
（一）基本文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
（二）单选和复选框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">
<span>Picked: {{ picked }}</span>
</div>
（三）多选时
new Vue({
el: '...',
data: {
selected: [] //多选时绑定数组
}
})
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
（四）复选或者单选ture、false命名
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no"> //当选中时yes，没选中no
（五）双向数据绑定value，只需要加上v-bind
<input type="radio" v-model="pick" v-bind:value="a"> //当选中时pick===a
（六）修饰符
<input v-model.lazy="msg" > //输入完才改变 <input v-model.number="age" type="number"> //用户输入内容自己转为数字 <input v-model.trim="msg"> //去空格