关于vue.js:Vue-核心技术

英文官网
中武官网

动静构建用户界面的渐进式 JavaScript 框架
作者: 尤雨溪

遵循 MVVM 模式
编码简洁，体积小，运行效率高，适宜挪动 /PC 端开发
它自身只关注 UI，也能够引入其它第三方库开发我的项目

借鉴 Angular 的 模板和数据绑定技术
借鉴 React 的 组件化 和虚构 DOM 技术

Vue CLI: 我的项目脚手架
Vue Resource
Axios
Vue Router: 路由
Vuex: 状态治理
element-ui: 基于 Vue 的 UI 组件库(PC 端)

……

<!DOCTYPE html>
<html lang="en">
<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> 初识 Vue</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        初识 Vue：1. 想让 Vue 工作，就必须创立一个 Vue 实例，且要传入一个配置对象；2.root 容器里的代码仍然合乎 html 标准，只不过混入了一些非凡的 Vue 语法；3.root 容器里的代码被称为【Vue 模板】；4.Vue 实例和容器是一一对应的；5. 实在开发中只有一个 Vue 实例，并且会配合着组件一起应用；6.{{xxx}} 中的 xxx 要写 js 表达式，且 xxx 能够主动读取到 data 中的所有属性；7. 一旦 data 中的数据产生扭转，那么页面中用到该数据的中央也会自动更新；留神辨别：js 表达式和 js 代码(语句)
                1. 表达式：一个表达式会产生一个值，能够放在任何一个须要值的中央：(1). a
                    (2). a+b
                    (3). demo(1)
                    (4). x === y ? 'a' : 'b'

                2.js 代码(语句)
                    (1). if(){}
                    (2). for(){}
    -->
    <div id="root">
        <h1>Hello {{name}}</h1>
    </div>

    <script>
        // 阻止 Vue 在启动时生成生产提醒
        // You are running Vue in development mode.
        // Make sure to turn on production mode when deploying for production.
        // See more tips at https://vuejs.org/guide/deployment.html
        Vue.config.productionTip = false

        // 创立 Vue 实例
        new Vue({
            // el 用于指定以后 Vue 实例为哪个容器服务，值通常为 css 选择器字符串
            el: '#root', 
            // data 用于存储数据，数据供 el 所指定的容器去应用
            data: {name: "张三"},
        })
    </script>
</body>
</html>

html 中蕴含了一些 js 语法代码，语法分为两种，别离为：

插值语法（双大括号表达式）
指令（以 v - 结尾）

性能：用于解析标签体内容

性能：解析标签属性、解析标签体内容、绑定事件
举例：v-bind:href='xxxx'，xxxx 会作为 js 表达式被解析
阐明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

<!DOCTYPE html>
<html lang="en">
<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>Vue 模板语法 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        Vue 模板语法有 2 大类：1. 插值语法：性能：用于解析标签体内容。写法：{{xxx}}，xxx 是 js 表达式，且能够间接读取到 data 中的所有属性。2. 指令语法：性能：用于解析标签（包含：标签属性、标签体内容、绑定事件.....）。举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx 同样要写 js 表达式，且能够间接读取到 data 中的所有属性。备注：Vue 中有很多的指令，且模式都是：v-????，此处咱们只是拿 v-bind 举个例子。-->
    <div id="root">
        <h1> 插值语法 </h1>
        <h3> 你好，{{name}}</h3>
        <hr></hr>
        <h1> 指令语法 </h1>
        <a href="http://baidu.com"> 去百度 </a>
        <br/>
        <a v-bind:href="school.url"> 去百度 </a>
        <br/>
        <a :href="school.url"> 去百度 </a>
    </div>

    <script>
        // 阻止 Vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                name: "张三",
                school: {url: "http://baidu.com"}
            }
        })
    </script>
</body>
</html>

语法：v-bind:href="xxx" 或简写为 :href
特点：数据只能从 data 流向页面

语法：v-model:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data

<!DOCTYPE html>
<html lang="en">
<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> 数据绑定 </title>
    <script src="../js/vue.js"></script>
</head>
<body>

    <!--  Vue 中有 2 种数据绑定的形式：1. 单向绑定(v-bind)：数据只能从 data 流向页面。2. 双向绑定(v-model)：数据不仅能从 data 流向页面，还能够从页面流向 data。备注：1. 双向绑定个别都利用在表单类元素上（如：input、select 等）2.v-model:value 能够简写为 v-model，因为 v-model 默认收集的就是 value 值。-->
    <div id="root">
        <!-- 单向绑定 -->

        <!-- 一般写法 -->
        单向绑定一般写法:<input type="text" v-bind:value="name"></input>
        <br/>
        <!-- 简写 -->
        单向绑定简写:<input type="text" :value="name"></input>
        
        <hr></hr>
        <!-- 双向绑定 -->
        <!-- 一般写法 -->
        双向绑定一般写法:<input type="text" v-model:value="name"></input>
        <br/>
        <!-- 简写 -->
        双向绑定简写:<input type="text" v-model="name"></input>

        <!-- 如下代码是谬误的，因为 v-model 只能利用在表单类元素（输出类元素）上 -->
        <!-- <h2 v-model="name">: v-model is not supported on this element type. 
            If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component. -->
        <h2 v-model:x="name"></h2>
        


    </div>

    <script>
        // 组织 Vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {name: "张三"}
        })
    </script>
</body>
</html>

M：模型(Model)：对应 data 中的数据
V：视图(View)：模板
VM：视图模型(ViewModel)：Vue 实例对象

v-on:xxx="fun"
@xxx="fun"
@xxx="fun(参数)"
默认事件形参：event
隐含属性对象：$event

<!DOCTYPE html>
<html lang="en">
<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> 事件的根本应用 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        事件的根本应用：1. 应用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名；2. 事件的回调须要配置在 vue 实例中的 methods 对象，最终会在 vm 实例上；3.methods 中配置配置的函数，不要用箭头函数，否则 this 就不是 vm 实例了；4.methods 中配置的函数，都是被 vue 实例所治理的函数，this 的指向是 vm 或 组件实例对象；[email protected]="demo" 和 @click="demo($event)" 成果统一，但后者能够传参
     -->
    <div id="root">
        <h2> 欢送来到 {{name}} 学习 </h2>
        <button v-on:click = "showInfo01"> 点我去学习 1 </button>
        <button v-on:click = "showInfo02"> 点我去学习 2 </button>
        <button @click = "showInfo03"> 点我去学习 3 </button>
        <button @click = "showInfo04(88)"> 点我去学习 4 </button>
        <button @click = "showInfo05(88, $event)"> 点我去学习 5 </button>
    </div>
    
    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data() {
                return {name: "北京大学"}
            },
            
            methods: {showInfo01() {alert("点我去学习 1")
                },
                
                showInfo02(event) {console.log(event);
                },

                showInfo03() {alert("点我去学习 3")
                },

                showInfo04(number) {console.log(number);
                    alert("点我去学习 4" + number)
                },

                showInfo05(number, event) {console.log(number, event);
                    alert("点我去学习 5")
                },
            },
        })
    </script>
