• Vue

    尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

    Vue核心

    简介

    官网：https://cn.vuejs.org

    初识

    目录结构

    初始Vue：

    1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
    2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
    3. root容器里的代码被称为 [Vue模板]
    4. Vue实例和容器是一一对应的
    5. 真实开发中只有一个Vue实例，并且会配合着主键一起使用
    6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
    7. 一旦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>初始vue</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例
        new Vue({
            el:"#root",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                name:"尚硅谷"
            }
        })
    </script>
</body>
</html>

    模板语法

    Vue模板语法有2大类：

    1. 插值语法：

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

      写法：{{xxxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

    2. 指令语法

      功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。。。。）

      举例：v-bind:href="xxxx" 或 简写为 :href="xxx"，xxx同样要写 js 表达式，且可以直接读取到 data 中的所有属性

      备注：Vue中有很多的指令，且形式都是： v-xxx，此处是拿 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>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr>
        <h1>指令语法</h1>
        <!-- <a href="https://www.baidu.com">点我去百度首页</a> -->
        <a v-bind:href="url">点我去百度首页</a>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        
        new Vue({
            el:"#root",
            data:{
                name:"jack",
                url:"https://www.baidu.com"
            }
        })
    </script>
</body>
</html>

    数据绑定

    Vue中有2种数据绑定的方式：

    1. 单向绑定（v-bind）：数据只能从data流向页面
    2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data

    备注：

    1. 双向绑定一般都应用在表单类元素上（如：input、select等）
    2. v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值
    <!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>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        单向数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name"><br/>

        <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
        <h2 v-model:x="name">你好啊</h2>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

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

    el和data的两种写法

    1. el有2种写法

      （1）new Vue 时候配置 el 属性

      （2）先创建Vue实例，随后再通过 vm.$mount("#root")执行el的值

    2. data 有2种写法

      （1）对象式

      （2）函数式

      如何选择：目前哪种写法都可以，但是用到组件的时候，data必须使用函数式，否则会报错

    3. 一个重要的原则

      由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是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>el和data的两种写法</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //el的两种写法
        const v = new Vue({
            //el:"#root",  //第一种写法
            data:{
                name="尚硅谷"
            }
        })
        console.log(v)
        v.$mount("#root")   //第二种写法，相对更灵活一点
        
        //data的第二种写法
        new Vue({
            el:"#root",
            //data的第一种写法：对象式
            // data:{
            //     name="尚硅谷"
            // }

            //data的第二种写法：函数式
            //data:function(){
            data(){   //可以简写成这样
                console.log(this)   //此处的this是Vue实例对象
                return{
                    name:"尚硅谷"
                }
            }
        })

    </script>
</body>
</html>

    MVVM模型

    M：模型（Model），对应 data 中的数据

    V：视图（View），模板

    VM：视图模型（ViewModel），Vue实例对象


    数据代理

    回顾Object.defineProperty方法

    <!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>
    <script type="text/javascript">
        let number = 18
        let person = {
            name:"zhangsan",
            sex:"男",
        }

        Object.defineProperties(person, "age", {
            // value:18,
            // enumerable:true,  //控制属性是否可以枚举，默认值是false
            // writable:true,    //控制属性是否可以被修改，默认值是false
            // configurable:true //控制属性是否可以被删除，默认值是false

            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            //get:function mingzi(){  //可以取名字
            //get:function(){         //可以没有名字
            get(){  //可以简写成这样
                console.log("有人读取age属性了")
                return number
            }

            //当有人修改person的age属性时，set函数（setter）就会被调用，且会受到修改的具体值
            set(value){
                console.log("有人修改了age属性，且值是",value)
                number = value
            }
        })
    </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>初始vue</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -->
    <script type="text/javascript">
        let obj = {x:100}
        let obj2 = {y:200}

        Object.defineProperties(obj2,"x",{
            get(){
                return obj.x
            },
            set(value){
                obj.x = value
            }
        })
    </script>
</body>
</html>

    Vue中的数据代理

    1. Vue中的数据代理：

      通过 vm 对象来代理 data 对象中属性的操作（读/写）

    2. Vue 中数据代理的好处：

      更加方便的操作data中的数据

    3. 基本原理

      通过Object.defineProperty()把data对象中所有属性添加到vm上。

      为每一个添加到vm上的属性，都执行一个 getter/setter

      在getter/setter内部去操作（读/写）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>Document</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el:"root",
            data:{
                name:"尚硅谷",
                address:"科技园"
            }
        })
    </script>
