插值
文本
文本的数据绑定使用的是{{}}语法，又称之为Mustache语法,特点是直接在标签内写双大括号，并且在大括号内部使用数据对象上面的message 对应的property值
<p>{{message}}</p>
当数据对象上的值发生改变时，那么会更新插值处的内容
如果不想改变，那么就可以使用v-once指令,写法：
<p v-once>{{message}}</p>
在双括号中，可以写一些js的执行代码，例如函数调用{{fn()}}、表达式{{n+1}}等
html
双大括号可以插文本，但是如果想插html的话，就需要使用v-html指令
<p v-html="value"></p>
const vm =new Vue({data:{value:<span>123<span>}})
v-bind
如果想修改Attribute，那么可以使用v-bind指令
// v-bind:属性=
<a v-bind:href="url">百度</a>
const vm=new Vue({data:{url: 'http://www.baidu.com',}})
js表达式
在{{}}里还可以写js表达式，这里要注意语句跟表达式的区别，一般来说表达式都有返回值，而语句没有返回值
{{var a=1}} //由于是语句，所以不会生效
{{num + 1}}//这个是表达式，有返回值
但是这些表达式如果里面有变量名，那么需要在vue实例上有这个数据才行。当然，这也有白名单，如果放Math或者Data这类的全局变量就有效。
<span>{{Math.min(...[1,2,3])}}</span> //这样是有效的
指令
v-if指令
v-if指令可以根据后面表达式的值的真假来插入或者移出元素
<div v-if="exits">你现在看到我了</div>
new Vue({data:{exits:1}})
0、-0、undefined、null、''、false、document.all、NaN等falsy值为假
参数
有一些指令是可以带参数的，这里的参数在指令后以:表示，v-bind:href="url",意思就是把这个元素的href attribute跟
表达式的url的值绑定。
还有就是v-on指令,可以给这个元素设置绑定事件，这里的参数就是事件名
<p v-on:click="xxxx">...</p>
动态参数
动态参数的特点是使用[ ]方括号括起来，然后它的值就会变成对应数据对象的property的值
<p v-bind:[attributeName]='color'></p>
p v-on:[EventName]></p>
new vue({
data:{
attributeName:'class',
color:`red`,
EventName:'click'
}
})
上面的代码我亲测不会运行，在调试无果后，我惊讶地发现官方文档上说在DOM上使用模板时，避免使用大写字符。因为浏览器会把它转成小写，所以正确的写法应该是
new vue({
data:{
attributename:'class',//字符串
color:`red`,
eventname:'click'
}
})
还有就是，动态参数有一些约束，不能使用空格、不能使用引号。动态参数需要求字符串，也就是说在数据对象那边需要用字符串，不能使用0、undefined之类的奇怪的东西
修饰符
修饰符就是.+一个后缀，比如使用.prevent就会在触发时间时调用event.preventDefault()
写法为：
<p v-on:click.prevent='xxx'>..</p>
缩写
v-bind
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
评语：这个简写，我还是用语法插件吧~
v-on
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
@click挺方便~
计算属性
由于在模板内使用表达式虽然方便但是后期维护时会非常麻烦，那么就需要我们使用计算属性来针对一些复杂的计算逻辑。
他的写法是这样的
<div id="example">
<p>{{ reversedMessage }}</p>
</div>
const vm = new Vue({
el: '#example',
data: {
message: 100
},
computed: {
reversedMessage: function () {
return this.message + 100
}
}
})
vm.message = 1000
vm.reversedMessage //1100
当我们修改了vm.message后，数据也会响应到渲染中。我们在computed上面写好数据，然后与vm.message做对应，那么vue就会根据v.message的变化同步渲染。
计算属性和方法
使用methods选项也可以达到上面的效果
methods: {
reversedMessage: function () {
return this.message + 100
}
但是区别是使用方法不会有缓存。每次渲染后，computed会有缓存，只要message没有变化，那么就不会再执行computed里面的函数。
但是methods不一样，它每次渲染后都会执行一遍里面的函数
计算属性和侦听属性
Vue提供watch来侦听数据的变动，当某个数据需要跟着其他数据的变动而变动时，如果设置了watch，当数据发生变化就会调用watch里的函数。有时候我们会经常使用它，但是这种做法有个弊端，就是会写非常多的watch函数，所以我们可以设置computed而不是使用watch,官方给了一个示例
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: '这里是空的'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
console.log(val) //这里的val指的是改变后的值
},
lastName: function (val) {
//当firstName发生改变时，会调用watch里面的函数
this.fullName = this.firstName + ' ' + val
}
}
})
vm.firstName = 'hello'//发生改变了，调用watch里面的方法
vm.lastName = 'qiuyanxi'
上面这些写法非常复杂，所以可以改造成
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
计算属性的两种方法
计算属性computed默认只有get方法，如果需要，还可以设置第二种set方法，这个方法可以获取到计算属性里的属性改变后的新值，然后对应做出操作
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
console.log(names)//["John","Doe"]
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
class和style绑定
对象语法
在处理v-bind时，vue还做了一些增强处理。
<div v-bind:class="isActive"></div>
原先的语法是，class等于isActive属性对应的值
现在可以演化为
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示，class是不是等于active取决于isActive的值。
可以使用对象的方式传入更多的字段
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
data: {
isActive: true,
hasError: false
}
结果渲染为：
<div class="static active"></div>
不过还有更简单的方法,在数据对象里面直接定义就好
<div class="static" v-bind:class="classObject"></div>
data:{
classObject:{
active:true,
"text-danger":true //注意 使用符号需要加上引号
}
}
然后就会被渲染成
<div class="static active text-danger"></div>
除了这些，还可以使用computed计算属性来进一步拓展，根据数据对象的属性来return一个classObject对象
computed: {
classObject: function () {
return {
active: this.isActive,
}
}
}
通过data选项里面的数据对象来创造一个计算属性，使用方式是一致的。
数组语法
这里也可以使用数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
el:'div' //这里要记得写 官方文档故意不写
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
数组语法也支持条件语法，如果想根据数据对象中的某一个数据的条件来选择另一个数据对象的值，那么就可以写成
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
会判断data里面isActive是否为truethy，如果是就取activeClass的值。
数组语法跟对象语法结合
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
el: 'div',
data: {
isActive: 'active',
errorClass: 'text-danger'
}
意思是如果property属性isActive的值是truthy，active这个class就存在，然后再求errorClass的值。
绑定内联样式
v-bind:style写法很屌
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
这种形式让我大呼看不懂，而且对于css的property名需要用驼峰式或者用-分割
算了直接放弃吧，我觉得如果要这样的话，就违背样式与行为分离的原则，我还不如直接加class呢！
所以这个我还是选择性学习吧