</body>
</html>

prevent: 阻止事件的默认行为 event.preventDefault()
stop: 进行事件冒泡 event.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<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> 事件修饰符 </title>
    <script src="../js/vue.js"></script>
    <style>
        *{margin-top: 20px;}
        .box1 {
            height: 50px;
            padding: 5px;
            background-color: skyblue;
        }
        .box2 {
            height: 50px;
            padding: 5px;
            background-color: orange;
        }
        .box3 {
            height: 5px;
            padding: 5px;
            background-color: rebeccapurple;
        }
        .box4 {
            height: 50px;
            padding: 5px;
            background-color: antiquewhite;
        }
        .list {
            width: 200px;
            height: 200px;
            background-color: peru;
            /* 在容器内生成滑动窗口 */
            overflow: auto;
        }
        li {height: 100px;}
    </style>
</head>
<body>
    <!-- 
        Vue 中的事件修饰符：1.prevent：阻止默认事件（罕用）；2.stop：阻止事件冒泡（罕用）；3.once：事件只触发一次（罕用）；4.capture：应用事件的捕捉模式；5.self：只有 event.target 是以后操作的元素时才触发事件；6.passive：事件的默认行为立刻执行，无需期待事件回调执行结束；-->

    <div id="root">
        <!-- 1. 阻止默认事件 -->
        <!-- 弹窗点击确认后会跳转到百度 -->
        <a href="https://www.baidu.com" @click="gotoBaidu"> 点我去百度 </a><br/>
        <!-- 弹窗点击确认后不会跳转到百度 -->
        <a href="https://www.baidu.com" @click.prevent="gotoBaidu"> 点我去百度 </a><br>

        <!-- 2.stop：阻止事件冒泡 -->
        <div class = "box1" @click="showInfo">
            <button @click="showInfo"> 点我提示信息 </button>
        </div>
        <div class = "box1" @click="showInfo">
            <button @click.stop="showInfo"> 点我提示信息 </button>
        </div>
        
        <!--  3.once：事件只触发一次 -->
        <button @click.once="showInfo"> 点我提示信息 </button>

        <!-- 4.capture：应用事件的捕捉模式 -->
        <div class="box2" @click.capture="showMessage(1)">
            div01
            <div class="box3" @click.capture="showMessage(2)">
                div02
            </div>
        </div>

        <!-- 5.self：只有 event.target 是以后操作的元素时才触发事件 -->
        <div class="box4" @click.self="showInfo">
            <button @click="showInfo"> 点我提示信息 </button>
        </div>

        <!--  6.passive：事件的默认行为立刻执行，无需期待事件回调执行结束 -->\
        <!--  
            @scroll、@wheel 滚轮滑动事件，两者的区别：1.scroll 是页面滚动条滚动会触发的事件，而 wheel 是鼠标滚轮滚动会触发的事件。2，一旦滚动条到底部后，滑动鼠标滚轮持续滚动，wheel 就会始终触发，而 scroll 不会触发
        -->

        <ul class="list" @scroll="list">
        <!-- <ul class="list" @wheel="list"> -->
        <!-- <ul class="list" @wheel.passive="list"> -->
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <!-- 7. 多个修饰符 -->
        <div @click="showInfo">
            <a href="https://www.baidu.com" @click="showInfo"> 点我去百度 </a>
            <a href="https://www.baidu.com" @click.prevent.stop="showInfo"> 点我去百度 </a>
        </div>

    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: { },
            methods: {gotoBaidu() {alert("点我去百度!")
                },
                showInfo() {alert("hello world")
                },
                showMessage(message) {console.log(message);
                },
                list() {for(let i = 0; i < 10; i++) {console.log("#");
                    }
                    console.log("累坏了");
                }
            },
        })
    </script>
</body>
</html>

keycode: 操作的是某个 keycode 值的键
keyName: 操作的某个按键名的键(少部分)

<!DOCTYPE html>
<html lang="en">
<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> 键盘事件 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        1.Vue 中罕用的按键别名：回车 => enter
            删除 => delete (捕捉“删除”和“退格”键)
            退出 => esc
            空格 => space
            换行 => tab (非凡，必须配合 keydown 去应用)
            上 => up
            下 => down
            左 => left
            右 => right

        2.Vue 未提供别名的按键，能够应用按键原始的 key 值去绑定，但留神要转为 kebab-case（短横线命名）3. 零碎润饰键（用法非凡）：ctrl、alt、shift、meta
            (1). 配合 keyup 应用：按下润饰键的同时，再按下其余键，随后开释其余键，事件才被触发。(2). 配合 keydown 应用：失常触发事件。4. 也能够应用 keyCode 去指定具体的按键（不举荐）5.Vue.config.keyCodes. 自定义键名 = 键码，能够去定制按键别名
    -->
    <div id="root">
        <h3> 欢送来到 {{name}} 学习 </h3>
        <!-- @keydown、@keyup 两者的区别：前者是键盘按下事件，后者是键盘复原事件 -->
        <input placeholder="回车事件" @keydown="demo" ></input><br/>
        <input placeholder="回车事件" @keydown.enter="demo"></input><br/>
        <input placeholder="回车事件" @keydown.13="demo"></input><br/>
        <input placeholder="回车事件" @keydown.huiche="demo"></input><br/>

        <input placeholder="删除事件" @keydown.delete="demo"></input><br/>
        <input placeholder="退出事件" @keydown.esc="demo"></input><br/>
        <input placeholder="空格事件" @keydown.space="demo"></input><br/>
        <input placeholder="换行事件" @keydown.tab="demo"></input><br/>
        <input placeholder="上事件" @keydown.up="demo"></input><br/>
        <input placeholder="下事件" @keydown.down="demo"></input><br/>
        <input placeholder="左事件" @keydown.left="demo"></input><br/>
        <input placeholder="右事件" @keydown.right="demo"></input><br/>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false
        // 自定义键盘别名
        Vue.config.keyCodes.huiche = 13

        new Vue({
            el: "#root",
            data: {name: "Blili"},
            methods: {demo(event) {
                    // 输入键值
                    console.log(event.key, event.keyCode);
                    console.log("hello world");
                }
            },
        })
    </script>