</body>
</html>

    事件处理

    事件的基本使用

    1. 使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名；
    2. 事件的回调需要配置在methods对象中，最终会在 vm 上；
    3. methods 中配置的函数，不要用箭头函数！否则this就不是 vm 了；
    4. methods 中配置的函数，都是被 Vue 所管理的函数，this的指向是 vm 或 组件实例对象；
    5. @click="demo" 和 @click="demo($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>Document</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo1">点我提示信息1(不传参)</button>
        <!-- 可以简写 -->
        <button @click="showInfo2($event,66)">点我提示信息2(传参)</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el:"#root",
            data:{
                name:"尚硅谷"
            },

            methods:{
                showInfo1(event){
                    // console.log(event.target.innerText)
                    // console.log(this)   此处的this是vm
                    alert("同学你好")
                },
                showInfo2(event,number){
                    // console.log(event.target.innerText)
                    // console.log(this)   此处的this是vm
                    alert(number)
                }
            }
        })
    </script>
</body>
</html>

    事件修饰符

    1. prevent：阻止默认事件（常用）
    2. stop：阻止事件冒泡（常用）
    3. once：事件只触发一次（常用）
    4. capture：使用事件的捕获模式
    5. self：只有event.target 是当前操作的元素时才触发事件
    6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕
    <!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>Document</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: skyblue;
        }
        .box1{
            padding: 5px;
            background-color: skyblue;
        }
        .box2{
            padding: 5px;
            background-color: orange;
        }
        .list{
             200px;
            height: 200px;
            background-color: orangered;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 阻止默认事件（常用）。不阻止，点完后会跳转到baidu -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>

        <!-- 阻止事件冒泡（常用）。不阻止，点完会冒泡到div的@click操作，要点两次弹窗 -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
        <!-- 事件只触发一次（常用）。按钮只能触发一次，第二次点击无弹窗 -->
        <button @click.once="showInfo">点我提示信息</button>

        <!-- 使用事件的捕获模式。捕获之后冒泡。不加打印顺序时2.1，加了是1.2-->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- 只有event.target是当前操作的元素时才触发事件。冒泡到div的时候，event.target还是button，不是div，所以不弹第二次-->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>

        <!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <!-- 滚动条的滚动 -->
        <!-- <ul @scroll="demo" class="list">  -->
        <!-- 鼠标的滚轮的滚动。不加，触发滚轮，先执行完demo函数里的for循环，然后再滚动 -->
        <ul @wheel.passive="demo" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>



    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el:"#root",
            data:{
                name:"尚硅谷"
            },

            methods:{
                showInfo(event){
                    alert("同学你好")
                },
                showMsg(msg){
                    console.log(msg)
                },
                demo(){
                    for (let i = 0; i < 100000; i++) {
                        console.log("#")  
                    }
                    console.log("累坏了")  
                },
            }
        })
    </script>
</body>
</html>

    键盘事件

    1. Vue中常用的按键别名：

      回车 => enter

      删除 => delete（捕获 “删除” 和 “退格” 键）

      退出 => esc

      空格 => space

      换行 => tab（特殊，必须配合 keydown 去使用）

      上 => up

      下 => down

      左 => left

      右 => right

    2. Vue 未提供别名的按键，可以使用按键原始的key值取绑定，但注意要转为 kebab-case（短横线命名），比如 CapsLock 写做 caps-lock

    3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta

      （1）配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

      （2）配合 keydown 使用：正常触发事件

    4. 也可以使用keyCode去指定具体的按键（不推荐），比如 @keyup.enter 写成 @keyup.13

    5. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

    <!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>Document</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 
        keyup：按下去弹回来触发
        keydown：按下去就触发 -->
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
        <!-- 使用别名按键 -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo">     -->
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

        const vm = new Vue({
            el:"#root",
            data:{
                name:"尚硅谷"
            },
            methods:{
                showInfo(e){
                    // keyCode 13 表示 ascii码中的回车。这里需要回车才触发log
                    // if (e.keyCode !== 13) return
                    // Vue 中 @keyup.enter 替代这个判断
                    console.log(e.target.value)
                }
            }
        })
    </script>
