Vue常用特性--学习

一、表单操作

1.基于Vue的表单操作

• Input 单行文本
• textarea 多行文本
• select 下拉多选
• radio 单选框
• checkbox 多选框

2.表单域修饰符

• number：转化为数值
• trim：去掉开始和结尾的空格
• lazy : 将input事件切换为change事件
  <input v-model.number="age" type="number">

二、自定义指令

1.自定义指令的语法规则

  /*
      自定义指令
    */
    Vue.directive('focus', {
      inserted: function(el){
        // el表示指令所绑定的元素
        el.focus();
      }
    });

自定义指令使用

 <input type="text" v-focus>

2.带参数的自定义指令

 /*
      自定义指令-带参数
    */
    Vue.directive('color', {
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });

自定义指令使用

<input type="text" v-color='{color:"orange"}'>

3. 局部指令

 
    var vm = new Vue({
      el: '#app',
  
      //自定义指令-局部指令
    directives: {
       focus: {
          inserted: function(el) {
            el.focus();
          }
      }
    });
  </script>

三、计算属性

1. 为何需要计算属性？

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁
将复杂的逻辑放在计算器里。

2. 计算属性的用法

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

计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存。

四、侦听器

1. 侦听器的应用场景

数据变化时执行异步或开销较大的操作

2. 侦听器的用法

 <div id="app">
        <input type="text" v-model.lazy='uname'>  
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        uname: '',
      },
      //侦听器
      watch: {
        //名字要和侦听数据一样
        //当侦听数据发生变化时
        uname: function(val){
          console.log("数据变化了")
        }
    });
  </script>

五、过滤器

1. 过滤器的作用

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
自定义过滤器
Vue.filter(‘过滤器名称’, function(value){ // 过滤器业务逻辑 })

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

六、生命周期

1. 主要阶段

⚫ 挂载（初始化相关属性）
① beforeCreate
② created
③ beforeMount
④ mounted
⚫ 更新（元素或组件的变更操作）
① beforeUpdate
② updated
⚫ 销毁（销毁相关属性）
① beforeDestroy
② destroyed

2. Vue实例的产生过程

① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
② created 在实例创建完成后被立即调用。
③ beforeMount 在挂载开始之前被调用。
④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。（常用）
⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
⑦ beforeDestroy 实例销毁之前调用。
⑧ destroyed 实例销毁后调用。