Vue学习笔记（一）基础使用、过滤函数、重构函数、汇总函数

本文链接：https://blog.csdn.net/u011834528/article/details/105134959

1后期用编辑器vscode
v-once <h1 v-once>{{message}}</h1> 设置该选项的只在页面改变一次。
v-html   <h1 v-html>{{url}}</h1>    变量中 url='<a href="http://www.baidu.com">百度</a>' 则可以显示如果不设置 v-html 则原样显示。
v-text    <h1 v-text="message"></h1> 代替mustuche （不常用）
v-pre     原样显示 <h1 v-pre>{{message}}</h1> 显示{{message}} 不显示代替的变量。
v-bind   标签内部的属性值要想动态显示则 <img v-bind:src="message"> 得这样写。也可以简写直接加‘：’ 就可以了，把v-bind 去掉。
v-for 循环变量如变量 message=[1,2,3,4]    那么 <li v-for="a in message">{{a}}</li> 则可以完成循环。

2.input v-if v-else-if 使用时如果两个是input 内部有输入值 abc   出现重复显示问题在input内部加上 key="some" 就可以了。
3.function add(...sum){ } 这样定义方法可以添加很多参数。
4.响应式的界面不支持直接修改数组元素，如在页面中设置 this.message[0]="abc"; 数据是变了但是界面上显示的message不会改变，
只能用响应式的写法 this.message.splice(0,1,"abc");或者使用Vue.set(this.message,0,"abc")
5.循环遍历
*1用普通循环 for(let i=0;i<this.items.lenth;i++)
*2循环2 for(let i in this.items)
*3循环3 for(let item of this.items)
6.高阶函数
*1 filter 过滤函数
       const a = [1,2,3,4,5];
       //该函数用回调函数来循环所有的值，n就是每一个值
       let b = a.filter(function(n){
               //当返回值是true的时候会返回原来的值
               //返回值是false时，该值会被删除（过滤掉）
       });
*2 map 重构函数
       const a = [1,2,3,4,5];
       //该函数用回调函数来循环所有的值，n就是每一个值
       let b = a.map(function(n){
               return n*2;
               //会把每一个值乘以2然后返回到一个新数组b中
       });
*3 reduce 对数组中所有值进行汇总
       const a = [1,2,3,4,5];
       //该函数用回调函数来循环所有的值，preview：初始化的值，或者说前一个值，n就是每一个值
       let b = a.filter(function(preview,n){
               return preview+n
       },0);//0就是初始化的值这样写就可以计算出数组所有值相加的和

*4连贯式写法
       计算数组中所有大于3值乘以2的和
       const a = [1,2,3,4,5];
       let b = a.filter(function(n){
           return n>3
       }).map(function(n){
           return n*2
       }).reduce(function(p,n){
           return p+n
       },0);
*5箭头函数
       const a = [1,2,3,4,5];
       let b = a.filter(n=>n>3).map(n=>n*2).reduce((pre,n)=>pre+n);

7.v-model 修饰符
   *1 lazy
           <input type="text" v-model.lazy="test"> 只有当输入完成焦点离开或回车的时候才会生效否则是输入则生效
   *2 number
           <input type="number" v-model.number="test"> 则test的值就不是string类型就是number类型了
   *2 trim
           <input type="number" v-model.trim="test"> 则test的值自动去除前后空格