</body>
</html>

1.7.1 计算属性 `computed`

要显示的数据不存在，要通过计算得来。
在 computed 对象中定义计算属性。

在页面中应用插值语法来显示计算的后果。

<!DOCTYPE html>
<html lang="en">
<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> 姓名案例 - 计算属性实现 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        计算属性：1. 定义：要用的属性不存在，要通过已有属性计算得来。2. 原理：底层借助了 Objcet.defineproperty 办法提供的 getter 和 setter。3.get 函数什么时候执行？(1). 首次读取时会执行一次。(2). 当依赖的数据产生扭转时会被再次调用。4. 劣势：与 methods 实现相比，外部有缓存机制（复用），效率更高，调试不便。5. 备注：1. 计算属性最终会呈现在 vm 上，间接读取应用即可。2. 如果计算属性要被批改，那必须写 set 函数去响应批改，且 set 中要引起计算时依赖的数据产生扭转。-->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br/>
        名：<input type="text" v-model="lastName"> <br/>
        <!-- 测试：<input type="text" v-model="x"> <br/> -->
        全名：<span>{{fullName}}</span> <br/>
        <!-- 全名：<span>{{fullName}}</span> <br/>
        全名：<span>{{fullName}}</span> <br/>
        全名：<span>{{fullName}}</span> -->

    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        const vm = new Vue({
            el: "#root",
            data: {
                firstName: "张",
                lastName: "三",
            },
            computed: {
                fullName: {get() {
                        //get 有什么作用？当有人读取 fullName 时，get 就会被调用，且返回值就作为 fullName 的值
                        //get 什么时候调用？1. 首次读取 fullName 时。2. 所依赖的数据发生变化时。console.log("get 被调用了");
                        return this.firstName + "-" + this.lastName
                    },
                    // set 什么时候被调用？fullName 被批改时
                    set(value) {console.log("set 被调用了");
                        const arr = value.split("-")
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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> 姓名案例 - 计算属性简写 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br/>
        名：<input type="text" v-model="lastName"> <br/>
        <!-- 测试：<input type="text" v-model="x"> <br/> -->
        全名：<span>{{fullName}}</span> <br/>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                firstName: "张",
                lastName: "三",
            },
            computed: {// fullName:function() {
                //     return this.firstName + "-" + this.lastName
                // },
                fullName() {return this.firstName + "-" + this.lastName}
            }
        })
    </script>
</body>
</html>

1.7.2 监督属性 `watch`

通过通过 vm 对象的 $watch() 或 watch 配置来监督指定的属性

当属性变动时，回调函数主动调用，在函数外部进行计算

<!DOCTYPE html>
<html lang="en">
<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> 天气案例 - 监督属性 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        监督属性 watch：1. 当被监督的属性变动时, 回调函数主动调用, 进行相干操作
            2. 监督的属性必须存在，能力进行监督！！3. 监督的两种写法：(1).new Vue 时传入 watch 配置
                (2). 通过 vm.$watch 监督
     -->
    <div id="root">
        <h2> 今天天气很{{info}}</h2>
        <button @click="changeWeather"> 切换天气 </button>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        const vm = new Vue({
            el: "#root",
            data: {isHot: true},
            computed: {info() {return this.isHot ? "酷热":"凉快";}
            },
            methods: {changeWeather() {this.isHot = !this.isHot}
            },
            watch: {
                // isHot: {
                //     // 初始化的时候让 handler 调用一下
                //     immediate: true,
                //     // handler 什么时候被调用？当 isHot 值发生变化时
                //     handler(newValue, oldValue) {//         console.log("isHot 值被批改了", newValue, oldValue);
                //     }
                // },
                
                // computed 中定义的属性也能被监督
                info: {handler(newValue, oldValue) {console.log("info 值被批改了", newValue, oldValue);
                    }
                }
            }
        });

        // watch 属性的另外一种写法
        vm.$watch("isHot", {
            // 初始化的时候让 handler 调用一下
            immediate: true,
            // handler 什么时候被调用？当 isHot 值发生变化时
            handler(newValue, oldValue) {console.log("isHot 值被批改了", newValue, oldValue);
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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> 天气案例 - 深度监督 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        深度监督：(1).Vue 中的 watch 默认不监测对象外部值的扭转（一层）。(2). 配置 deep:true 能够监测对象外部值扭转（多层）。备注：(1).Vue 本身能够监测对象外部值的扭转，但 Vue 提供的 watch 默认不能够！(2). 应用 watch 时依据数据的具体构造，决定是否采纳深度监督。-->
    <div id="root">
        <h2> 今天天气很{{info}}</h2>
        <button @click="changeWeather"> 切换天气 </button>
        <hr/>
        <h3>x 的值是:{{numbers.x}}</h3>
        <button @click="numbers.x ++"> 点我让 x + 1</button>
        <h3>y 的值是:{{numbers.y}}</h3>
        <button @click="numbers.y ++"> 点我让 y + 1</button>
        <br/>
        <br/>
        <button @click="numbers = {x:666, y:888}"> 彻底替换掉 numbers</button>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                isHot: true,
                numbers: {
                    x: 100,
                    y: 200
                },
                a: {
                    b: {
                        c: {d: "e"}
                    }
                }
            },
            computed: {info() {return this.isHot ? "酷热":"凉快";}
            },
            methods: {changeWeather() {this.isHot = !this.isHot}
            },
            watch: {
                isHot: {
                    // 初始化的时候让 handler 调用一下
                    immediate: true,
                    // handler 什么时候被调用？当 isHot 值发生变化时
                    handler(newValue, oldValue) {console.log("isHot 值被批改了", newValue, oldValue);
                    }
                },
                
                // computed 中定义的属性也能被监督
                info: {handler(newValue, oldValue) {console.log("info 值被批改了", newValue, oldValue);
                    }
                },
                // 监督多级构造中某个属性的变动
                "numbers.x": {handler(newValue, oldValue) {console.log("numbers.x 值被批改了", newValue, oldValue);
                    }
                },
                // 监督多级构造中所有属性的变动
                numbers: {
                    deep: true,
                    handler(newValue, oldValue) {console.log("numbers 值被批改了", newValue, oldValue);
                    }
                }
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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> 天气案例 - 监督属性 - 简写 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2> 今天天气很{{info}}</h2>
        <button @click="changeWeather"> 切换天气 </button>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        const vm = new Vue({
            el: "#root",
            data: {isHot: true},
            computed: {info() {return this.isHot ? "酷热":"凉快"}
            },
            methods: {changeWeather() {this.isHot = !this.isHot}
            },
            watch: {
                // 失常写法
                // isHot: {
                //     // 在初始化时调用 handler 一次
                //     immediate: true,
                //     handler(newValue, oldValue) {//         console.log("isHot 值被批改了", newValue, oldValue);
                //     }
                // },

                // 简写
                // 简写的毛病时不能写属性信息
                // isHot(newValue, oldValue) {//     console.log("isHot 值被批改了", newValue, oldValue);
                // }
            },
        });

        // 失常写法
        // vm.$watch("isHot", {
        //     // 初始化的时候让 handler 调用一下
        //     immediate: true,
        //     // handler 什么时候被调用？当 isHot 值发生变化时
        //     handler(newValue, oldValue) {//         console.log("isHot 值被批改了", newValue, oldValue);
        //     }
        // })
        // 简写
        vm.$watch("isHot", function(newValue, oldValue) {console.log("isHot 值被批改了", newValue, oldValue);
        })
    </script>
</body>
</html>

1.8 `class` 与 `style` 绑定

在利用界面中，某个 (些) 元素的款式是变动的
class/style 绑定就是专门用来实现动静款式成果的技术

1.8.2 `class` 绑定

:class='xxx'
表达式是字符串：'classA'
表达式是对象：{classA:isA,classB:isB}
表达式是数组：['classA','classB']

1.8.3 `style` 绑定

:style="{color:activeColor,fontSize:fontSize+'px'}"
其中 activeColor/fontSize 是 data 属性

<!DOCTYPE html>
<html lang="en">
<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> 绑定款式 </title>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        
        .happy{
            border: 4px solid red;;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{border: 4px dashed rgb(2, 197, 2);
            background-color: gray;
        }
        .normal{background-color: skyblue;}

        .box1{background-color: yellowgreen;}
        .box2{
            font-size: 30px;
            text-shadow:2px 2px 10px red;
        }
        .box3{border-radius: 20px;}
    </style>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        绑定款式：1. class 款式
                写法:class="xxx" xxx 能够是字符串、对象、数组。字符串写法实用于：类名不确定，要动静获取。对象写法实用于：要绑定多个款式，个数不确定，名字也不确定。数组写法实用于：要绑定多个款式，个数确定，名字也确定，但不确定用不必。2. style 款式
                :style="{fontSize: xxx}" 其中 xxx 是动静值。:style="[a,b]" 其中 a、b 是款式对象。3. 二者的区别：:class 动静绑定 class 的名称，而后专门在 <style></style> 中去设置对应 class 的款式
                :style 动静绑定 style 的成果，间接把 css 写在外面

     -->
    <div id="root">

        <!-- 绑定 class 款式（字符串写法），实用于：款式的类名不确定，须要动静指定 -->
        <div class="basic" :class="mood" @click="changeMood1">{{name}}</div> </br>

        <!-- 绑定 class 款式（数组写法），实用于：要绑定的款式个数不确定、名字也不确定 -->
        <div class="basic" :class="moodArr">{{name}}</div> </br>

        <!-- 绑定 class 款式（对象写法），实用于：要绑定的款式个数确定、名字也确定，但要动静决定用不必 -->
        <div class="basic" :class="moodObj">{{name}}</div> </br>
        
        <!-- 绑定 style 款式（对象写法）-->
        <div class="basic" :style="{fontSize:'40px', color:'orange'}">{{name}}</div> </br>
        <div class="basic" :style="styleObj">{{name}}</div> </br>

        <!-- 绑定 style 款式（数组写法）-->
        <div class="basic" :style="styleArr">{{name}}</div> </br>


    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                name: "Hello World",
                mood: "happy",
                moodArr: ["box1", "box2", "box3"],
                moodObj: {
                    box1: true,
                    box2: false,
                    box3: true
                },
                styleObj: {
                    fontSize: "40px",
                    color: "red"
                },
                styleArr: [
                    {
                        fontSize: "40px",
                        color: "blue"
                    },
                    {backgroundColor: "green"}
                ]
            },
            methods: {changeMood1() {this.mood = "sad"},
            },
        })
    </script>
</body>
</html>

v-if 与 v-else
v-show

1.9.2 比拟 `v-if` 与 `v-show`

如果须要频繁切换 v-show 较好
当条件不成立时，v-if 的所有子节点不会解析(我的项目中应用)

<!DOCTYPE html>
<html lang="en">
<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> 条件渲染 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        条件渲染：1.v-if
                写法：(1).v-if="表达式" 
                        (2).v-else-if="表达式"
                        (3).v-else="表达式"
                实用于：切换频率较低的场景。特点：不展现的 DOM 元素间接被移除。留神：v-if 能够和: v-else-if、v-else 一起应用，但要求构造不能被“打断”。2.v-show
                写法：v-show="表达式"
                实用于：切换频率较高的场景。特点：不展现的 DOM 元素未被移除，仅仅是应用款式暗藏掉
                
            3. 备注：应用 v-if 时，元素可能无奈获取到，而应用 v-show 肯定能够获取到。-->
    <div id="root">
        <!-- 应用 v-show 来做条件渲染 -->
        <!-- <h2 style="display: none;"> 欢送来到百度 </h2> -->
        <h2 v-show="false"> 欢送来到{{name}}</h2>
        <h2 v-show="1 === 1"> 欢送来到{{name}}</h2>
        
        <!-- 应用 v-if 来做条件渲染 -->
        <h2 v-if="false"> 欢送来到{{name}}</h2>
        <h2 v-if="2 === 2"> 欢送来到{{name}}</h2>

        <!-- v-if 与 template 的配合应用 -->
        <template v-if="n === 1">
            <h2>Angular</h2>
            <h2>React</h2>
            <h2>Vue</h2>
        </template>


    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                name: "百度",
                n: 1
            }
        })
    </script>
