自学Vue Three Day！！！

内容有点多，如果感兴趣的话，建议先点赞关注后观看，以防后面找不到回家的路。

three day！！！

1、v-for中的key属性：

2.1、reduce方法的使用

2.2、Vue的计算属性computed 的使用(重点！！！)

2.3、computed内部方法（计算属性）具有有缓存的作用(重点！！！)

2.4、computed内部方法（计算属性）的另一种写法(get和 set)

3、关于v-model的原理

一个小skill

4、数组常用方法

5、reduce、filter、map方法简易使用：

 

1、v-for中的key属性：

 <div id="app">
         <input type="text" v-model="txtVal"><button @click="add()">添加</button>
         <ul>
             <li v-for="i in list">{{i}}</li>
         </ul>
     </div>
     <script>
         new Vue({
             el:'#app',
             data:{
                 list:['html','css','javascript'],
                 txtVal:''
             },
             methods:{
                 add(){
                     this.list.unshift(this.txtVal)
                 }
             }
         })
     </script>

这个地方没有加:key，只要增加或减少元素里面的内容，浏览器就会进行DOM操作，如下图所示：

 

 <div id="app">
         <input type="text" v-model="txtVal"><button @click="add()">添加</button>
         <ul>
             <!-- :key 的值就是浏览器判断是否需要进行DOM的更新的依据。
             如果这个 依据在操作前后都没有发生变化，浏览器就不会进行DOM更新
             如果某些元素的这个依据发生变化，浏览器随之就会进行DOM更新
         
             :key的作用：  减少了不必要的DOM操作，提高了更新效率
         -->
             <li v-for="i in list" :key="i">{{i}}</li>
         </ul>
     </div>
     <script>
         new Vue({
             el:'#app',
             data:{
                 list:['html','css','javascript'],
                 txtVal:''
             },
             methods:{
                 add(){
                     this.list.unshift(this.txtVal)
                 }
             }
         })
     </script>

这个是加了key属性，可以明显的看到浏览器的DOM操作仅对修改的地方进行操作，未修改的地方没有改变

 

2.1、reduce方法的使用

这个属性只是单纯的js属性，与vue无关

 var arr = [
        {name: 'Vuejs入门', price: 99, count: 3},
        {name: 'Vuejs底层', price: 89, count: 1},
        {name: 'Vuejs从入门到放弃', price: 19, count: 5},
     ]
 ​
     //数组名.reduce(回调函数，pre的初始值)
     arr.reduce(function(pre, current){
         // reduce这个方法被调用时，会遍历arr这个数组的每一个元素，每遍历一个元素，就执行一次这里的代码
         // current表示当前正在遍历的这个元素
         // pre 是上一次的这个函数return的值
         // ！！！因为第一次遍历没有上一个return值，所以，交给了第二个参数，设置pre的初始值
         console.log(pre, current)
         return 10
     },0)
 ​
     //！！！并且reduce方法最终会返回最后一次的return值

 

上面代码返回的结果：

 0 {name: "Vuejs入门", price: 99, count: 3}
 10 {name: "Vuejs底层", price: 89, count: 1}
 10 {name: "Vuejs从入门到放弃", price: 19, count: 5}

 

理解上面的代码之后，我们开始运用上面的代码完成一个计算购物车总价的案例：

 <script>
         var arr = [
             {name:'Vuejs入门',price:99,count:3},
             {name:'Vuejs底层',price:89,count:1},
             {name:'Vuejs入门到放弃',price:18,count:5}
         ]
         //          数组名.reduce(回调函数，pre的初始值)
         let total = arr.reduce(function(pre,current){
             // 每一次返回， 上一次的价格+（这一次的单价*这一次的数量）
             return pre+current.price*current.count
         },0)
         console.log(total);
     </script>

 

2.2、Vue的计算属性computed 的使用(重点！！！)

结合上面的js代码，我们现在在Vue中通过computed 使用：

 <div id="app">
         全部的总价为：{{total}}
     </div>
     <script>
         new Vue({
             el:'#app',
             data:{
                 arr:[
                     {name:'Vuejs入门',price:99,count:3},
                     {name:'Vuejs底层',price:89,count:1},
                     {name:'Vuejs入门到放弃',price:18,count:5}
                 ]
             },
             computed:{
                 // total 在这里是属性名，是我们自己定义的
                 // 计算属性的函数中需要有返回值，在页面中的{total}}就是这个返回值
                 total(){
                     let ret = this.arr.reduce(function(pre,current){
                         return pre+current.price*current.count
                     },0)
                     // 将计算的值返回到页面上
                     return ret
                 }
             }
         })
     </script>

 

2.3、computed内部方法（计算属性）具有有缓存的作用(重点！！！)

     <div id="app">
         总计：{{com_total}}
         总计：{{com_total}}
         总计：{{com_total}}
 ​
         总计：{{met_tabal()}}
         总计：{{met_tabal()}}
         总计：{{met_tabal()}}
         
         
     </div>
     <script>
         new Vue({
             el:"#app",
             data:{
                 arr: [
                     {name: 'Vuejs入门', price: 99, count: 3},
                     {name: 'Vuejs底层', price: 89, count: 1},
                     {name: 'Vuejs从入门到放弃', price: 19, count: 5},
                 ]    
             },
             methods:{
                 met_tabal(){
                     console.log("met_tabal方法调用")
                     var a = this.arr.reduce(function(pre, current){
 ​
                         // var total = 当前这次的 price*count + 上一次的total
                         var total = current.price*current.count + pre
                         return total
                     },0)
                     return a
                 }
             },
             computed:{
                 //com_total里面的方法必须有返回值！这个return值将来在视图中被{{com_total}}引用
                 com_total(){
                     console.log("com_total方法调用")
                     var a = this.arr.reduce(function(pre, current){
                         // var total = 当前这次的 price*count + 上一次的total
                         var total = current.price*current.count + pre
                         return total
                     },0)
                     return a
                 }
             }
         })
     </script>

