### 1vue的双向绑定： 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> ~~~ ### 2vue的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，通过父组件，改变子组件的值： 首先必须使用 **2.传递给组件的值会覆盖组件本身设定的值** 如： ~~~ ~~~ 二$emit，通过子组件改变父组件的值 如：