Vue 学习

1
2
3
4
5
6
7
8
# 运行单独的Vue页面
$ npm install -g @vue/cli-service-global
$ vue serve

# 1. 下载安装 Node.js 
# 2. npm 换源
# 3. npm安装Vue
# 4. 运行

Vue简介

  1. Vue是什么？

    一套用于构建用户界面的渐进式JavaScript框架

    渐进式：Vue可以自底向上逐层的应用

    简单应用：只需一个轻量小巧的核心库 (100+ kb)

    复杂应用：可以引入各式各样的 Vue 插件


  1. 谁开发的？

    • 尤雨溪

  1. Vue的特点

    • 采用组件化模式，提高代码复用率，且让代码更好维护
    • 声明式编码，让编码人员无需直接操作DOM，提高开发效率
    • 使用虚拟DOM + 优秀的DIff算法，尽量复用DOM节点

  1. 学习Vue之前要掌握的JavaScript基础知识

    • ES6语法规范
    • ES6模块化
    • 包管理 （npm等）
    • 原型、原型链
    • 数组常用方法
    • axios
    • promise
    • ……

Vue官网使用指南

https://cn.vuejs.org/

https://www.bilibili.com/video/BV1Zy4y1K7SH/?p=3

Vue 环境搭建

  1. 直接用 <script> 引入

    • 开发版本: 包含完整的警告和调试模式。=> vue.js
    • 生产版本: 删除了警告，压缩。 => vue.min.js

  2. npm + Vue-cli


开始 Hello World 案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初识Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" 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="demo">
            <h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
        </div>

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

            //创建Vue实例
            new Vue({
                el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
                data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
                    name:'xld',
                    address:'广东'
                }
            })

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

模板语法

Vue模板语法有2大类

  1. 插值语法

     功能：用于解析标签体内容。
 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

  2. 指令语法

     功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
 举例：v-bind:href="xxx" 或  简写为 :href="xxx"，xxx同样要写js表达式，
             且可以直接读取到data中的所有属性。
 备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

数据绑定

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

  1. 单向绑定(v-bind)

     数据只能从data流向页面。

  2. 双向绑定(v-model)

    数据不仅能从data流向页面，还可以从页面流向data。

    备注：

    1. 双向绑定一般都应用在表单类元素上（如：input、select等）
    2. v-model:value 可以简写为 v-model，因为 v-model 默认收集的就是value值。
    3. v-model 只能应用在表单类元素（输入类元素）上
1
2
单向数据绑定：<input type="text" :value="name"><br/>
双向数据绑定：<input type="text" v-model="name"><br/>

el与data的两种写法

el的2种写法

  1. new Vue时候配置el属性。

    1
    2
    3
    4
    5
    6
    const v = new Vue({
        el:'#root', // 第一种写法
        data:{
            name:'细粒丁'
        }
    })

  2. 先创建Vue实例，随后再通过 vm.$mount('#root') 指定el的值。

    1
    2
    3
    4
    5
    6
    const v = new Vue({
        data:{
            name:'细粒丁'
        }
    })
    v.$mount('#root') // 第二种写法

data的2种写法

  1. 对象式

    1
    2
    3
    4
    5
    6
    7
    new Vue({
        el:'#root',
        //data的第一种写法：对象式
        data:{
            name:'细粒丁'
        }
    })

  2. 函数式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    new Vue({
        el:'#root',
        data(){
            console.log('@@@',this) //此处的this是Vue实例对象
            return{
                name:'细粒丁'
            }
        }
    })

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

一个重要的原则

  • 由Vue管理的函数，一定 不要 写 箭头函数，一旦写了箭头函数，this 就不再是Vue实例了。

理解MVVM

MVVM模型
    1. M：模型(Model) ：data中的数据
    2. V：视图(View) ：模板代码
    3. VM：视图模型(ViewModel)：Vue实例

观察发现：
    1.data中所有的属性，最后都出现在了vm身上。
    2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

Object.defineProperty

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let number = 18
let person = {
    name:'张三',
    sex:'男',
}

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

    //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    get(){
        console.log('有人读取age属性了')
        return number
    },

    //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
    set(value){
        console.log('有人修改了age属性，且值是',value)
        number = value
    }

})

// console.log(Object.keys(person)) // age不可枚举时,则获取不到age
// persion.age = 20                 // age不可修改时,则修改失败
// delete person.age                // age不可删除时,则删除失败

console.log(person)

数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

1
2
3
4
5
6
7
8
9
10
11
let obj = {x:100}
let obj2 = {y:200}

Object.defineProperty(obj2,'x',{
    get(){
        return obj.x
    },
    set(value){
        obj.x = value
    }
})

Vue 中的数据代理

  1. Vue中的数据代理：

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

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

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

  3. 基本原理：

    1. 通过 Object.defineProperty() 把 data 对象中所有属性添加到vm上
    2. 为每一个添加到vm上的属性，都指定一个getter/setter
    3. 在 getter/setter 内部去操作（读/写）data 中对应的属性

事件处理

