vue第五单元(v-if和v-show以及v-for的灵活应用 watch以及computed的区别 （常见效果） #课程目标

第五单元(v-if和v-show以及v-for的灵活应用 watch以及computed的区别 （常见效果）

#课程目标

1. 精通 v-if v-else v-else-if 的使用
2. 精通 v-show 和 v-if 的区别
3. 精通 v-for 的使用
4. 精通 computed 的使用
5. 精通 watch 的使用以及和 computed 还有 method 的区别

#知识点

1. v-if 条件渲染： v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 v-else 在表达式返回 false 时被渲染

   <h1 v-if="awesome">Vue is awesome!</h1>
   <h1 v-else>Oh no </h1>
   

    

   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>
   

    

   在 <template> 元素上使用 v-if 条件渲染分组,最终的渲染结果将不包含 <template> 元素。

   <template v-if="ok">
       <h1>Title</h1>
       <p>Paragraph 1</p>
       <p>Paragraph 2</p>
   </template>
   

    

   注意点：

   • v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
   • 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

2. v-if 和 v-show 的区别： v-if 是“真正”的条件渲染，条件为真是渲染，为假是不渲染。 v-show 元素总是会被渲染，如果条件是假就会给元素添加一个 display：none 的属性, 使其隐藏。

3. v-for 列表渲染： v-for 指令基于一个数组、对象或数字来渲染一个列表。 基本语法： v-for="item in items" v-for="(value, name) in object" v-for="num in 10"

       <ul id="example-1">
       <li v-for="item in items" v-bind:key="item.id">
           {{ item.message }}
       </li>
       </ul>
   

    

       var example2 = new Vue({
       el: '#example-2',
       data: {
           parentMessage: 'Parent',
           items: [
               {id: 1, message: 'Foo'},
               {id: 2, message: 'Bar' }
               ]
           }
       })
   

   
   
   

   在 <template> 元素上使用 v-for 列表渲染分组,最终的渲染结果将不包含 <template> 元素。

       <ul>
           <template v-for="item in items">
               <li>{{ item.msg }}</li>
               <li class="divider" role="presentation"></li>
           </template>
       </ul>
   

    

   注意点：

   1. 循环列表一般增加 v-bind:key="item.id" 这样在数据变化时提高vue的性能。
   2. 当v-if v-for处于同一节点，v-for 的优先级比 v-if 更高
   3. 当更改数组的数据是，不能简单使用arr[index]='value'这样的方式，因为这样修改的数据vue检测不到变化，所以页面也不会更新。应当使用经过vue包裹后的数组的变异方法：
   • push()
   • pop()
   • shift()
   • unshift()
   • splice()
   • sort()
   • reverse()

   也可以通过替换数组的方法让数据更新。

4. 计算属性 computed 计算属性是基于当前数据进行简单的加工返回的新的数据。当计算属依赖的数据变化时它会自动计算，计算属性返回的值也会跟着变化。

   <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('')
           }
       }
   })
   

    

5. watch 的使用以及和 computed 还有 method 的区别： 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

   <div id="watch-example">
       <p>
           Ask a yes/no question:
           <input v-model="question">
       </p>
       <p>{{ answer }}</p>
   </div>
   

    

   var watchExampleVM = new Vue({
       el: '#watch-example',
       data: {
           question: '',
           answer: 'I cannot give you an answer until you ask a question!'
       },
       watch: {
           // 如果 `question` 发生改变，这个函数就会运行
           question: function (newQuestion, oldQuestion) {
               this.answer = 'Waiting for you to stop typing...'
               this.debouncedGetAnswer()
           }
       }
   })
   

    

   watch 和computed 还有 method 的区别： computed：用于简单个数据检测，而且具有缓存功能，每次数据变更只需一次计算就可以了，并且可以监听多个属性，只要任一数据变化都会触发计算。 watch： 当需要在数据变化时执行异步或开销较大的操作时使用 watch，而且只能监听单个数据。 methods：只有调用时才会执行，没有缓存功能，每次调用都会被执行。

#授课思路

#案例和作业

1. 使用vue完成简单的 TODOList

1. 使用 v-if 完成 tab 切换， v-for 完成列表渲染