Vue基础-2

1.表单修饰符

.number 转换为数值**(表单中输入的值为字符串类型，number可将其转换为数字类型)**
.trim 自动过滤用户输入的首尾空白字符，只能去掉首尾的不能去除中间的空格
.lazy 将input事件切换成change事件（在表单校验时使用）
在失去焦点或者按下回车键时才更新

<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!--自动过滤用户输入的首尾空白字符   -->
<input v-model.trim="msg">

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

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

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

4.过滤器

Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和v-bind表达式。
支持级联操作
过滤器不改变真正的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>

5.过滤器中传递参数

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

6.数组变异的方法（会改变原数组）

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

push()：往数组最后面添加一个元素，成功返回当前数组的长度
pop()：删除数组的最后一个元素，成功返回删除元素的值
shift()：删除数组的第一个元素，成功返回删除元素的值
unshift()：往数组最前面添加一个元素，成功返回当前数组的长度
splice()：有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值
sort()：sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse()：reverse() 将数组倒序，成功返回倒序后的数组

7.替换数组
不会改变原始数组，但总是返回一个新数组

filter：该方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat：该方法用于连接两个或多个数组。该方法不会改变现有的数组
slice：该方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

8.修改响应式数据

Vue.set(vm.items, indexOfitem, newValue)
Vue.set(vm.items, indexOfitem, newValue)

vm.items:表示要处理的数组或对象名称；
indexOfitem表示要处理的数组的索引；
newValue:表示要处理的数组的值

<body>
    <div id="app">
        <div>
            <input type="text" v-model='fname'>
            <button @click="add">添加</button>
            <button @click="del">删除</button>
            <button @click="rep">替换</button>
        </div>
        <ul>
            <li :key="index" v-for="(item,index) in list" >{{item}}</li>
        </ul>
        <div>
            {{info.name}}
            {{info.age}}
            {{info.gender}}
        </div>
    </div>
    
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                fname: '',
                list: [
                    'apple','orange','banana'
                ],
                info: {
                    name: 'aaa',
                    age: 21,
                }
            },
            methods: {
                add: function() {
                    this.list.push(this.fname)
                },
                del: function() {
                    this.list.pop()
                },
                rep: function() {
                    this.list = this.list.slice(0,2)
                }
            }
        })
        vm.$set(vm.list, 1, 2)
        vm.$set(vm.list, 2, 3)
        Vue.set(vm.list, 0, 'xxx')
        vm.$set(vm.info, 'gender', 'female')
    </script>
</body>