A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

自定义指令局部指令
  • 局部指令,需要定义在  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>




0 个回复

您需要登录后才可以回帖 登录 | 加入黑马