事件的基本使用：

  1. 使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
  2. 事件的回调需要配置在methods对象中，最终会在vm上；
  3. methods中配置的函数，不要 用 箭头函数！否则this就不是vm了；
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
  5. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<button @click="showInfo1">点我提示信息1（不传参）</button>
<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        methods:{
            showInfo1(event){
                console.log(event)
                alert(event.target.innerText, this) // 此处的this是vm
            },
            showInfo2(event,number){
                console.log(event,number)           // number:66
                alert(event.target.innerText, this) // 此处的this是vm
            }
        }
    })
</script>

事件修饰符

Vue中的事件修饰符：

  1. prevent：阻止默认事件 (常用) - 如<a>标签的跳转
  2. stop：阻止事件冒泡 (常用) - 子元素不触发父元素事件
  3. once：事件只触发一次 (常用)
  4. capture：使用事件的捕获模式 - 父元素不触发子元素事件
    注：捕获是从父传到子，冒泡是从子传到父，先捕获 后冒泡
  5. self：只有event.target是当前操作的元素时才触发事件；
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- 阻止默认事件（常用, 执行完 showInfo 后不跳转 -->
<a href="https://tenyding.cn" @click.prevent="showInfo">点我提示信息</a>

<!-- 阻止事件冒泡（常用）, 点 button 不会触发 demo1 中的 showInfo -->
<div class="demo1" @click="showInfo">
    <button @click.stop="showInfo">点我提示信息</button>
    <!-- 修饰符可以连续写 -->
    <!-- <a href="https://tenyding.cn" @click.prevent.stop="showInfo">点我提示信息</a> -->
</div>

<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>

<!-- 使用事件的捕获模式, 点击div2，会先触发div1里的事件 -->
<div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2" @click="showMsg(2)">
        div2
    </div>
</div>

<!-- 只有event.target是当前操作的元素时才触发事件； -->
<!-- 点击button时，不会触发div的 showInfo 事件 -->
<div class="demo1" @click.self="showInfo">
    <button @click="showInfo">点我提示信息</button>
</div>

<!-- 滚动条滚动后，滚动条往下滚动后，才会处理demo事件
        <ul @scroll="demo" class="list"> -->
<!-- 滚轮滚动后，会处理完demo事件后，滚动条才会往下滚动
        <ul @wheel="demo" class="list"> -->

<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
<ul @wheel.passive="demo" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

键盘事件

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

    回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

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

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

    (1). 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2). 配合keydown使用：正常触发事件。

  4. 也可以使用keyCode去指定具体的按键（不推荐）

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<input type="text" placeholder="按下ctrl+y触发showInfo" @keyup.ctrl.y="showInfo">
<input type="text" placeholder="按下CapsLock(大小写切换)触发showInfo" @keyup.caps-lock="showInfo">
<input type="text" placeholder="按下回车触发showInfo" @keyup.13="showInfo">
<input type="text" placeholder="按下回车触发showInfo" @keyup.enter="showInfo">
<input type="text" placeholder="按下回车触发showInfo" @keydown.huiche="showInfo">

<script type="text/javascript">
    Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

    new Vue({
        el:'#root',
        methods: {
            showInfo(e){
                // console.log(e.key,e.keyCode)
                console.log(e.target.value)
            }
        },
    })
</script>

计算属性

  1. 定义：要用的属性不存在，要通过已有属性计算得来
  2. 原理：底层借助了Objcet.defineproperty方法提供的 getter 和 setter
  3. get函数什么时候执行？
    • 初次读取时会执行一次。
    • 当依赖的数据发生改变时会被再次调用。
  4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
  5. 备注：
    • 计算属性最终会出现在vm上，直接读取使用即可。
    • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

姓名案例 - 拼接姓名

  1. 第一种写法 前端插值语法 实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <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>
    </body>

    <script type="text/javascript">
        new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三'
            }
        })
    </script>

  2. 第二种写法 methods 函数返回值 实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <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">
        new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三'
            },
            methods: {
                fullName(){
                    return this.firstName + '-' + this.lastName
                }
            },
        })
    </script>

  3. 第三种写法 computed 计算属性 实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <div id="root">
        姓：<input type="text" v-model="firstName"> <br/><br/>
        名：<input type="text" v-model="lastName"> <br/><br/>
        全名：<span>{{fullName}}</span> <br/><br/>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'张',
                lastName:'三'
            },
            computed:{
                fullName:{
                    //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
                    get(){
                        console.log('get被调用了')
                        // console.log(this) //此处的this是vm
                        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>

计算属性简写

1
2
3
4
5
6
7
computed:{
    //简写
    fullName(){
        console.log('get被调用了')
        return this.firstName + '-' + this.lastName
    }
}

监视属性

监视属性watch：

  1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
  2. 监视的属性必须存在，才能进行监视
  3. 监视的两种写法：
    1. new Vue时传入watch配置
    2. 通过vm.$watch监视

天气案例

点击按钮，切换状态，从而显示不同内容

  1. 普通方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- <button @click="isHot = !isHot">切换天气</button> -->
        <button @click="changeWeather">切换天气</button>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true,
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
        })
    </script>

  2. 监视方法，利用 watch 实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data:{
                isHot:true,
            },
            computed:{
                info(){
                    return this.isHot ? '炎热' : '凉爽'
                }
            },
            methods: {
                changeWeather(){
                    this.isHot = !this.isHot
                }
            },
            // watch 的第一种写法
            /* watch:{
                isHot:{
                    immediate:true, //初始化时让handler调用一下
                    //handler什么时候调用？当isHot发生改变时。
                    handler(newValue,oldValue){
                        console.log('isHot被修改了',newValue,oldValue)
                    }
                }
            } */
        })

        // watch 的第二种写法
        vm.$watch('isHot',{
            immediate:true, //初始化时让handler调用一下
            handler(newValue,oldValue){
                console.log('isHot被修改了',newValue,oldValue)
            }
        })
    </script>