</body>
</html>

    联合使用

        <!-- 阻止事件冒泡（常用）。不阻止，点完会冒泡到div的@click操作，要点两次弹窗 -->
    <div class="demo1" @click="showInfo">
        <button @click.stop.prevent="showInfo">点我提示信息</button>
    </div>

    <!-- 同时按ctrl+y才触发 -->
    <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">

    计算属性

    插值语法实现姓名案例

    <!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>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br><br>
        名：<input type="text" v-model="lastName"> <br><br>
        全名：<span>{{firstName}}-{{lastName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例
        
        new Vue({
            el:"#root",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName:"张",
                lastName:"三",
            }
        })
    </script>
</body>
</html>

    methods 实现

    <!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>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br><br>
        名：<input type="text" v-model="lastName"> <br><br>
        全名：<span>{{fullname()}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例
        
        new Vue({
            el:"#root",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data:{//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName:"张",
                lastName:"三",
            },
            methods: {
                fullname(){
                    return this.firstName + "-" + this.lastName
                }
            },
        })
    </script>
</body>
</html>

    计算属性实现

    1. 定义：要用的属性不存在，要通过已有属性计算得来

    2. 原理：底层借助了Object.defineproperty方法提供得getter和setter

    3. get函数什么时候执行？

      （1）初次读取时会执行一次

      （2）当依赖的数据发生改变时会被再次调用

    4. 优势：与 methods 实现相比，内部有缓存机制（复用），效用更高，调试方便

    5. 备注：

      1. 计算属性最终会出现在 vm 上，直接读取使用即可
      2. 如果计算属性要被修改，那必须要set函数去响应修改，且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</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br><br>
        名：<input type="text" v-model="lastName"> <br><br>
        全名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例

        new Vue({
            el: "#root",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data: {//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName: "张",
                lastName: "三",
            },
            computed: {
                fullName: {
                    // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    // get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时
                    get() {
                        console.log("get被调用了")
                        return this.firstName + "-" + this.lastName
                    },
                    //set什么时候被调用？当fullName被修改时
                    set(value) {
                        console.log("set", value)
                        const arr = value.split("-")
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
    </script>
</body>

</html>

    计算属性的简写（不需要set只需要get的时候才能简写）

                computed: {
                fullName(){
					console.log("get被调用了")
					return this.firstName + "-" + this.lastName
                }

    监视属性

    天气案例

    <!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>Document</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天的天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el:"#root",
            data:{
                isHot:true

            },
            computed:{
                info(){
                    return this.isHot ? "炎热" : "凉爽"
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
        })

    </script>
</body>
</html>

    天气案例-监视属性

    监视属性watch：

    1. 当被监视的属性变化时，回调函数自动调用，进行相关操作

    2. 监视的属性必须存在，才能进行监视

    3. 监视的两种写法：

      （1）new Vue时传入watch配置

      （2）通过vm.$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>Document</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天的天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el:"#root",
            data:{
                isHot:true

            },
            computed:{
                info(){
                    return this.isHot ? "炎热" : "凉爽"
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            watch:{
                isHot:{
                    immediate:true,   //初始化时让handler调用一下
                    //handler什么时候调用？当isHot发生改变时
                    handler(newValue, oldValue){
                        console.log("isHot被修改了",newValue,oldValue)
                    }
                },
                // 计算属性也能被监测
                info:{
                    handler(newValue, oldValue){
                        console.log("info被修改了",newValue,oldValue)
                    },
                }
                
            },
            
        })
        // 第二种写法
        vm.$watch("isHot",{
            immediate:true,   //初始化时让handler调用一下
            //handler什么时候调用？当isHot发生改变时
            handler(newValue, oldValue){
                console.log("isHot被修改了",newValue,oldValue)
            }
        })
    </script>
</body>
</html>

    深度监测

    深度监测：

    1. Vue中的watch默认不监测对象内部值得改变（一层）
    2. 配置deep:true可以监测对象内部值改变（多层）

    备注：

    1. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
    2. 使用 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>Document</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天的天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <h3>a的值是:{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <h3>b的值是:{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el:"#root",
            data:{
                isHot:true,
                numbers:{
                    a:1,
                    b:2
                }

            },
            computed:{
                info(){
                    return this.isHot ? "炎热" : "凉爽"
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            watch:{
                isHot:{
                    handler(newValue, oldValue){
                        console.log("isHot被修改了",newValue,oldValue)
                    }
                },
                // 监视多级结构中某个属性的变化
                "numbers.a":{
                    handler(){
                        console.log("a被改变了")
                    }
                },
                "numbers.b":{
                    handler(){
                        console.log("b被改变了")
                    }
                },

                // 监视多级结构中所有属性的变化
                numbers:{
                    deep:true,
                    handler(){
                        console.log("numbers改变了")
                    }
                }

            }
            
        })
    </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>Document</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天的天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        const vm = new Vue({
            el:"#root",
            data:{
                isHot:true,
            },
            computed:{
                info(){
                    return this.isHot ? "炎热" : "凉爽"
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            watch:{
                // 正常写法
                // isHot:{
                //     handler(newValue, oldValue){
                //         console.log("isHot被修改了",newValue,oldValue)
                //     }
                // },

                //简写，不需要deep和immmediate
                isHot(newValue,oldValue){
                    console.log("isHot被改变",newValue,oldValue)

                }

            }
            
        })
        //正常的写法
        // vm.$watch("isHot",{
        //     immediate:true,   //初始化时让handler调用一下
        //     //handler什么时候调用？当isHot发生改变时
        //     handler(newValue, oldValue){
        //         console.log("isHot被修改了",newValue,oldValue)
        //     }
        // })

        vm.$watch("isHot",function(newValue,oldValue){
            console.log("isHot被修改了",newValue,oldValue) 
        })
    </script>

</body>
</html>

    姓名案例-watch实现

    computed 和 watch 之间的区别：

    1. computed 能完成的功能，watch 都可以完成
    2. watch 能完成的功能，computed 不一定能完成，例如：watch 可以进行异步操作

    两个重要的小原则

    1. 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是 vm 或 组件实例对象
    2. 所有不被 Vue 所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是 vm 或 组件实例对象
    <!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>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br><br>
        名：<input type="text" v-model="lastName"> <br><br>
        全名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

        //创建Vue实例

        new Vue({
            el: "#root",  //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            data: {//data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象
                firstName: "张",
                lastName: "三",
                fullName:"张-三"
            },
            watch:{
                firstName(newValue){
                    this.fullName = newValue + "-" + this.lastName
                },
                lastName(newValue){
                    this.fullName = this.firstName + "-" + newValue
                },
            }
        })
    </script>
</body>

</html>

    绑定样式

    绑定样式：

    1. class样式

    写法:class="xxx" xxx可以是字符串、对象、数组。

    字符串写法适用于：类名不确定，要动态获取。

    对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

    数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

    1. style样式

    :style="{fontSize: xxx}"其中xxx是动态值。

    :style="[a,b]"其中a、b是样式对象。

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<style>
			.basic{
				 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;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

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

			<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				styleArr:[
					{
						fontSize: '40px',
						color:'blue',
					},
					{
						backgroundColor:'gray'
					}
				]
			},
			methods: {
				changeMood(){
					const arr = ['happy','sad','normal']
					const index = Math.floor(Math.random()*3)
					this.mood = arr[index]
				}
			},
		})
	</script>
	
</html>

    条件渲染

    v-if
    写法：

    1. v-if="表达式"

    2. v-else-if="表达式"

    3. v-else="表达式"

    适用于：切换频率较低的场景。

    特点：不展示的DOM元素直接被移除。

    注意：v-if可以和 v-else-if、v-else一起使用，但要求结构不能被打断。

    v-show
    写法：v-show="表达式"

    适用于：切换频率较高的场景。

    特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

    备注

    使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>条件渲染</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- 使用v-show做条件渲染 -->
			<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- 使用v-if做条件渲染 -->
			<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- v-else和v-else-if -->
			<!-- <div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div> -->

			<!-- v-if与template的配合使用 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>尚硅谷</h2>
				<h2>北京</h2>
			</template>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:0
			}
		})
	</script>
</html>

    列表渲染

    基本列表

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" 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>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
				</li>
			</ul>

			<!-- 遍历对象 -->
			<h2>汽车信息（遍历对象）</h2>
			<ul>
				<li v-for="(value,k) of car" :key="k">
					{{k}}-{{value}}
				</li>
			</ul>

			<!-- 遍历字符串 -->
			<h2>测试遍历字符串（用得少）</h2>
			<ul>
				<li v-for="(char,index) of str" :key="index">
					{{char}}-{{index}}
				</li>
			</ul>
			
			<!-- 遍历指定次数 -->
			<h2>测试遍历指定次数（用得少）</h2>
			<ul>
				<li v-for="(number,index) of 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
</html>

    key 的原理

    面试题：react、vue中的key有什么作用？（key的内部原理）

    虚拟DOM中key的作用

    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

    对比规则

    1. 旧虚拟DOM中找到了与新虚拟DOM相同的key：

      (1) 若虚拟DOM中内容没变, 直接使用之前的真实DOM！

      (2) 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

    2. 旧虚拟DOM中未找到与新虚拟DOM相同的key

      ​ 创建新的真实DOM，随后渲染到到页面。

    用index作为key可能会引发的问题

    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

    ​ 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

    1. 如果结构中还包含输入类的DOM：

    ​ 会产生错误DOM更新 ==> 界面有问题。

    开发中如何选择key?

    1. 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

    2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>key的原理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<button @click.once="add">添加一个老刘</button>
			<ul>
				<li v-for="(p,index) of persons" :key="index">
					{{p.name}}-{{p.age}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				},
			})
		</script>
</html>

    列表过滤

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表过滤</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region 
			/* new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,   //上来自动调用一次，相当于 val 传入"",不加一开始显示空数据
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) */
			//#endregion
			
			//用computed实现
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>
</html>

    列表排序

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表排序</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<button @click="sortType = 2">年龄升序</button>
			<button @click="sortType = 1">年龄降序</button>
			<button @click="sortType = 0">原顺序</button>
			<ul>
				<li v-for="(p,index) of filPerons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, //0原顺序 1降序 2升序
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						const arr = this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
						//判断一下是否需要排序
						if(this.sortType){
							arr.sort((p1,p2)=>{
								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
							})
						}
						return arr
					}
				}
			}) 

		</script>
