1. vue的双向绑定：
vue的双向绑定可以插入表达式，
如：
~~~
<div id="app">
{{message}}
<span :title="message2">鼠标悬停看信息</span>
</div>
<script>
let app =new Vue({
el:'#app',
data() {
return {
message:'hello Vue',
message2:'hello Vue'+new Date().getDate()//表达式
}
}
})
</script>
~~~
2. vue的`component` 在js中的顺序：
`component`在js中的顺序必须要比在实例化之前：
如：
~~~
Vue.component('todo-item',{
template:'<li>这是一个组件</li>'
}); //在vue的实例之前
let app = new Vue({
el: '#app',
data() {
return {
message: 'hello Vue',
message2: 'hello Vue' + new Date().getDate(),
vif: false,
lists: ['zhongchujiong', 'zhangjun', 'jilao']
}
},
methods: {
reverseMessage()
{
this.message = this.message.split('').reverse().join('')
}
},
});
~~~
3. vue的响应式：
当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
~~~
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
~~~
**当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性，比如：**
~~~
vm.b = 'hi'
~~~
那么对 b 的改动将不会触发任何视图的更新。
除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：
~~~
let data = {a: 0};
var vm = new Vue({
el: '#example',
data() {
return {
data: data
}
}
});
vm.$data.data = data //true
~~~
生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如 created 钩子可以用来在一个实例被创建之后执行代码：
~~~
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
~~~
vue的计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
~~~
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
~~~
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 `message` 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
~~~
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
~~~
当然，我们同样可以在{{}}表达式执行一个方法也能达到同样的效果：
~~~
<div>{{reversedMessage()}}</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}，
methods:{
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
~~~
computed 和 methods的不一样的地方是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
**v-else:**
你可以使用 v-else 指令来表示 v-if 的“else 块”：
~~~
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
~~~
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
~~~
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
~~~
`v-if`和`v-show`的区别：
`v-if`的使用：
~~~
<div id="app" class="gray">
<h3>v-if ,v-else的使用</h3>
<template v-if="name">
<label>Username</label>
<input placeholder="Enter you userName" key="user">
</template>
<template v-else>
<label>password</label>
<input placeholder="Enter you password" key="password">//key值的使用
</template>
<button @click="reverse">切换</button>
</div>
~~~
在不加key之前，输入的内容在切换的时候，是不会重新渲染的。
* v-show不允许引用在template中，也不允许使用v-else
v的修饰符：
说说vue中常用的修饰符：
首先是enter,
我们可以在一个keyup事件绑定一个修饰符.enter，当键盘最后点击enter键的时候才会触发，语法如下：
~~~
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
~~~
对于键盘事件，vue一共封装了一下几个按键修饰符：
每当输入特定按键时才会触发事件；
对于v-model，vue也提供了一些修饰符，其中常用的就是number修饰符，比如
~~~
<input v-model.number="age" type="number">
~~~
它会把输入的文本，自动转换为number类型，而这是我们经常需要的。
父子组件之间的通讯
* 使用props，通过父组件，改变子组件的值：
首先必须使用
* 传递给组件的值会覆盖组件本身设定的值
如：
~~~
~~~
二$emit，通过子组件改变父组件的值
如：
~~~
~~~