方法的连续调用，可以看出“总计：{{com_total}}”，页面显示了多次，但控制台只调用了一次，反观“{{met_tabal()}}”方法，调用一次显示一次

 

2.4、computed内部方法（计算属性）的另一种写法(get和 set)

         ....
         computed:{
                 //computed里面的方法必须有返回值！这个return值将来在视图中被{{total}}引用
                 total:{
                     get(){
                         console.log("total_get")
                         var a = this.arr.reduce(function(pre, current){
 ​
                             // var total = 当前这次的 price*count + 上一次的total
                             var total = current.price*current.count + pre
                                 return total
                             },0)
                             return a
                     },
                     set(){
                         console.log("total_set")
                     },
                 }
             }
     ...
     
 ​
 vm.total = 3   //触发调用set方法

 

3、关于v-model的原理

基本原理之前在第二天的时候已经学过了，现在我们使用之前的一个双向绑定来练习一下

<div id="app">
        <!-- 
            v-model 的原理是：  由:value标签属性和 @input事件配合完成
            @input是一个事件，表示这个input元素的值发生改变的时候
            ：value属性 值就是 “默认值”的属性名
            同时也可以简写为：
            <input :value="txtVal" @input="txtVal = $event.target.value" />
         -->
        <input type="text" :value='txtVal' @input="changeVal">
        <p>{{txtVal}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                txtVal:'默认值'
            },
            methods: {
                changeVal(e){
                    // console.log(e.target.value);
                    // 修改txtVal里面的值
                    // this.txtVal=用户输入的内容
                    this.txtVal = e.target.value
                }
            },
        })
    </script>

 

一个小skill

敲了这么多遍代码，有没有发现每次都要敲一遍new Vue。。。。

给你们整段神奇的代码！！！

{
	"html:5": {
		"prefix": "hv",
		"body": [
			"<!DOCTYPE html>",
			"<html>",
			"<head>",
				"\t<meta charset=\"UTF-8\">",
				"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
				"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
				"\t<title></title>",
				"\t<script src=\"https://cdn.jsdelivr.net/npm/vue\"></script>",
			"</head>",
			"<body>",
				"\t<div id='app'>",
				"\t\t$0",
				"\t</div>",
				"\t<script>",
					"\t\tnew Vue({",
						"\t\t\tel:'#app',",
						"\t\t\tdata:{",
						"\t",
						"\t\t\t}",
						"})",
					"\t\t</script>",
			"</body>",
			"</html>",
		],
			"description": "HTML5"
	}
}

这个方法在我第一天就有提到，把全部代码copy，去到CSCode => 左下角齿轮 => 用户代码片段 => 选择之前设置的文件 => 全选 => 复制

搞定，要是没设置过的话，可以去看一下我第一天的教程。

 

4、数组常用方法

<script>
        // push    pop    unshift    shift    splice    concat
        var arr = [1,2,3]
        var let = arr.push(4)   //在数组最后面追加一个数字，
        console.log(let,arr);   //会返回一个值let，等于这个数组的长度

        var arr = [1,2,3]
        var let = arr.pop()     //删除数组最后一位
        console.log(let,arr);   //返回被删除的值

        var arr = [1,2,3]
        var let = arr.unshift(0)    //在数组最前面加一个数字
        console.log(let,arr)        //返回数组的长度

        var arr = [1,2,3]
        var let = arr.shift()   //删除数组第一位
        console.log(let,arr)    //返回被删除的值

        var arr = [1,2,3]
        var let = arr.splice(1,0,4,5,6)   // arr.splice(在哪个位置（索引值）进行添加/删除操作，要删除的项目数量可以为0，item1, ..., itemX（可选。向数组添加的新项目。）)
        console.log(let,arr)    //返回值：如果有删除的值，则返回删除的值，若没有删除，则返回一个空数组

        var arr = [1,2,3]
        var let = [4,5,6]
        var int = arr.concat(let)   //将数组合并[1, 2, 3, 4, 5, 6]，且原arr不变
        console.log(int,arr)
    </script>

总结：

方法	说明	返回值
push（）	向数组的末尾添加一个或多个元素	返回新数组的长度
unshift（）	可向数组的开头添加一个或更多元素	返回新数组的长度
shift（）	用于把数组的第一个元素从其中删除	返回删除元素的值
pop（）	用于删除并返回数组的最后一个元素	返回删除元素的值
splice（）	从数组中添加/删除项目	返回被删除的数组
concat（）	用于连接两个或多个数组	返回新数组，原数组不会被改变

 

5、reduce、filter、map方法简易使用：

	var arr = [1, 2, 3]

    // 计算总数
    var ret1 = arr.reduce((pre, current)=>{
        pre += current
        return pre
    }, 0)
    console.log(ret1)  // 6

    // filter (过滤)
    var ret2 = arr.filter(item =>{
        return item > 2
    })
    console.log(ret2)  // [3]
 
    // map （对数组里面的每个值进行操作）
    var ret3 = arr.map(item =>{
        return {id:item}
    })
    console.log(ret3)   // [{id: 1}, {id: 2}, {id: 3}]