Vue常用特性

1.1常用特性概览

• 表单操作

• 自定义指令

• 计算属性

• 侦听器

• 过滤器

• 生命周期

1.2表单基本操作

1.基于Vue的表单操作

• Input 单行文本

• textarea 多行文本

• select 下拉多选

• radio 单选框

• checkbox 多选框

1. 获取单选框中的值

• 通过v-model

    <!-- 
        1、 两个单选框需要同时通过v-model 双向绑定 一个值 
        2、 每一个单选框必须要有value属性  且value 值不能一样 
        3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据
​
        gender 的值就是选中的值，我们只需要实时监控他的值就可以了
    -->
   <input type="radio" id="male" value="1" v-model='gender'>
   <label for="male">男</label>
​
   <input type="radio" id="female" value="2" v-model='gender'>
   <label for="female">女</label>
​
<script>
    new Vue({
         data: {
             // 默认会让当前的 value 值为 2 的单选框选中
                gender: 2,  
            },
    })
​
</script>

1. 获取复选框中的值

• 通过v-model

• 和获取单选框中的值一样

• 复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选

    <!-- 
        1、 复选框需要同时通过v-model 双向绑定 一个值 
        2、 每一个复选框必须要有value属性  且value 值不能一样 
        3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据
​
        hobby 的值就是选中的值，我们只需要实时监控他的值就可以了
    -->
​
<div>
   <span>爱好：</span>
   <input type="checkbox" id="ball" value="1" v-model='hobby'>
   <label for="ball">篮球</label>
   <input type="checkbox" id="sing" value="2" v-model='hobby'>
   <label for="sing">唱歌</label>
   <input type="checkbox" id="code" value="3" v-model='hobby'>
   <label for="code">写代码</label>
 </div>
<script>
    new Vue({
         data: {
                // 默认会让当前的 value 值为 2 和 3 的复选框选中
                hobby: ['2', '3'],
            },
    })
</script>

1. 获取下拉框和文本框中的值

• 通过v-model

   <div>
      <span>职业：</span>
       <!--
            1、 需要给select  通过v-model 双向绑定 一个值 
            2、 每一个option  必须要有value属性  且value 值不能一样 
            3、 当某一个option选中的时候 v-model  会将当前的 value值 改变 data 中的 数据
             occupation 的值就是选中的值，我们只需要实时监控他的值就可以了
        -->
       <!-- multiple  多选 -->
      <select v-model='occupation' multiple>
          <option value="0">请选择职业...</option>
          <option value="1">教师</option>
          <option value="2">软件工程师</option>
          <option value="3">律师</option>
      </select>
         <!-- textarea 是 一个双标签   不需要绑定value 属性的  -->
        <textarea v-model='desc'></textarea>
  </div>
<script>
    new Vue({
         data: {
                // 默认会让当前的 value 值为 2 和 3 的下拉框选中
                 occupation: ['2', '3'],
                 desc: 'nihao'
            },
    })
</script>

2.表单域修饰符

• .number 转换为数值

  • 注意点：

  • 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值

  • 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。

• .trim 自动过滤用户输入的首尾空白字符

  • 只能去掉首尾的 不能去除中间的空格

• .lazy 将input事件切换成change事件

  • .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上

• 在失去焦点 或者 按下回车键时才更新

  <!-- 自动将用户的输入值转为数值类型 -->
  <input v-model.number="age" type="number">
  ​
  <!--自动过滤用户输入的首尾空白字符   -->
  <input v-model.trim="msg">
  ​
  <!-- 在“change”时而非“input”时更新 -->
  <input v-model.lazy="msg" >

1.3自定义指令

• 内置指令不能满足我们特殊的需求

• Vue允许我们自定义指令

1.Vue.directive 注册全局指令

<!-- 
  使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 
-->
<input type="text" v-focus>
<script>
// 注意点： 
//   1、 在自定义指令中  如果以驼峰命名的方式定义 如  Vue.directive('focusA',function(){}) 
//   2、 在HTML中使用的时候 只能通过 v-focus-a 来使用 
    
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
    // 当绑定元素插入到 DOM 中。 其中 el为dom元素
    inserted: function (el) {
            // 聚焦元素
            el.focus();
    }
});
new Vue({
　　el:'#app'
});
</script>

