Vue2_3-优快云博客

Vue2_3

1、监视属性

1.watch

<div id="root">
	<h1>今天天气很{{weather}}</h1>
    <!--作用:点击按钮切换天气('炎热','凉爽')
	并在每当切换天气时 在控制台输出“xxx切换成了yyy”-->
	<button @click = "qh">切换天气</button>
</div>
<script>
    let vm = new Vue({
        el: '#root',
        data: {
            // 炎热吗?
			isHot: true,
        },
        computed: {
            weather: function () {
                // 判断天气
                return this.isHot ? '炎热' : '凉爽';
			}
		},
        methods: {
            qh() {
                // 切换天气
				this.isHot = !this.isHot;
			}
		},
		watch: {	
				weather: {	// 监视 weather 属性
                    immediate:true,	// 初始化的时候就调用一次
                    // handler 只会在变化时调用
                    handler(newValue, oldValue) {           
                        console.log(`天气原来是${oldValue},现在变成了${newValue}` );
                    }
			}
		}
    });

2.handler

被监视的属性变化时，这个函数就会调用

watch: {	
    weather: {	// 监视 weather 属性
        handler(newValue, oldValue) {           
            console.log(`天气原来是${oldValue},现在变成了${newValue}` );
        }
    }
}

两个参数：(a1,a2)

a1：是变化后的属性
a2：是之前的属性

3.watch调用的位置

3.1 new Vue

也就是创建实例里面调用

new Vue({
   ...
    watch: {	
        ...
    }
});

3.2 单独

在创建实例之后，并且还有个变量接着的时候调用==$watch==

let vm = new Vue({...})
vm.$watch('weather',{
    // 配置对象
    immediate:true,	// 初始化的时候就调用
    handler(newValue, oldValue) {
        console.log(`天气原来是${oldValue},现在变成了${newValue}` );
    }	
})

两个参数：(a1,a2)

a1：是监视的属性名，这里要用==单引号==引起来，因为key名本来就是字符串
a2：是配置对象，里面改写什么写什么

4.深度监视

监视多层级里的属性

比如：监视 numbers 里的 a

<div id="root">
    <h3>a:{{numbers.a}}b:{{numbers.b}}</h3>
    <button @click = "numbers.a++">点我a++</button>
    <button @click = "numbers.b++">点我b++</button>
</div>

<script>
    let vm = new Vue({
        el: '#root',
        data: {
            numbers: {
                a: 1,
                b: 0,
            },
        },
    });
</script>

这样写不行，这里监视的是 numbers 本人，不是a

numbers: {
    /*
        vm.numbers = {a:12}
        numbers被改变了
    */
    handler() {
    	console.log('numbers被改变了');
    }
}

4.1 监视单个属性

‘numbers.a’：监视单个属性，需要用**引号**引起来

// 监视多级结构中某个属性的变化
'numbers.a': {
    handler() {
        console.log('a被改变了');
    }
}

4.2 deep属性

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

5.简写

只需要 handler 时才能写，和之前那个只需要 get() 的一样，之前 get 的举例也可以直接 ()

'numbers.a' () {
     console.log('a被改变了');
},

6.$watch简写

改第二个参数，原本是一个{}，换成一个function

vm.$watch('weather', function () {
    console.log(`天气原来是${oldValue},现在变成了${newValue}` );
})

7.watch 和 computed 区别

computed 不能使用异步的处理，比如setTimeout… watch 可以

**注：**watch 里的setTimeout的函数需要时箭头函数，不然this是window，用不了vue里的属性

被 Vue 管理的函数：普通函数
所有不被 Vue 管理的函数：箭头函数

2、绑定样式

数组和对象绑定

<div :class="xixi"></div>

<script>
    xixi: ['a1','a2','a3'],
    xixi2: {
        a1: true,
        a2: true,
        a3: true,
    }
</script>

行内style

比如：<div style="background-color: black"></div>

<div :style="styleObj"></div>
...
<script>
    data: {
        styleObj: {
            // 带 - 的，有两个单词的需要驼峰式写法
            backgroundColor: 'black',
           	// 就一个单词的就可以普通写
            color: 'red',
        }
    }