</body>
</html>

遍历数组：v-for/index
遍历对象：v-for/key

根本列表

<!DOCTYPE html>
<html lang="en">
<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> 根本列表 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        v-for 指令:
            1. 用于展现列表数据
            2. 语法：v-for="(item, index) in xxx" :key="yyy"
            3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）-->
    <div id="root">
        <!-- 遍历数组 -->
        <h2> 遍历数组 </h2>
        <!-- 用 id 作为 key -->
        <!-- <ul v-for="p in personList" :key = "p.id">
            <li>{{p.name}} - {{p.age}}</li>
        </ul> -->
        <!-- 用索引 index 作为 key -->
        <ul v-for="(p, index) in personList" :key = "index">
            <li>{{p.name}} - {{p.age}}</li>
        </ul>
        <hr/>
        
        <!-- 遍历对象 -->
        <h2> 遍历对象 </h2>
        <!-- 留神：key 在前面，value 在后面 -->
        <ul v-for="(v, k) in car" ::key="k">
            <li>{{k}} - {{v}}</li>
        </ul>
        <hr/>
        
        <!-- 遍历字符串 -->
        <h2> 遍历字符串 </h2>
        <ul v-for="(char, index) in str" :key="index">
            <ul>{{index}} - {{char}}</ul>
        </ul>
        <hr/>

        <!-- 遍历指定次数 -->
        <h2> 遍历指定次数 </h2>
        <ul v-for="i in 5">
            <ul>{{i}}</ul>
        </ul>

    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                personList: [{id: "001", name: "张三", age: 18},
                    {id: "002", name: "李四", age: 19},
                    {id: "003", name: "王五", age: 20},
                ],
                car: {
                    name: "奥迪 A8",
                    price: "80 万",
                    color: "彩色"
                },
                str: "hello world"
            }
        })
    </script>
