Vue的一些特性

最新推荐文章于 2023-12-28 12:05:17 发布

ZhiAng99

最新推荐文章于 2023-12-28 12:05:17 发布

阅读量323

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ZhiAng99/article/details/108797389

版权

本文介绍了Vue的一些关键特性，包括自定义指令的创建及参数使用，计算属性的缓存机制，侦听器对变量变化的响应，过滤器的全局与局部应用，以及变异方法和数组替换操作的详细说明。

摘要由CSDN通过智能技术生成

文章目录

1.自定义指令

1.基础指令
v-clock 这个指令的意思是点击就会触发这个指令
除了一些vue提供给我们得指令外我们还可以自定义一些指令来方便我们的一些操作

Vue.directive(‘focus’, {
//inserted是固定的是vue的api
inserted: function(el){
// el表示指令所绑定的元素
el.focus();
}
});

<body>
  <div id="app">
    <input type="text" v-focus>
    <input type="text">
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定义指令
    */
    Vue.directive('focus', {
      inserted: function(el){
        // el表示指令所绑定的元素
        el.focus();
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          
        }
      }
    });
  </script>
</body>

2.带参数的指令
如果我们自定义的指令功能更加繁琐需要传递参数
那么我们写指令函数时就要传数值 el binding el代表的那个元素 binding.style 可以得到定义的指令进而赋值

<body>
  <div id="app">
    <input type="text" v-color='msg'>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定义指令-带参数
    */
    Vue.directive('color', {
      bind: function (el, binding) {
        // 根据指令的参数设置背景色
        console.log(binding.value)
        console.log(el);
        console.log(binding);
        el.style.backgroundColor = binding.value.color;
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'blue'
        }
      },
      methods: {
        handle: function () {

        }
      }
    });
  </script>
</body>

3.局部指令
局部指令只可以组件内进行使用方法和全局指令差不多可以看源码如下

<body>
  <div id="app">
    <input type="text" v-color='msg'>
    <input type="text" v-focus>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定义指令-局部指令
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'red'
        }
      },
      methods: {
        handle: function () {

        }
      },
      //定义局部指令
      directives: {
        //指令名称  v- 调用
        color: {
          bind: function (el, binding) {
            //binding.value.color 获取标签中color的值
            el.style.backgroundColor = binding.value.color;
          }
        },
        focus: {
          inserted: function (el) {
            el.focus();
          }
        }
      }
    });
  </script>
</body>

2.计算属性

计算属性有缓存执行过后不会再执行直接出结果
函数的话调用一次执行一次但是计算属性只要执行过一次就会有缓存直接显示结果

  <body>
  <div id="app">
    <div>{{msg}}</div>
    <div>{{reverseString}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      计算属性
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao'
      },
      computed: {
        //计算属性有缓存   执行过后 不会再执行  直接出结果
        reverseString: function () {
          return this.msg.split('').reverse().join('');
        }
      }
    });
  </script>
</body>

3.侦听器

监听某一个变量当他改变时就会触发函数

<body>
  <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" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      侦听器
    */
    var vm = new Vue({
      el: '#app',
      data: {
        firstName: 'Jim',
        lastName: 'Green',
        // fullName: 'Jim Green'
      },
      computed: {
        fullName: function () {
          return this.firstName + ' ' + this.lastName;
        }
      },
      watch: {

        //监听某一个变量  当他改变时就会触发函数
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName;
        },
        lastName: function (val) {
          this.fullName = this.firstName + ' ' + val;
        }
      }
    });
  </script>

4.过滤器

用 | 隔开前面是要处理的东西后面是处理的过滤器名字
全局过滤器 Vue.filter(‘lower’, function(val) {
return val.charAt(0).toLowerCase() + val.slice(1);
});
局部在组件内使用

<body>
  <div id="app">
    <input type="text" v-model='msg'>
    <div>{{msg | upper}}</div>
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>测试数据</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      过滤器
      1、可以用与插值表达式和属性绑定
      2、支持级联操作
    */
    // Vue.filter('upper', function(val) {
    //   return val.charAt(0).toUpperCase() + val.slice(1);
    // });
    Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      filters: {
        upper: function(val) {
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
    });
  </script>
</body>

5.变异方法和替换数组

//修改原有的数据
push()添加
pop()删除
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
splice()1. 删除功能，第一个参数为第一项位置，第二个参数为要删除几个。插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）。3.
//替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）。
// sort()排序
reverse()反转

//替换数组
//filter（）过滤括号里函数
//slice（start,end）返回新数组
//concat（）用于连接两个或多个数组。