</html>

    Vue.set的使用

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" 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="addSex">添加一个性别属性，默认值是男</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="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				school:{
					name:'尚硅谷',
					address:'北京',
				},
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>
</html>

    Vue监测数据改变的原理_数组

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理_数组</title>
		<!-- 引入Vue -->
		<script type="text/javascript" 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="addSex">添加一个性别属性，默认值是男</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>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = 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: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				}
			}
		})
	</script>
</html>

    总结数据监视

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>总结数据监视</title>
		<style>
			button{
				margin-top: 10px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" 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="student.age++">年龄+1岁</button> <br/>
			<button @click="addSex">添加性别属性，默认值：男</button> <br/>
			<button @click="student.sex = '未知' ">修改性别</button> <br/>
			<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
			<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
			<button @click="addHobby">添加一个爱好</button> <br/>
			<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
			<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
			<h3>姓名：{{student.name}}</h3>
			<h3>年龄：{{student.age}}</h3>
			<h3 v-if="student.sex">性别：{{student.sex}}</h3>
			<h3>爱好：</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>朋友们：</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				student:{
					name:'tom',
					age:18,
					hobby:['抽烟','喝酒','烫头'],
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student,'sex','男')
					this.$set(this.student,'sex','男')
				},
				addFriend(){
					this.student.friends.unshift({name:'jack',age:70})
				},
				updateFirstFriendName(){
					this.student.friends[0].name = '张三'
				},
				addHobby(){
					this.student.hobby.push('学习')
				},
				updateHobby(){
					// this.student.hobby.splice(0,1,'开车')
					// Vue.set(this.student.hobby,0,'开车')
					this.$set(this.student.hobby,0,'开车')
				},
				removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
						return h !== '抽烟'
					})
				}
			}
		})
	</script>