</body>
</html>

key 的原理

<!DOCTYPE html>
<html lang="en">
<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>key 的原理 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        面试题：react、vue 中的 key 有什么作用？（key 的外部原理）1. 虚构 DOM 中 key 的作用：key 是虚构 DOM 对象的标识，当数据发生变化时，Vue 会依据【新数据】生成【新的虚构 DOM】, 
                随后 Vue 进行【新虚构 DOM】与【旧虚构 DOM】的差别比拟，比拟规定如下：2. 比照规定：(1). 旧虚构 DOM 中找到了与新虚构 DOM 雷同的 key：①. 若虚构 DOM 中内容没变, 间接应用之前的实在 DOM！②. 若虚构 DOM 中内容变了, 则生成新的实在 DOM，随后替换掉页面中之前的实在 DOM。(2). 旧虚构 DOM 中未找到与新虚构 DOM 雷同的 key
                    创立新的实在 DOM，随后渲染到到页面。3. 用 index 作为 key 可能会引发的问题：1. 若对数据进行：逆序增加、逆序删除等毁坏程序操作:
                                会产生没有必要的实在 DOM 更新 ==> 界面成果没问题, 但效率低。2. 如果构造中还蕴含输出类的 DOM：会产生谬误 DOM 更新 ==> 界面有问题。4. 开发中如何抉择 key?:
                1. 最好应用每条数据的惟一标识作为 key, 比方 id、手机号、身份证号、学号等惟一值。2. 如果不存在对数据的逆序增加、逆序删除等毁坏程序操作，仅用于渲染列表用于展现，应用 index 作为 key 是没有问题的。-->
    <div id="root">
        <h2> 遍历数组 </h2>
        <button @click="add"> 在后面增加一个赵六 </button>
        <!-- <ul v-for="(p, index) in personList" :key = "p.id"> -->
        <ul v-for="(p, index) in personList" :key = "index">
            <li>
                {{p.name}} - {{p.age}}
                <input type="text"></input>
            </li>
        </ul>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                personList: [{id: "001", name: "张三", age: 18},
                    {id: "002", name: "李四", age: 19},
                    {id: "003", name: "王五", age: 20},
                ],
            },
            methods: {add() {
                    this.personList.unshift({id: "004", name: "赵六", age: 38})
                }
            },
        })
    </script>
</body>
</html>

列表过滤

<!DOCTYPE html>
<html lang="en">
<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> 列表过滤 </title></title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2> 遍历数组 </h2>
        <input type="text" placeholder="输出名字进行过滤" v-model="keyWord"></input>
        <ul v-for="(p, index) in filterPersonList" ::key="index">
            <li>{{p.name}} - {{p.age}} - {{p.sex}}</li>
        </ul>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                keyWord:'',
                personList:[{id:'001',name:'马冬梅',age:19,sex:'女'},
                    {id:'002',name:'周冬雨',age:20,sex:'女'},
                    {id:'003',name:'周杰伦',age:21,sex:'男'},
                    {id:'004',name:'温兆伦',age:22,sex:'男'}
                ],
                filterPersonList: []},
            // 用 comouted 实现
            computed: {// filterPersonList() {//     return this.personList.filter((item) => {//         return item.name.indexOf(this.keyWord) > -1
                //     })
                // }
            },
            // 用 watch 实现
            watch: {
                keyWord: {
                    immediate: true,
                    handler(val) {this.filterPersonList = this.personList.filter((item) => {return item.name.indexOf(this.keyWord) > -1
                        })
                    }
                }
            }
        })
    </script>
</body>
</html>

列表排序

<!DOCTYPE html>
<html lang="en">
<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> 列表排序 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2> 遍历数组 </h2>
        <input type="text" placeholder="输出名字进行过滤" v-model="keyWord"></input>
        <button @click="sortType = 1"> 升序排序 </button></button>
        <button @click="sortType = 2"> 降序排列 </button></button>
        <button @click="sortType = 0"> 原序排序 </button></button>
        <ul v-for="(p, index) in filterPersonList" ::key="index">
            <li>{{p.name}} - {{p.age}} - {{p.sex}}</li>
        </ul>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                keyWord:'',
                personList:[{id:'001',name:'马冬梅',age:19,sex:'女'},
                    {id:'002',name:'周冬雨',age:20,sex:'女'},
                    {id:'003',name:'周杰伦',age:21,sex:'男'},
                    {id:'004',name:'温兆伦',age:22,sex:'男'}
                ],
                sortType: 1
            },
             // 用 comouted 实现
            computed: {filterPersonList() {const arr = this.personList.filter((item) => {return item.name.indexOf(this.keyWord) > -1
                    })
                    if (this.sortType) {arr.sort((p1, p2) => {return this.sortType === 1 ? p1.age - p2.age : p2.age - p1.age})
                    }
                    return arr
                }
            },
        })
    </script>
