Vue常用特性

Vue常用特性

表单基本操作

• 获取单选框中的值

  • 通过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>
  

• 获取复选框中的值

  • 通过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>
  

• 获取下拉框和文本框中的值

  • 通过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>
  

表单修饰符

• .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" >
  

自定义指令

• 内置指令不能满足我们特殊的需求
• Vue允许我们自定义指令

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>

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>

自定义指令局部指令

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

计算属性 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>

侦听器 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>

过滤器

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

过滤器中传递参数

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

生命周期

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

常用的 钩子函数

数组变异方法

• 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
• 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

替换数组

• 不会改变原始数组，但总是返回一个新数组

动态数组响应式数据

• Vue.set(a,b,c) 让 触发视图重新更新一遍，数据动态起来
• a是要更改的数据 、 b是数据的第几项、 c是更改后的数据

常用特性应用场景

1 过滤器

• Vue.filter 定义一个全局过滤器

 <tr :key=‘item.id‘ v-for=‘item in books‘>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
     		<!-- 1.3  调用过滤器 -->
            <td>{{item.date | format(‘yyyy-MM-dd hh:mm:ss‘)}}</td>
            <td>
              <a href="" @click.prevent=‘toEdit(item.id)‘>修改</a>
              <span>|</span>
              <a href="" @click.prevent=‘deleteBook(item.id)‘>删除</a>
            </td>
</tr>

<script>
    	#1.1  Vue.filter  定义一个全局过滤器
	    Vue.filter(‘format‘, function(value, arg) {
              function dateFormat(date, format) {
                if (typeof date === "string") {
                  var mts = date.match(/(\/Date\((\d+)\)\/)/);
                  if (mts && mts.length >= 3) {
                    date = parseInt(mts[2]);
                  }
                }
                date = new Date(date);
                if (!date || date.toUTCString() == "Invalid Date") {
                  return "";
                }
                var map = {
                  "M": date.getMonth() + 1, //月份 
                  "d": date.getDate(), //日 
                  "h": date.getHours(), //小时 
                  "m": date.getMinutes(), //分 
                  "s": date.getSeconds(), //秒 
                  "q": Math.floor((date.getMonth() + 3) / 3), //季度 
                  "S": date.getMilliseconds() //毫秒 
                };
                format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                  var v = map[t];
                  if (v !== undefined) {
                    if (all.length > 1) {
                      v = ‘0‘ + v;
                      v = v.substr(v.length - 2);
                    }
                    return v;
                  } else if (t === ‘y‘) {
                    return (date.getFullYear() + ‘‘).substr(4 - all.length);
                  }
                  return all;
                });
                return format;
              }
              return dateFormat(value, arg);
            })
#1.2  提供的数据 包含一个时间戳   为毫秒数
   [{
          id: 1,
          name: ‘三国演义‘,
          date: 2525609975000
        },{
          id: 2,
          name: ‘水浒传‘,
          date: 2525609975000
        },{
          id: 3,
          name: ‘红楼梦‘,
          date: 2525609975000
        },{
          id: 4,
          name: ‘西游记‘,
          date: 2525609975000
        }];
</script>

2 自定义指令

• 让表单自动获取焦点
• 通过Vue.directive 自定义指定

<!-- 2.2  通过v-自定义属性名 调用自定义指令 -->
<input type="text" id="id" v-model=‘id‘ :disabled="flag" v-focus>

<script>
    # 2.1   通过Vue.directive 自定义指定
	Vue.directive(‘focus‘, {
      inserted: function (el) {
        el.focus();
      }
    });

</script>

3 计算属性

• 通过计算属性计算图书的总数
  • 图书的总数就是计算数组的长度

 <div class="total">
        <span>图书总数：</span>
     	<!-- 3.2 在页面上 展示出来 -->
        <span>{{total}}</span>
</div>

  <script type="text/javascript">
    /*
      计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
    */
    var vm = new Vue({
      data: {
        flag: false,
        submitFlag: false,
        id: ‘‘,
        name: ‘‘,
        books: []
      },
      computed: {
        total: function(){
          // 3.1  计算图书的总数
          return this.books.length;
        }
      },
    });
  </script>

Vue常用特性

原文：https://www.cnblogs.com/royal6/p/12637951.html