【郑州校区】前端笔记Vue项目第2天 3

【郑州校区】前端笔记Vue项目第2天 3

自定义指令局部指令

局部指令，需要定义在 directives 的选项用法和全局用法一样
局部指令只能在当前组件里面使用
当全局指令和局部指令同名时以局部指令为准

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

<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] 纯文本查看 复制代码

<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] 纯文本查看 复制代码

<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>

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】前端笔记Vue项目 第2天 3

0 个回复

【郑州校区】前端笔记Vue项目第2天 3