</body>
</html>

更新时的一个问题

<!DOCTYPE html>
<html lang="en">
<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> 更新时的一个问题 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2> 人员列表 </h2>
        <button @click="updateMa"> 更新马冬梅的信息 </button>
        <ul>
            <li v-for="p in personList" :key="p.id">
                {{p.name}} - {{p.age}} - {{p.sex}}
            </li>
        </ul>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                personList: [{id:'001',name:'马冬梅',age:19,sex:'女'},
                    {id:'002',name:'周冬雨',age:20,sex:'女'},
                    {id:'003',name:'周杰伦',age:21,sex:'男'},
                    {id:'004',name:'温兆伦',age:22,sex:'男'}
                ]
            },
            methods: {updateMa() {
                    // 见效的写法
                    // this.personList[0].name = "马老师"
                    // this.personList[0].age = 50
                    // this.personList[0].sex = "男"

                    // 不见效的写法
                    this.personList[0] = {name: "马老师", age: 50, sex: "男"}
                }
            },
        })
    </script>
</body>
</html>

Vue 监测数据扭转的原理 - 对象

<!DOCTYPE html>
<html lang="en">
<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>Vue 数据检测扭转的原理 - 对象 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2> 学校名称: {{name}}</h2>
        <h2> 学校地址: {{address}}</h2>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                name: "北京大学",
                address: "北京",
                student: {
                    name: "tom",
                    age: {
                        rAge: 40,
                        sAge: 18
                    },
                    friends: [{name: "jack", age: 38}
                    ]
                }
            }
        })
    </script>
</body>
</html>

模仿一个数据监测

<!DOCTYPE html>
<html lang="en">
<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> 模仿一个数据检测 </title>
</head>
<body>
    <div id="root">

    </div>
    <script>
        let data = {
            name: "北京大学",
            address: "北京",
            student: {
                name: "tom",
                age: 18
            }
        }

        // 创立一个监督的实例对象，用于监督 data 中属性的变动
        const obs = new Observer(data);

        // 筹备一个 vm 实例对象
        let vm = {}
        vm._data = data = obs

        function Observer(obj) {
            // 汇总对象中所有的属性造成一个数组
            const keys = Object.keys(obj);

            // 遍历
            keys.forEach((k) => {
                Object.defineProperty(this, k, {get() {return obj[k]
                    },
                    set(val) {obj[k] = val;
                    }
                })
            })
        }
        // 存在的问题是对于深层次的属性无奈生成 get set 如：student 中的属性
    </script>
</body>
</html>

Vue.set 的应用

<!DOCTYPE html>
<html lang="en">
<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>Vue.set 的应用 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1> 学校信息 </h1>
        <h2> 学校名称：{{shcool.name}}</h2>
        <h2> 学校地址：{{shcool.address}}</h2>
        <hr/>
        <h1> 学生信息 </h1>
        <button @click="addSex"> 增加性别 </button>
        <h2> 学生姓名：{{student.name}}</h2>
        <h2> 学生年龄：实在 -{{student.age.rAge}} 对外 -{{student.age.sAge}}</h2>
        <h2 v-if="student.sex"> 学生性别：{{student.sex}}</h2>
        <h2> 学生敌人 </h2>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">
                {{f.name}} - {{f.age}}
            </li>
        </ul>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                shcool: {
                    name: "北京大学",
                    address: "北京"
                },
                student: {
                    name: "tom",
                    age: {
                        rAge: 40,
                        sAge: 18
                    },
                    friends: [{name: "jerry", age: 35},
                        {name: "tony", age: 36}
                    ]
                }
            },
            methods: {addSex() {
                    // 写法一
                    // Vue.set(this.student, 'sex', "男")
                    // 写法二
                    this.$set(this.student, 'sex', "女")
                }
            },
        })
    </script>
</body>
</html>

Vue 监测数据扭转的原理 - 数组

<!DOCTYPE html>
<html lang="en">
<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>Vue 监测数据扭转的原理 - 数组 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1> 学校信息 </h1>
        <h2> 学校名称：{{school.name}}</h2>
        <h2> 学校地址：{{school.address}}</h2>
        <h2> 校长是：{{school.leader}}</h2>
        <hr/>
        <h1> 学生信息 </h1>
        <button @click="addHobby"> 在最后面增加一个喜好 </button>
        <button @click="updateHobby"> 批改第一个喜好 </button>
        <h2> 姓名：{{student.name}}</h2>
        <h2 v-if="student.sex"> 性别：{{student.sex}}</h2>
        <h2> 年龄：实在{{student.age.rAge}}，对外{{student.age.sAge}}</h2>
        <h2> 喜好 </h2>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h2> 敌人们 </h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                school:{
                    name: "北京大学",
                    address: "北京",
                },
                student:{
                    name: "tom",
                    age:{
                        rAge: 40,
                        sAge: 29,
                    },
                    hobby: ["抽烟", "喝酒", "烫头"],
                    friends: [{ name: "jerry", age: 35},
                        {name: "tony", age: 36}
                    ]
                }
            },
            methods: {addHobby() {this.student.hobby.unshift("睡觉")
                },
                updateHobby() {
                    // 不起作用
                    // this.student.hobby[0] = "唱跳"
                    
                    // 形式一
                    // Vue.set(this.student.hobby, 0, '唱跳')

                    // 形式二
                    // this.$set(this.student.hobby, 0, "唱跳")

                    // 形式三
                    this.student.hobby.splice(0, 1, "唱跳")

                }
            },
        })
    </script>
</body>
</html>

总结 Vue 的数据监测

