Vue2基础（二）

1、 reduce方法

​ reduce方法的使用（数组方法）： 遍历数组，求和

​ 语法：数组名.reduce((pre,current) => {},参数2)

​ pre:上次执行该方法的返回值

​ current：数据项

​ 参数2：pre的初始值

		let ret = arr.reduce((pre,current) => {
            // 这里的pre相当于前面所有数据项的和
            return pre + current.price * current.count
        },0)
        console.log(ret);

2、 Vue的计算属性

存放属性（以函数的形式）

当一个值受其他值影响的时候，就会将这个值写在计算属性当中

有效缓存效果：只执行一次

	        // 写法一		
			computed:{
                    total(){
                        let ret = this.arr.reduce((pre,cur) => {
                            return pre + cur.price * cur.count
                        },0)
                        return '总价格：￥' + ret.toFixed(2) + '元'
                    }
            },
           // 写法二     
           computed:{
                    total:{
                        get(){
                            // total在页面中使用了就会执行get中的代码
                            console.log('执行了get方法');
                            return 100;
                        },
                        set(){
                            // 计算属性的值修改时会执行此处代码
                            console.log('执行了set方法');
                        }
                    }
                },          

3、 toFixed方法

toFixed(n)保留n位小数

ret.toFixed(2)

4、 v-model原理

​ 1、修改了文本框的value属性值

​ 2、绑定了输入事件 input

​ 3、用value和input事件来实现数据的双向绑定

​ v-model的本质就是利用: value属性+@input事件完成的

​ 将用户输入的内容赋值给变量

        <div id='app'>		
        <input type="text" v-model="txtVal">
        <!-- <input type="text" :value="txtVal" @input="myInput"> -->
        <!-- 简写形式  e = $event -->
        <input type="text" :value="txtVal" @input="txtVal = $event.target.value">
        <p>{{txtVal}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                txtVal:''
            },
            methods: {
                // myInput(e){
                //     /* 
                //         将输入的内容获取并打印
                //         将用户输入的内容赋值给txtVal即可
                //     */
                //     this.txtVal = e.target.value
                // }
            }
        })
    </script>

5、 数组常用方法

​ push(): 在数组末尾添加新的数据项

​ pop(): 删除数组中的最后数据项

​ unshift(): 在数组的前面添加数据项

​ shift(): 在数组的最前面删除数据项

​ concat(): 数组合并的(数据项)

​ reverse(): 数据项反转

​ map() 数组遍历

​ splice(要删除的索引,删除的个数,替换的数据项): 用来操作数组

​ filter筛选

​ 语法：数组名.filter(函数 (形参1，形参2，形参3){

​ 形参1：数据项(item)

​ 形参2：索引(index)

​ 形参3：数组本身(slef)

​ })

6、 数组去重

1、ES6的方式

​ new Set(参数)

​ console.log([…new Set(arr)]);

​ console.log(Array.from(new Set(arr)));

2、传统的去重（循环）

​ 1> 重新定义一个空数组

​ 2> 某项数据不在新数组中，则添加

​ 3> 打印新数组

​ 数组名.indexOf(数据项) == -1

​ !数组名.includes(数据项)

3、filter方法去重

​ 思想：将自己本身的索引和首次出现的索引比较，相等则返回

 		var arr = [1, 2, 12, 54, 12, 1, 2, 2]
        // 方式一
        console.log(new Set(arr));
        console.log([...new Set(arr)]);
        console.log(Array.from(new Set(arr)));
        // 方式二
        let ret = arr.filter((item, index, self) => {
            return self.indexOf(item) === index
        })
        console.log(ret);
        // 方式三
        let newArr = []
        for (var i = 0; i < arr.length; i++) {
            /*  if(newArr.indexOf(arr[i]) == -1){
                 newArr.push(arr[i])
             } */
            if (!newArr.includes(arr[i])) {
                newArr.push(arr[i])
            }
        }
        console.log(newArr);

7、 计算字符出现次数

		var str = "qwertyuioqwertyuiisdfghjxcvbnmdfghjkkkkkkkkksdfghj"
        // 方法一
        var arr = str.split('')
        let ret = arr.reduce((pre, cur) => {
            pre[cur] ? pre[cur]++ : pre[cur] = 1
            return pre
        }, {})
        console.log(ret);
        // 方法二
        var obj = {}
        for(var i = 0;i<str.length;i++){
            if(obj[str[i]]){
                obj[str[i]]++
            } else {
                obj[str[i]] = 1
            }
        }
        console.log(obj);

8、 其他不常用指令

​ v-text:展示内容，不解析标签

​ v-html:展示内容，可解析标签

​ v-pre :让插值表达式失效

​ v-cloak:解决当网络加载很慢时，或者频繁渲染时候，页面就会显示出源代码

		<p v-text="str"></p>
        <p v-html="str"></p>
        <p><span v-pre>{{num}}</span>的值是：{{num}}</p>
        <p v-cloak>{{num}}</p>

9、 添加VSCode模板

​ 1、文件 -> 首选项 -> 用户代码片段

​ 2、在输入框内输入html.json

​ 3、用下面的代码覆盖掉原来的

​ 使用：新建html文件直接输入hv，然后按下回车即可

"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@2/dist/vue.js\"></script>",
			"</head>",
			"<body>",
			"\t<div id='app'>",
			"\t</div>",
			"\t<script>",
			"\t\tnew Vue({",
			"\t\t\tel:'#app',",
			"\t\t\tdata:{},",
			"\t\t\tmethods:{}",
			"\t\t})",
			"\t</script>",
			"</body>",
			"</html>",
		],
		"description": "HTML5"
	}

文章内容可能会有一点乱，仅记录今日所学知识点，大家酌情看哦~