</html>

    收集表单数据

    若：<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：输入首尾空格过滤

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器-->
		<div id="root">
			<form @submit.prevent="demo">
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好：
				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><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.atguigu.com">《用户协议》</a>
				<button>提交</button>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

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

    过滤器(vue3不用了)

    定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

    语法：

    ​ 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

    ​ 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

    备注：

    ​ 1.过滤器也可以接收额外参数、多个过滤器也可以串联

    ​ 2.并没有改变原本的数据, 是产生新的对应的数据

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>

		<!-- 准备好一个容器-->
		<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">尚硅谷</h3>
		</div>

		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, //时间戳
				msg:'你好，尚硅谷'
			},
			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:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,atguigu!'
			}
		})
	</script>
</html>

    内置指令

    已经学过的指令：

    ​ v-bind : 单向绑定解析表达式, 可简写为 :xxx

    ​ v-model: 双向数据绑定

    ​ v-for : 遍历数组/对象/字符串

    ​ v-on: 绑定事件监听, 可简写为@

    ​ v-if: 条件渲染（动态控制节点是否存存在）

    ​ v-else: 条件渲染（动态控制节点是否存存在）

    ​ v-show: 条件渲染 (动态控制节点是否展示)

    v-text指令

    作用：向其所在的节点中渲染文本内容。

    与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-text="name"></div>
			<div v-text="str"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				str:'<h3>你好啊！</h3>'
			}
		})
	</script>
</html>
  • 相关阅读:
    服务器开启超线程
    redhat用kickstart.cfg自动安装后,挂载ISO镜像并从中拷贝文件
    关于网卡特性TSO、UFO、GSO、LRO、GRO
    Linux 网卡特性配置ethtool详解
    SecureCRT设置标签显示标题
    关闭SecureCRT的声音
    SecureCRT设置Vim显示颜色
    centos关闭swap分区
    制作CentOS7.6 自动安装ISO镜像光盘
    带阵列卡的机器打开磁盘cache
  • 原文地址：https://www.cnblogs.com/dongye95/p/16218741.html
Copyright © 2020-2023  润新知