vue基础知识和原理（二）

🎗 接上篇

vue基础知识和原理（一）

---

1.8 计算属性

• 定义：要用的属性不存在，要通过已有属性计算得来
• 原理：底层借助了Objcet.defineProperty方法提供的getter和setter

get函数什么时候执行？

(1).初次读取时会执行一次

(2).当依赖的数据发生改变时会被再次调用

注：

• 计算属性最终会出现在vm上，直接读取使用即可
• 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

计算属性完整版写法


<div id="root">
    姓：<input type="text" v-model="firstName">
    名：<input type="text" v-model="lastName"> 
    全名：<span>{{fullName}}span>
div>
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        }
        computed:{
            fullName:{
                //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
                get(){
                    console.log('get被调用了')
                    return this.firstName + '-' + this.lastName
                },
                //set什么时候调用? 当fullName被修改时。
                // 可以主动在控制台修改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
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

1.9 键盘事件

键盘事件语法糖：@keydown，@keyup

Vue中常用的按键别名：

• 回车 => enter
• 删除 => delete
• 退出 => esc
• 空格 => space
• 换行 => tab (特殊，必须配合keydown去使用)

1.10 监视属性

监视属性watch：

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

<div id="root">
    <h2>今天天气很{{ info }}h2>
    <button @click="changeWeather">切换天气button>
div>


<script>
	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)
                }
            }
        } 
    })
script>
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

深度监视：

(1).Vue中的watch默认不监测对象内部值的改变（一层）

(2).配置deep:true可以监测对象内部值改变（多层）

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

(2).使用watch时根据数据的具体结构，决定是否采用深度监视

<div id="root">
    {{numbers.c.d.e}}
div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
    const vm = new Vue({
        el:'#root',
        data:{
            numbers:{
                c:{
                    d:{
                        e:100
                    }
                }
            }
        },
        watch:{
            //监视多级结构中某个属性的变化
            /* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
            //监视多级结构中所有属性的变化
            numbers:{
                deep:true,
                handler(){
                    console.log('numbers改变了')
                }
            }
        }
    });
script>
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

computed和watch之间的区别：

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

两个重要的小原则：

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象

2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象

1.11 绑定样式

class样式

写法：:class=“xxx” xxx可以是字符串、对象、数。

所以分为三种写法，字符串写法，数组写法，对象写法

字符串写法

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

<style>
	.normal{
        background-color: skyblue;
    }
style>


<div id="root">
    
    <div class="basic" :class="mood" @click="changeMood">{{name}}div>
div>

<script>
	const vm = new Vue({
        el:'#root',
        data:{
            mood:'normal'
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

数组写法

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

<style>
    .atguigu1{
        background-color: yellowgreen;
    }
    .atguigu2{
        font-size: 30px;
        text-shadow:2px 2px 10px red;
    }
    .atguigu3{
        border-radius: 20px;
    }
style>


<div id="root">
    
	<div class="basic" :class="classArr">{{name}}div>
div>

<script>
	const vm = new Vue({
        el:'#root',
        data:{
            classArr: ['atguigu1','atguigu2','atguigu3']
        }
    })
script>
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

对象写法

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

<style>
    .atguigu1{
        background-color: yellowgreen;
    }
    .atguigu2{
        font-size: 30px;
        text-shadow:2px 2px 10px red;
    }
style>


<div id="root">
    
	<div class="basic" :class="classObj">{{name}}div>
div>

<script>
	const vm = new Vue({
        el:'#root',
        data:{
            classObj:{
                atguigu1:false,
                atguigu2:false,
			}
        }
    })
script>
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

style样式

有两种写法，对象写法，数组写法

对象写法

<div id="root">
    
	<div class="basic" :style="styleObj">{{name}}div>
div>
<script>
	const vm = new Vue({
        el:'#root',
        data:{
            styleObj:{
                fontSize: '40px',
                color:'red',
			}
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

数组写法

<script>
	const vm = new Vue({
        el:'#root',
        data:{
            styleArr:[
                {fontSize: '40px',
                    color:'blue',
                },{
                    backgroundColor:'gray'
                }
            ]
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.12 条件渲染

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元素未被移除，仅仅是使用样式隐藏掉(display:none)

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

v-if 是实打实地改变dom元素，v-show 是隐藏或显示dom元素

<div id="root">
    
    <h2 v-show="false">欢迎来到{{name}}h2>
    <h2 v-show="1 === 1">欢迎来到{{name}}h2>
div>
1
2
3
4
5
6

1.13 列表渲染

v-for指令

• 用于展示列表数据
• 语法：v-for=“(item, index) in xxx” :key=“yyy”
• 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<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>
	const vm = 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>
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

1.14 vue 监测data 中的 数据

代码

<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:'金华',
            student:{
                name:'tom',
                age:{
                    rAge:40,
                    sAge:29,
                },
                friends:[
                    {name:'jerry',age:35}
                ]
            }
        }
    })
script>
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

Vue.set 的使用

Vue.set(target，propertyName/index，value) 或

vm.$set(target，propertyName/index，value)

用法：

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 vm.myObject.newProperty = 'hi')

//代码


<div id="root">
    <h1>学生信息h1>
    <button @click="addSex">添加性别属性，默认值：男button> <br/>
div>

<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','男')
            }
        }
    })
script>
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

所以我们通过 vm._data.student.hobby[0] = ‘aaa’ // 不奏效

vue 监测在数组那没有 getter 和 setter，所以监测不到数据的更改，也不会引起页面的更新

vue对数组的监测是通过 包装数组上常用的用于修改数组的方法来实现的。

1.15 收集表单数据

(1) 若：，则v-model收集的是value值，用户输入的就是value值。

(2) 若：，则v-model收集的是value值，且要给标签配置value值。

(3) 若：

• 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
• 配置input的value属性:
  • v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  • v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