<!DOCTYPE html>
<html lang="en">
<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> 总结 Vue 中的数据监测 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        Vue 监督数据的原理：1. Vue 会监督 data 中所有档次的数据。2. 如何监测对象中的数据？通过 setter 实现监督，且要在 new Vue 时就传入要监测的数据。(1). 对象中后追加的属性，Vue 默认不做响应式解决
                (2). 如需给后增加的属性做响应式，请应用如下 API：Vue.set(target，propertyName/index，value) 或 
                    vm.$set(target，propertyName/index，value)

            3. 如何监测数组中的数据？通过包裹数组更新元素的办法实现，实质就是做了两件事：(1). 调用原生对应的办法对数组进行更新。(2). 从新解析模板，进而更新页面。4. 在 Vue 批改数组中的某个元素肯定要用如下办法：1. 应用这些 API: push()、pop()、shift()、unshift()、splice()、sort()、reverse()
                2.Vue.set() 或 vm.$set()
            特地留神：Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象 增加属性！！！-->
    <div id="root">
        <h1> 学生信息 </h1>
        <button @click="addSex"> 增加性别 </button> <br/>
        <button @click="updateSex"> 批改性别 </button> <br/>
        <button @click="addFriend"> 在列表首位增加一个敌人 </button> <br/>
        <button @click="updateFirstFriendName"> 批改第一个敌人的名字为：赵六 </button> <br/>
        <button @click="addHobby"> 增加一个喜好 </button> <br/>
        <button @click="updateHobby"> 批改第一个喜好为：篮球 </button> <br/>
        <button @click="removeRap"> 过滤掉喜好中的 rap</button> <br/>
        <h2> 姓名: {{student.name}}</h2>
        <h2> 年龄: {{student.age}}</h2>
        <h2 v-if="student.sex"> 性别: {{student.sex}}</h2>
        <h2> 喜好: </h2>
        <ul>
            <li v-for="(h, index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h2> 敌人: </h2>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">
                {{f.name}} - {{f.age}}
            </li>
        </ul>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                student: {
                    name: "张三",
                    age: 18,
                    hobby: ["唱", "跳", "rap"],
                    friends: [{ name: "李四", age: 20},
                        {name: "王五", age: 19},
                    ]
                }
            },
            methods: {addSex() {
                    // 不起作用
                    // this.student.sex = "男"

                    // 形式一
                    // Vue.set(this.student, "sex", "男")

                    // 形式二
                    this.$set(this.student, "sex", "男")
                },
                updateSex() {this.student.sex = "女"},
                addFriend() {this.student.friends.unshift({ name: "老王", age: 28})
                },
                updateFirstFriendName() {this.student.friends[0].name = "赵六"
                },
                addHobby() {this.student.hobby.push("篮球")
                },
                updateHobby() {
                    // 不起作用
                    // this.student.hobby[0] = "篮球"

                    // 形式一
                    // Vue.set(this.student.hobby, 0, "篮球")

                    // 形式二
                    // this.$set(this.student.hobby, 0, "篮球")

                    // 形式三
                    this.student.hobby.splice(0, 1, "篮球")
                },
                removeRap() {
                    this.student.hobby = this.student.hobby.filter(item => {return item !== "rap"})
                }
            },
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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> 收集表单数据 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        收集表单数据：若：<input type="text"/>，则 v-model 收集的是 value 值，用户输出的就是 value 值。若：<input type="radio"/>，则 v-model 收集的是 value 值，且要给标签配置 value 值。若：<input type="checkbox"/>
                1. 没有配置 input 的 value 属性，那么收集的就是 checked（勾选 or 未勾选，是布尔值）2. 配置 input 的 value 属性:
                    (1)v-model 的初始值是非数组，那么收集的就是 checked（勾选 or 未勾选，是布尔值）(2)v-model 的初始值是数组，那么收集的的就是 value 组成的数组
            备注：v-model 的三个修饰符：lazy：失去焦点再收集数据
                number：输出字符串转为无效的数字
                trim：输出首尾空格过滤
    -->
    <div id="root">
        <form @submit.prevent="demo">
            <!-- 账号这么写的益处是：点击账号时，鼠标光标会主动定位到输入框内 -->
            <label for="account"> 账号：</label><input type="text" id="account" v-model.trim="userInfo.account"></input></br>
            年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
            明码：<input type="password" v-model="userInfo.password"></input></br>
            性别：<input type="radio" name="sex" v-model="userInfo.sex" value="male"> 男 </input>
            <input type="radio" name="sex" v-model="userInfo.sex" value="female"> 女 </input></br>
            喜好：<input type="checkbox"  v-model="userInfo.hobby" value="chang"> 唱 </input>
            <input type="checkbox"  v-model="userInfo.hobby" value="tiao"> 跳 </input>
            <input type="checkbox"  v-model="userInfo.hobby" value="rap">Rap</input></br>
            所属校区
            <select v-model="userInfo.city">
                <option value=""> 请抉择校区 </option>
                <option value="beijing"> 北京 </option>
                <option value="shanghai"> 上海 </option>
                <option value="shenzhen"> 深圳 </option>
                <option value="wuhan"> 武汉 </option>
            </select>
            <br/><br/>
            其余信息：<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
            <input type="checkbox" v-model="userInfo.agree"> 浏览并承受 <a href="http://www.baidu.com">《用户协定》</a></br>
            <button> 提交 </button>
        </form>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        new Vue({
            el: "#root",
            data: {
                userInfo:{
                    account: '',
                    age: 18,
                    password: '',
                    sex: '',
                    hobby: [],
                    city: '',
                    other: '',
                    agree: ''
                }
            },
            methods: {demo(){console.log(JSON.stringify(this.userInfo))
                }
            }

        })
    </script>
</body>
</html>

性能：对要显示的数据进行特定格式化后再显示
留神：并没有扭转本来的数据，是产生新的对应的数据

