Vue2 - 23-03-19

First Post:

Last Update:

Vue2 - 23-03-19

计算属性

computed会转化成vm的属性、computed必须是计算已有属性，而非脱离vue管理的变量
当只读不改的时候，才可以使用简写 （fulname:function(){}）

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
<!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="../resources/js/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input type="text" v-model="firstname"><br>
        名：<input type="text" v-model="lastname"><br>
        全名：<span>{{fullname}}</span>
        <!-- 只有属性（data里的东西）和方法可以直接使用，computed的不行 -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
        el:'#root',
        data:{
            firstname:'张',
            lastname:'三'
        },
        computed:{
            fullname:{
                // 底层还是通过Object.defineProperty将其转化成属性
                // 缓存机制使得其优于methods,不会每次都调用
                // 1.初次读取的时候会调用get 2.所依赖的数据发生改变时候会调用
                get(){
                    return this.firstname + '-' + this.lastname;
                },
                set(value){
                    const arr = value.split('-')
                    this.firstname = arr[0]
                    this.lastname = arr[1]
                }
            }
        }
    })
</script>
</html>


相比之下，methods

1
2
3
4
<!-- 只要data发生改变，Vue就会重新解析模板
     解析的时候只要遇到插值语法中的方法
     都会重新调用方法
-->

插值语法违背简洁原则

1
2
<!-- 违背不复杂原则 -->
全名：<span>{{firstname.slice(0,3)}}-{{lastname}}</span>

监视属性

  • 可以监视计算属性
  • 可以给受监视的对象加上一个属性immediate:true来设置其初始化的时候也触发监视
  • Vue提供的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
<!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="../resources/js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <button @click="changeWeather">切换天气</button>
        <hr>
        <h3>a的值为{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button><br>
        <h3>b的值为{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: '#root',
            data:{
                isHot:true,
                numbers:{
                    a:1,
                    b:1
                }
            },
            computed:{
                info(){
                    return this.isHot? '炎热' : '凉爽'
                }
            },
            methods:{
                changeWeather(){
                    this.isHot = !this.isHot;
                }
            },
            watch:{
                // 可以监视计算属性
                info:{
                    // immediate:true,
                    handler(newValue,oldValue){
                        console.log('info监视：',newValue,oldValue);
                    }
                },
                // 监视多级结构中某个属性的变化
                'numbers.a':{
                    handler() {
                        console.log("a被改变了");
                    }
                },
                numbers:{
                    deep:true,
                    handler(){
                        console.log("number被改变了");
                    }
                }
            }
        })
    </script>
</body>
</html>

简写监视属性->写成函数

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
watch:{
            // 正常写法一
            // info:{
                // immediate:true,
                // deep:true,
                // handler(newValue,oldValue){
                //     console.log('info监视：',newValue,oldValue);
                // }
            // }
            //不需要额外配置东西的时候，可以采用简写一
            // info(newValue, oldValue){
            //     console.log('info被修改了',newValue,oldValue);
            // }
        }
    //正常写法二
        // vm.$watch('info',{
        //         immediate:true,
        //         deep:true,
        //         handler(newValue,oldValue){
        //             console.log('info监视：',newValue,oldValue);
        //         }
        // })
    //简写二
        vm.$watch('info', function(newValue, oldValue){
            console.log('info监视：',newValue, oldValue);
        })

监视VS计算

P25->P25 / 官方说法：计算属性 vs 侦听属性