2.Vue.directive 注册全局指令 带参数

  <input type="text" v-color='msg'>
 <script type="text/javascript">
    /*
      自定义指令-带参数
      bind - 只调用一次，在指令第一次绑定到元素上时候调用
​
    */
    Vue.directive('color', {
      // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
      // el 为当前自定义指令的DOM元素  
      // binding 为自定义的函数形参   通过自定义属性传递过来的值 存在 binding.value 里面
      bind: function(el, binding){
        // 根据指令的参数设置背景色
        // console.log(binding.value.color)
        el.style.backgroundColor = binding.value.color;
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'blue'
        }
      }
    });
  </script>

3.自定义指令局部指令

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

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

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

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

1.4计算属性 computed

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

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

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

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

1.5侦听器 watch

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

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

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

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

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

 

需求：输入框中输入姓名，失去焦点时验证是否存在，如果已 经存在，提示从新输入，如果不存在，提示可以使用。

需求分析：

① 通过v-model实现数据绑定

② 需要提供提示信息

③ 需要侦听器监听输入信息的变化

④ 需要修改触发的事件

实现代码：

<div id="app">
        <span>用户名：</span>
        <!-- .lazy失去焦点才触发 -->
        <span><input type="text" v-model.lazy='uname'></span>
        <span>{{tip}}</span>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        /*  侦听器
        1、采用侦听器监听用户名变化
        2、调用后台接口进行验证
        3、根据验证的结果调整提示信息 */
        var vm = new Vue({
            el: '#app',
            data: {
                uname: '',
                tip: ''
​
            },
            methods: {
                // 使用计时器模拟接口调用
                checkName: function (uname) {
                    var that = this;
                    setTimeout(function () {
                        if (uname == 'admin') {
                            that.tip = '用户名已经存在，请更换一个';
                        } else {
                            that.tip = '用户名可以使用'
                        }
                    }, 2000)
                }
            },
            watch: {
                uname: function (val) {
                    this.checkName(val);
                    // 修改提示信息
                    this.tip = '正在验证……'
                }
            }
        })
    </script>

 

1.6过滤器

1. 过滤器的作用是什么？

   格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

   

• Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。

• 过滤器可以用在两个地方：双花括号插值和v-bind表达式。

• 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示

• 支持级联操作

• 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本

• 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的

  <div id="app">
    <input type="text" v-model='msg'>
      <!-- upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中 -->
    <div>{{msg | upper}}</div>
    <!--  
      支持级联操作
      upper  被定义为接收单个参数的过滤器函数，表达式msg 的值将作为参数传入到函数中。
      然后继续调用同样被定义为接收单个参数的过滤器 lower ，将upper 的结果传递到lower中
    -->
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>测试数据</div>
  </div>
​
<script type="text/javascript">
   //  lower  为全局过滤器     
   Vue.filter('lower', function(val) {
      return val.charAt(0).toLowerCase() + val.slice(1);
    });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      //局部过滤器
       //filters  属性 定义 和 data 已经 methods 平级 
       //  定义filters 中的过滤器为局部过滤器 
      filters: {
        //   upper  自定义的过滤器名字 
        //    upper 被定义为接收单个参数的过滤器函数，表达式  msg  的值将作为参数传入到函数中
        upper: function(val) {
         //  过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
    });
  </script>

2.过滤器中传递参数

    <div id="box">
        <!--
            filterA 被定义为接收三个参数的过滤器函数。
            其中 message 的值作为第一个参数，
            普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
        -->
        {{ message | filterA('arg1', 'arg2') }}
    </div>
    <script>
        // 在过滤器中 第一个参数 对应的是  管道符前面的数据   n  此时对应 message
        // 第2个参数  a 对应 实参  arg1 字符串
        // 第3个参数  b 对应 实参  arg2 字符串
        Vue.filter('filterA',function(n,a,b){
            if(n<10){
                return n+a;
            }else{
                return n+b;
            }
        });
        
        new Vue({
            el:"#box",
            data:{
                message: "哈哈哈"
            }
        })
​
    </script>

 

 

1.7生命周期

1.主要阶段

• 挂载（初始化相关属性）

  ① beforeCreate

  ② created

  ③ beforeMount

  ④ mounted

• 更新（元素或组件的变更操作）

  ① beforeUpdate

  ② updated

• 销毁（销毁相关属性）

  ① beforeDestroy

  ② destroyed

2.Vue实例的产生过程

• 事物从出生到死亡的过程

• Vue实例从创建 到销毁的过程 ，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数

常用的 钩子函数

beforeCreate	在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了
created	在实例创建完成后被立即调用，此时data 和 methods已经可以使用 但是页面还没有渲染出来
beforeMount	在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已
mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。 页面上数据还是旧的
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。 页面上数据已经替换成最新的
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用