<!DOCTYPE html>
<html lang="en">
<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> 过滤器 </title>
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
</head>
<body>
    <!-- 
        过滤器：定义：对要显示的数据进行特定格式化后再显示（实用于一些简略逻辑的解决）。语法：1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters: {} }
                2. 应用过滤器：{{xxx | 过滤器名}}  或  v-bind: 属性 = "xxx | 过滤器名"
            备注：1. 过滤器也能够接管额定参数、多个过滤器也能够串联
                2. 并没有扭转本来的数据, 是产生新的对应的数据
    -->
    <div id="root">
        <h2> 显示格式化后的工夫 </h2>
        <!-- 计算属性实现 -->
        <h3> 计算属性实现，当初是{{fmtTime}}</h3>
        <!-- methods 办法实现 -->
        <h3> 计算属性实现，当初是{{getFmtTime() }}</h3>
        <!-- 过滤器实现 -->
        <h3> 过滤器实现，当初是{{fmtTime | timeFormat}}</h3>
        <!-- 过滤器实现（传参）-->
        <h3> 过滤器实现，当初是{{fmtTime | timeFormat2("YYYY-MM-DD") | strSlice }}</h3>

    </div>

    <div id="root2">
        <h2> 显示格式化后的工夫 </h2>
        <!-- 过滤器实现（传参）-->
        <h3> 过滤器实现，当初是{{msg | strSlice}}</h3>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false
        // 定义全局过滤器
        Vue.filter('strSlice', function(value) {return value.slice(0, 4)
        })

        new Vue({
            el: "#root",
            data: {time: Date.now()
            },
            computed: {fmtTime() {return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods: {getFmtTime() {return dayjs(this.time).format('YYYY 年 MM 月 DD 日 HH:mm:ss')
                }
            },
            // 部分过滤器
            filters: {timeFormat() {return dayjs(this.time).format('YYYY_MM_DD HH:mm:ss')
                },
                timeFormat2(val) {return dayjs(this.time).format(val)
                },
                // strSlice(value) {//     return value.slice(0, 4)
                // }
            }
        })

        new Vue({
            el: "#root2",
            data: {msg: "hello world"}
        })
    </script>
</body>
</html>

v-text: 更新元素的 textContent
v-html: 更新元素的 innerHTML
v-if: 如果为 true, 以后标签才会输入到页面
v-else: 如果为 false, 以后标签才会输入到页面
v-show: 通过管制 display 款式来管制显示 / 暗藏
v-for: 遍历数组 / 对象
v-on: 绑定事件监听, 个别简写为 @
v-bind: 绑定解析表达式，能够省略 v-bind
v-model: 双向数据绑定
v-cloak: 避免闪现，与 css 配合: [v-cloak]{display:none}

注册全局指令

Vue.directive('my-directive',function(el,binding){el.innerHTML=binding.value.toupperCase()
})

注册部分指令

directives:{
    'my-directive':{bind(el,binding){el.innerHTML = binding.value.toupperCase()
        }
    }
}

应用指令
```
v-my-directive='xxx'
```

初始化显示
- beforeCreate()
- created()
- beforeMount()
- mounted()
更新状态: this.xxx=value
- beforeUpdate()
- updated()
销毁 Vue 实例: vm.$destory()
- beforeDestory()
- destoryed()

<!DOCTYPE html>
<html lang="en">
<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> 剖析生命周期 </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 v-text="n"></h2>
        <h2>n 的值: {{n}}</h2>
        <button @click="addN"> 点我 n + 1</button> <br/>
        <button @click="destroy"> 点我销毁 Vm</button>
    </div>

    <script>
        // 阻止 vue 在启动时生成生产提醒
        Vue.config.productionTip = false

        const vm = new Vue({
            el: "#root",
            data: {n: 1},
            methods: {addN() {this.n++},
                destroy() {console.log("bye...bye...");
                    // 销毁 vm 的形式
                    this.$destroy()}
            },
            watch: {n() {console.log("n 的值产生扭转");
                }
            },
            // 数据监测、数据代理之前，此时无奈通过 vm 拜访到 data 中的数据、methods 中的办法
            beforeCreate() {console.log("beforeCreate...")
                console.log("beforeCreate...", this, this.n) // this.n undefined
                // debugger;
            },
            // 数据监测、数据代理之后，此时能够通过 vm 拜访到 data 中的数据、methods 中的办法
            created() {console.log("created...");
                console.log("created...", this, this.n);
                // debugger;
            },
            // 此时页面出现的是未经 Vue 编译的 DOM 构造，所有对 DOM 的操作，最终都不见效
            beforeMount() {console.log("beforeMount...");
                // debugger; // 模板尚未解析
            },
            // 此时页面中出现的经 Vue 编译的 DOM，对 DOM 的操作均无效（尽可能防止）// 至此初始化过程完结
            // 个别在此进行：开启定时器、发送网络申请、订阅音讯、绑定自定义事件等初始化工作
            mounted() {console.log("mounted...")
                // debugger;
            },
            // 此时数据是新的，但页面是旧的，即页面尚未和数据放弃同步
            beforeUpdate() {console.log("beforeUpdate...")
                // debugger;
            },
            // 此时数据是新的，但页面也是新的，即页面和数据放弃同步
            updated() {console.log("updated...")
                // debugger;
            },
            // 此时 Vm 中的所有 data、methods、指令等等，都处于可用状态，马上要执行销毁过程
            // 个别在此进行：敞开定时器、勾销订阅音讯、解绑自定义事件等
            beforeDestroy() {console.log("beforeDestroy...")
                // debugger;
            },
            // 销毁 vm 实例
            destroyed() {console.log("destroyed...")
            },
        })
    </script>
</body>
</html>

mounted(): 发送 ajax 申请，启动定时器等异步工作
beforeDestory(): 做收尾工作，如：革除定时器

关于vue.js:Vue-核心技术

1.1 Vue 简介

1.1.1 官网

1.1.2 介绍与形容

1.1.3 Vue 的特点

1.1.4 与其它 JS 框架的关联

1.1.5 Vue 周边库

1.2 初识 Vue

1.3 模板语法

1.3.1 模板的了解

1.3.2 插值语法

1.3.3 指令语法

1.3.4 示例代码

1.4 数据绑定

1.4.1 单向数据绑定

1.4.2 双向数据绑定

1.4.3 示例代码

1.5 MVVM 模型

1.6 事件处理

1.6.1 绑定监听

1.6.2 事件修饰符

1.6.3 按键修饰符

1.7 计算属性与监督属性

1.7.1 计算属性 computed

1.7.2 监督属性 watch

1.8 class 与 style 绑定

1.8.1 了解

1.8.2 class 绑定

1.8.3 style 绑定

1.8.4 示例代码

1.9 条件渲染

1.9.1 条件渲染指令

1.9.2 比拟 v-if 与 v-show

1.9.3 示例代码

1.10 列表渲染

1.10.1 列表显示指令

1.10.2 示例代码

1.11 收集表单数据

1.12 过滤器

1.12.1 了解过滤器

1.12.2 示例代码

1.13 内置指令与自定义指令

1.13.1 罕用内置指令

1.13.2 自定义指令

1.14 Vue 实例生命周期

1.14.1 生命周期流程图

1.14.2 vue 生命周期剖析

1.14.3 示例代码

1.14.4 罕用的生命周期办法

Just My Socks（注册教程 内含优惠码）

1.7.1 计算属性 `computed`

1.7.2 监督属性 `watch`

1.8 `class` 与 `style` 绑定

1.8.2 `class` 绑定

1.8.3 `style` 绑定

1.9.2 比拟 `v-if` 与 `v-show`

Just My Socks（注册教程内含优惠码）