深度监视

深度监视：

  1. Vue中的watch默认不监测对象内部值的改变（一层）。
  2. 配置 deep:true 可以监测对象内部值改变（多层）。
  3. 备注：
    1. Vue自身可以监测对象内部值的改变(setter监测到了)，但Vue提供的watch默认不可以！
    2. 使用watch时根据数据的具体结构，决定是否采用深度监视。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<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>

        <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
        {{numbers.c.d.e}}
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:1,
                c:{
                    d:{
                        e:100
                    }
                }
            }
        },
        computed:{
            info(){
                return this.isHot ? '炎热' : '凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            isHot:{
                // immediate:true, //初始化时让handler调用一下
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue)
                }
            },
            // 监视多级结构中某个属性的变化
            /* 'numbers.a':{
                handler(){
                    console.log('a被改变了')
                }
            } */

            // 监视多级结构中所有属性的变化
            numbers:{
                deep:true,  // 若为false，则只监视numbers的地址值是否变化，里面的内容不监视
                handler(){
                    console.log('numbers改变了')
                }
            }
        }
    })
</script>

监视的简写形式

简写模式下，默认:

immediate 为 false

deep 为 false

1
2
3
4
5
6
7
8
9
10
11
// 向 Vue 传入 watch 配置对象写法
watch:{
    isHot(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue,this)
    }
}

// 通过vm.$watch监视
vm.$watch('isHot',(newValue,oldValue)=>{
    console.log('isHot被修改了',newValue,oldValue,this)
})

watch对比computed

computed 和 watch 之间的区别：

  1. computed 能完成的功能，watch 都可以完成。

  2. watch 能完成的功能，computed 不一定能完成，例如：watch可以进行异步操作。
    解释：因为 computed 依靠 return 返回值，而 return 不能延时/异步

  3. 两个重要的小原则：

    1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
    2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），
      最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- 姓名案例_watch实现 -->
<div id="root">
    姓：<input type="text" v-model="firstName"> <br/><br/>
    名：<input type="text" v-model="lastName"> <br/><br/>
    全名：<span>{{fullName}}</span> <br/><br/>
</div>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            fullName:'张-三'
        },
        watch:{
            firstName(val){
                // 实现异步
                setTimeout(()=>{
                    console.log(this)
                    this.fullName = val + '-' + this.lastName
                },1000);
            },
            lastName(val){
                this.fullName = this.firstName + '-' + val
            }
        }
    })
</script>

绑定样式

  1. class 样式

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

    • 字符串写法适用于：类名不确定，要动态获取。
    • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
    • 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

  2. style 样式

    :style="{fontSize: xxx}" 其中xxx是动态值。
    :style="[a,b]" 其中a、b是样式对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<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;
    }

    .xld1{
        background-color: yellowgreen;
    }
    .xld2{
        font-size: 30px;
        text-shadow:2px 2px 10px red;
    }
    .xld3{
        border-radius: 20px;
    }
</style>

<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>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'细粒丁',
            mood:'normal',
            classArr:['xld1','xld2','xld3'],
            classObj:{
                xld1:false,     // true:生效，false:不生效
                xld2: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>

条件渲染

  1. v-if

    写法：

    • v-if="表达式"

    • v-else-if="表达式"

    • v-else="表达式"

      适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

  2. v-show

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

    适用于：切换频率较高的场景。  
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

  3. 备注：
    使用 v-if 的时，元素可能无法获取到，而使用 v-show 一定可以获取到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'细粒丁',
            n:0
        }
    })
</script>

列表渲染

key作用与原理

列表过滤

列表排序

更新时的一个问题

Vue监测数据的原理_对象

Vue.set()方法

Vue监测数据的原理_数组

总结Vue监视数据

收集表单数据

过滤器

v-text指令

v-html指令

v-cloak指令

v-once指令

v-pre指令

自定义指令_函数式

自定义指令_对象式

自定义指令总结

生命周期

组件



Vuex

  1. 安装VueX
    • Vue2中，要使用Vuex的3版本
      • $ npm i vuex@3
    • Vue3中，要使用Vuex的4版本
      • $ npm i vuex
1
$ npm i vuex