前端笔记Vue项目day2(三）

 

自定义指令局部指令

• 局部指令，需要定义在  directives 的选项   用法和全局用法一样

• 局部指令只能在当前组件里面使用

• 当全局指令和局部指令同名时以局部指令为准

• [AppleScript] 纯文本查看 复制代码

  ?

  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

  <input type="text" v-color='msg'>  <input type="text" v-focus>  <script type="text/javascript">     /*       自定义指令-局部指令     */     var vm = new Vue({       el: '#app',       data: {         msg: {           color: 'red'         }       },       //局部指令，需要定义在  directives 的选项       directives: {         color: {           bind: function(el, binding){             el.style.backgroundColor = binding.value.color;           }         },         focus: {           inserted: function(el) {             el.focus();           }         }       }     });   </script>

• 计算属性   computed

  • 模板中放入太多的逻辑会让模板过重且难以维护  使用计算属性可以让模板更加的简洁

  • 计算属性是基于它们的响应式依赖进行缓存的

  • computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

  • [AppleScript] 纯文本查看 复制代码

    ?

    01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

    <div id="app">      <!--          当多次调用 reverseString  的时候         只要里面的 num 值不改变 他会把第一次计算的结果直接返回         直到data 中的num值改变 计算属性才会重新发生计算      -->     <div>{{reverseString}}</div>     <div>{{reverseString}}</div>      <!-- 调用methods中的方法的时候  他每次会重新调用 -->     <div>{{reverseMessage()}}</div>     <div>{{reverseMessage()}}</div>   </div>   <script type="text/javascript">     /*       计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存     */     var vm = new Vue({       el: '#app',       data: {         msg: 'Nihao',         num: 100       },       methods: {         reverseMessage: function(){           console.log('methods')           return this.msg.split('').reverse().join('');         }       },       //computed  属性 定义 和 data 已经 methods 平级       computed: {         //  reverseString   这个是我们自己定义的名字         reverseString: function(){           console.log('computed')           var total = 0;           //  当data 中的 num 的值改变的时候  reverseString  会自动发生计算            for(var i=0;i<=this.num;i++){             total += i;           }           // 这里一定要有return 否则 调用 reverseString 的 时候无法拿到结果              return total;         }       }     });   </script>

  • 侦听器   watch

    • 使用watch来响应数据的变化

    • 一般用于异步或者开销较大的操作

    • watch 中的属性 一定是data 中 已经存在的数据

    • 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

    • [AppleScript] 纯文本查看 复制代码

      ?

      01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

      <div id="app">        <div>            <span>名：</span>            <span>        <input type="text" v-model='firstName'>      </span>        </div>        <div>            <span>姓：</span>            <span>        <input type="text" v-model='lastName'>      </span>        </div>        <div>{{fullName}}</div>    </div>    <script type="text/javascript">        /*              侦听器            */        var vm = new Vue({            el: '#app',            data: {                firstName: 'Jim',                lastName: 'Green',                // fullName: 'Jim Green'            },             //watch  属性 定义 和 data 已经 methods 平级            watch: {                //   注意：  这里firstName  对应着data 中的 firstName                //   当 firstName 值 改变的时候  会自动触发 watch                firstName: function(val) {                    this.fullName = val + ' ' + this.lastName;                },                //   注意：  这里 lastName 对应着data 中的 lastName                lastName: function(val) {                    this.fullName = this.firstName + ' ' + val;                }            }        });    </script>