绑定class属性的三种形式

  •       <!-- 绑定class样式，字符串写法：样式的类名不确定，需要动态指定 -->
      <div class="basic" :class="mood" id="demo" @click="changeMood">{{name}}</div><br><br><br>```

  •       <!-- 绑定class样式，数组写法：要绑定的样式个数不确定，名字也不确定 -->
      <div class="basic" :class="arr" >{{name}}</div>```

  •       <!-- 绑定class样式，数组写法：要绑定的样式个数确定，名字也确定，需要动态决定用不用 -->
      <div class="basic" :class="classObj" >{{name}}</div>```

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
<!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="../resources/js/vue.js"></script>
    <style>
         .basic {width: 300px;height: 50px;border: 1px solid black;}
          .happy {border: 3px 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: skyblue;}
          .normal {background-color: #bfa;}
          .atguigu1 {background-color: yellowgreen;}
          .atguigu2 {font-size: 20px;text-shadow: 2px 2px 10px red;}
          .atguigu3 {border-radius: 20px;}
    </style>
</head>
<body>
    <div id="root">
        <!-- 绑定class样式，字符串写法：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" id="demo" @click="changeMood">{{name}}</div><br><br><br>
        
        <!-- 绑定class样式，数组写法：要绑定的样式个数不确定，名字也不确定 -->
        <div class="basic" :class="arr" >{{name}}</div>

        <!-- 绑定class样式，数组写法：要绑定的样式个数确定，名字也确定，需要动态决定用不用 -->
        <div class="basic" :class="classObj" >{{name}}</div>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data:{
                name:'Linzepore',
                mood:'normal',
                arr:['atguigu1','atguigu2','atguigu3'],
                classObj:{
                    atguigu1:true,
                    atguigu2:true,
                    atguigu3:true
                }
            },
            methods:{
                changeMood(){
                    // document.getElementById('demo').className = 'basic happy'
                    // this.mood = 'happy'、
                    const arr = ['happy', 'sad', 'normal'];
                    const random = Math.floor(Math.random()*3);
                    this.mood = arr[random]
                }
            }

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

绑定style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 <!-- 绑定style样式--对象写法 -->
 <div class="basic" :style="{fontSize:fsize+'px'}">{{name}}</div>
 <div class="basic" :style="styleObj1">{{name}}</div>
 <!-- 绑定style样式--数组写法 -->
 <div class="basic" :style="[styleObj1,styleObj2]">{{name}}</div>
 <div class="basic" :style="styleArr">{{name}}</div>
 
 data:{
         fsize:48,
         styleObj1:{
             fontSize:'40px',
             color:'red'
         },
         styleObj2:{
             backgroundColor:'orange'
         },
         styleArr:[{
             fontSize:'40px',
             color:'red'
         },
         {
             backgroundColor:'green'
         }]
}

条件渲染

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
<!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="../resources/js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 使用v-show做条件渲染 -->
        <h1 v-show="showOrNot1">欢迎来到{{name}}的博客</h1>
        <h1 v-if="showOrNot2">欢迎来到{{name}}的博客</h1>
        <hr>
        <h1>当前的n值为{{n}}</h1>
        <button @click="n++">点我n+1</button>
        <!-- 切换频率高的时候就使用v-show，避免反复增删节点 -->
        <div v-show="n==1">Angular</div>
        <div v-show="n==2">React</div>
        <div v-show="n==3">Vue</div>
        <div v-if="n==1">Angular</div>
        <div v-if="n==2">React</div>
        <div v-if="n==3">Vue</div>
        <hr>
        <!-- v-if、v-else-if、v-else中间不能打断 -->
        <div v-if="n==1">Angular</div>
        <div v-else-if="n==1">React</div>
        <!-- <div>@</div> -->
        <div v-else-if="n==2">Vue</div>
        <div v-else>哈哈</div>
        <hr>
        <h2 v-show="n==1">你好</h2>
        <h2 v-show="n==1">Vue</h2>
        <h2 v-show="n==1">Linzepore</h2>
        <!-- v-if与template配合使用 -->
        <template v-if="n==1">
            <h2>你好</h2>
            <h2>Vue</h2>
            <h2>Linzepore</h2>
        </template>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            name:'Linzepore',
            showOrNot1:true,
            showOrNot2:true,
            n:0,
        },
    })
</script>
</html>

基本列表

v-for="(value, index) in/of list" :key="index"

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
<div id="root">
        <h2>测试数组遍历</h2>
        <ul> 
            <li v-for="p in personList" :key="p.id">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
        
        <ul> 
            <li v-for="(p, index) of personList" :key="index">
                {{p}}---{{index}}
            </li>
        </ul>

        <h2>测试对象遍历</h2>
        <ul>
            <li v-for="(value,key) of car" :key="key">
                {{key}}---{{value}}
            </li>
        </ul>       

        <h2>测试字符串遍历</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{index}}---{{char}}
            </li>
        </ul>
        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(number, index) of 5" :key="index">
                {{index}} --- {{number}}
            </li>
        </ul>
</div>
-----
        data:{
                personList:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20},
                ],
                car:{
                    name:'奥迪A8',
                    price:'70万',
                    color:'黑色'
                },
                str:'hello'
            }
≡