大家好，从今天开始，会每天分享vue学习的知识点，一起加油~

首先，学习几个单词

computed 计算，watch 监听，handler处理器，deep深度，config配置，global全局，Properties 属性，filters过滤，directive指令

1、computed计算

计算属性是基于它们的响应式依赖进行缓存的
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
模板中放入太多的逻辑会让模板过重且难以维护使用计算属性可以让模板更加的简洁
从现有数据计算出新的数据（只读）

课堂案例：01搜索水果

<body>
    <div id="app">
        <h3>搜索水果</h3>
        <input type="text" v-model="keyword">
        <div v-for="(item,index) in flist" :key="index">{{item}}</div>
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            computed: {
                flist() {
                    if (this.keyword.trim() === "") {
                        return this.list
                    } else {
                        var temp = this.list.filter(item => {
                            //如果遍历的元素包含keyword 返回true 保留当前的item
                            //当通过indexOf查字符串时候返回-1,代表找不到
                            //不等于-1代表找到了
                            if (item.indexOf(this.keyword) != -1) {
                                return true;
                            } else {
                                return false
                            }
                        })
                        return temp
                    }
                }
            },
            data() {
                return {
                    keyword: "",
                    list: ["苹果", "枇杷", "山楂", "梨", "樱桃", "李子", "草莓", "橘子", "柚子", "西瓜", "香蕉", "枣", "葡萄", "蓝莓", "芒果", "菠萝", "枸杞", "番石榴", "山竹", "椰子", "槟榔", "榴莲", "荔枝", "龙眼", "火龙果", "桑葚", "柿子", "杨梅"]
                }
            }
        })

        //通过计算 keyword 与list s算出flist
        //如果list中的某一项 包含keyword 关键字， 在flist保留该项
        // includes检测是否包含某个字符串 indexOf()不等于-1
        //filter 过滤数组
        //trim 移除字符串两端的空格
    </script>
</body>

运行结果