</script>

数组的写法（没用）:

<div :style="haha"></div>
...
<script>
    data: {
        haha: [
            {backgroundColor: 'black'},
            {color: 'red'}
        ]
    }
</script>

3、条件渲染

1.v-show

值为 true ，所在的语句就显示，为 false 就会添加一个 style=“display: none”（不显示）

<h3 v-show="false">你好，{{name}}</h3>

2.v-if

和上面差不多，但是值为 false 时，语句会变成一个 

<h3 v-if="a === 2">再见，{{name}}</h3>

2.1 v-else-if

和else if 的作用一样

<h3 v-if="a === 1">{{name}}1</h3>
<h3 v-if="a === 1">{{name}}2</h3>
<!--a的值为1时，上面两个都会出现-->
<h3 v-if="a === 3">{{name}}3</h3>

h3 v-if="a === 1">{{name}}1</h3>
<h3 v-else-if="a === 1">{{name}}2</h3>
<!--a的值为1时，只会出现第一个-->
<h3 v-else-if="a === 3">{{name}}3</h3>

2.2 v-else

else 的作用…

**注：**if - else if - else 中间不可以出现别的语句，不然就被打断了

选择：

切换频率高的使用 v-show ，因为 v-show只是隐藏起来，v-if 会把它删掉

3.小扩展

<template></template>：在页面加载的时候，会自动去掉，不影响结构

<!--可以在不破坏结构的同时，让所有需要v-if="a === 1"生效-->
<template v-if="a === 1">
    <h3>{{name}}1</h3>
    <h3>{{name}}2</h3>
    <h3>{{name}}3</h3>
</template><

注：template不可以和 v-show 一起使用

4、列表渲染

1.v-for

<div id="root">
    <h3>人们：</h3>
    <ul>
       <!--ren 里有几个，就会循环几次-->
       <li v-for="i in ren" :key="i.id">{{i.name}}-{{i.age}}</li>
       <!--
	   小明-20
       小红-220
       小刚-30-->
    </ul>
</div>
<script>
    let vm = new Vue({
        el: '#root',
        data: {
            ren: [
                {id: '001',name: '小明',age: 20,},
                {id: '002',name: '小红',age: 220,},
                {id: '003',name: '小刚',age: 30,},
          	],
        }
    });
</script>

“i in ren” 相当于 for in，有 for in 也会有 for of 和 for in 用处一样

2.接受参数

可以有两个变量来接收

<li v-for="(i,j) in ren" :key="i.j">{{i}}-------{{j}}</li>
<!--i 是里面的对象，j 是索引值
{ "id": "001", "name": "小明", "age": 20 }-------0
{ "id": "002", "name": "小红", "age": 220 }-------1
{ "id": "003", "name": "小刚", "age": 30 }-------2-->

3.遍历对象

<li v-for="(i,j) in ha" :key="j">{{i}}-------{{j}}</li>
<!--i 是value，j 是key
haha-------name
1000-------age-->

4.key属性

用与对比虚拟dom，值必须要唯一

比如：<li v-for="(i, j) in ren" :key="j">{{i.name}}-{{i.age}} <input type="text"></li>（使用index作key）

变成虚拟dom：

<li key="0">小明-20<input type="text"></li>
<li key="1">小红-10<input type="text"></li>
<li key="2">小刚-30<input type="text"></li>

key 是这样因为上面配置的 key 是 j嘛

如果添加了新数据：

ren: [
    {id: '004',name: '小憨',age: 60,},	// 在这个数组里的 j(index) 是 0
    {id: '001',name: '小明',age: 20,},
    {id: '002',name: '小红',age: 10,},
    {id: '003',name: '小刚',age: 30,},
],

变成虚拟dom2：

<li key="0">小憨-60<input type="text"></li>
<li key="1">小明-20<input type="text"></li>
<li key="2">小红-10<input type="text"></li>
<li key="3">小刚-30<input type="text"></li>