课堂案例： 02计算总价

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        table tr {
            height: 50px;
        }

        td {
            width: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <table border="1" rules="all">
            <tr>
                <th></th>
                <th>商品名称</th>
                <th>价格</th>
                <th>数量</th>
            </tr>
            <tr v-for="item in goods" :key="item.name">
                <td> <input type="checkbox" v-model="item.sel"></td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td> <button @click="item.num++">{{item.num}}</button> </td>
            </tr>
        </table>
        <p>总价:{{total}}元 , 共{{totalPrice}}件</p>
    </div>

    <script>
        new Vue({
            el: "#app",
            computed: {
                //返回的默认总价
                total() {
                    var n = 0
                    this.goods.forEach(item => {
                        if (item.sel) {
                            n += item.price * item.num;
                        }
                    });
                    return n;
                },
                //返回的默认价格
                totalPrice() {
                    var n = 0
                    this.goods.forEach(item => {
                        //数量累加
                        if (item.sel) {
                            n += item.num;
                        }
                    });
                    return n;
                }
            },
            data() {
                return {
                    goods: [
                        { name: "javascript", price: "20", num: 1, sel: true },
                        { name: "vue实战", price: "17.5", num: 2, sel: false },
                    ]
                }
            }
        })
    
    </script>
</body>

运行结果

2、watch监听

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

注意：引用数据类型需要添加处理器handler与deep。

监听数据的变化执行回调函数
watch:{"obj":{handler(nval){//执行回调函数}，deep:true}}

课堂案例：01监听值类型

<head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="../js/vue.js"></script>    <style>        button {            width: 100px;            height: 50px;            font-size: 24px;            font-weight: 900;        }    </style></head><body>    <div id="app">        <h1>watch监听</h1>        <button @click="num++">{{num}}</button>    </div>    <script>        new Vue({            el: "#app",            //监听num数据的变化，执行回调函数handler            watch: {                //值类型的数据监听（字符串，数字，布尔，undefined）                "num": {                    handler(nval, oval) {                        console.log("数据num从", oval, "变化为", nval);                    }                }            },            data() {                return {                    num: 5                }            }        })    </script></body>

运行结果

课堂案例：02监听引用类型

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        button {
            width: 100px;
            height: 50px;
            font-size: 24px;
            font-weight: 900;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>watch监听</h1>
        <button @click="obj.num++">{{obj.num}}</button>
    </div>

    <script>
        new Vue({
            el: "#app",
            //监听obj数据的变化，执行回调函数handler
            watch: {
                "obj": {
                    //引用类型数据监听需要添加deep选项
                    //oval 和 nval都是最新的值
                    handler(nval, oval) {
                        //只要obj 发生变化重新急速 result 的值
                        console.log("数据发生变化", oval, nval);
                    },
                    deep: true,
                }
            },
            data() {
                return {
                    obj: {
                        num: 5
                    }
                }
            }
        })
    </script>
</body>

运行结果

课堂案例：03简易计算器运算

<body>
    <div id="app">
        <h1>watch监听</h1>
        <input type="text" v-model.number="obj.pre">
        <select name="" id="" v-model="obj.type">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">×</option>
            <option value="/">÷</option>
        </select>
        <input type="text" v-model.number="obj.next">
        =
        {{obj.result}}
    </div>
    
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            //监听obj数据的变化，执行回调函数handler
            watch: {
                "obj": {
                    handler(nval, oval) {
                        this.obj.result = eval(`(${this.obj.pre})${this.obj.type}(${this.obj.next})`)
                    },
                    deep: true,
                }
            },
            data() {
                return {
                    obj: {
                        pre: 1,
                        next: 1,
                        type: "+",
                        result: 2
                    }
                }
            }
        })
    </script>
</body>

代码运行结果

3、class

用v-bind给标签class设置动态的值

语法

:class=”{类名：布尔值;}” true 使用 false 不使用

Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

文本

:class=”active”

注意：没有加单引号的active是一个变量不是字符串

对象

:class=”{‘active’:flag}”

数组

:class=”list”

课堂案例

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .active {
            background-color: tomato;
            color: #fff;
        }

        .big {
            font-size: 24px;
            width: 100px;
            height: 50px;
        }

        .bold {
            font-weight: 900;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="flag=!flag" v-bind:class="flag?'active':''">开</button>
        <button @click="flag=!flag" :class="{'active':flag,'big':isBig}">关</button>
        <p :class="classList">文本</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    flag: true,
                    isBig: false,
                    classList: ['bold', 'big', 'active']
                }
            }
        })
    </script>
</body>

运行结果

4、style

:style=”{color:’red’,fontSize:’24px’}”

css属性驼峰式写法

课堂案例

<body>
    <div id="app">
        <input type="color" v-model="color">
        <input type="range" v-model="height" min="1" max="200">
        <p :style="{'fontSize':'58px','backgroundColor':color,lineHeight:height+'px'}">样式的绑定</p>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    color: "#fccfcc",
                    height: 80
                }
            }
        })
    </script>
</body>

运行结果

5、回顾JavaScript

5.1数组

Array对象方法
indexOf(要查找的元素，开始查找的位置)	返回值首个被找到的元素在数组中的索引位置;若没有找到则返回-1
shift	删除
pop	后删
splice	中间删
unshift	前加
push	后加
reverse	翻转
join()	转字符串
contact（）	连接数组
filter	过滤
forEach	遍历
map	映射
reduce	累计
some	有一个
every	每一个
find	查找符合条件的元素
findIndex	查找符合条件的元素下标
sort	排序

5.2字符串

String对象方法
indexOf、lastindexOf	查询字符串下标，找不到返回-1
split(”)	分割为数组
slice(start,end)	切割字符串
subString(start,end)	截取字符串（按下标end）
subStr(start,len)	截取字符串（按长度len）