初始Vue

1、Vue是什么？

  • 一套用语和构建用户界面的渐进式JavaScript框架

2、谁开发的？

  • 尤雨溪

3、Vue的特点

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

搭建Vue开发环境

Vue2.0版本CDN引入

1
2
<!-- 引入Vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>

Hello案例

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
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>初始Vue</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
</head>

<body>
    <!-- 
        初始Vue：
            1、想让Vue工作，就必须先创建一个Vue实例，且要传入一个配置对象；
            2、root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法；
            3、root容器里的代码被称为【Vue模板】
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello，{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示

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

    </script>
</body>

</html>

容器和Vue实例的对应关系

容器与实例多对一（错）

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
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>初始Vue</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div class="root">
        <h1>Hello，{{name}}</h1>
    </div>
    <div class="root">
        <h1>Hello，{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //创建Vue实例
        new Vue({
            el: '.root', //用于指定当前Vue实例为哪个容器服务，值通常为为css选择器字符串。
            data: { //data中用于存储数据，数据供el中所指定的容器去使用，值暂时先写成一个对象
                name: '上师大'
            }
        });

    </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
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>初始Vue</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello，{{name}}, {{address}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //创建Vue实例
        new Vue({
            el: '#root', //用于指定当前Vue实例为哪个容器服务，值通常为为css选择器字符串。
            data: { //data中用于存储数据，数据供el中所指定的容器去使用，值暂时先写成一个对象
                name: '上师大'
            }
        });
        new Vue({
            el: '#root', //用于指定当前Vue实例为哪个容器服务，值通常为为css选择器字符串。
            data: { //data中用于存储数据，数据供el中所指定的容器去使用，值暂时先写成一个对象
                address: '上海徐汇'
            }
        });

    </script>
</body>

</html>

结论：容器和Vue实例只能是一对一的关系

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
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>初始Vue</title>
    <!-- 引入Vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/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="root">
        <h1>Hello，{{name}}, {{address}}, {{Date.now()}}</h1>
    </div>
    <div id="root2">
        <h1>Hello，{{name}}, {{address.toUpperCase()}}</h1>
    </div>

    <script>
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        //创建Vue实例
        new Vue({
            el: '#root', //用于指定当前Vue实例为哪个容器服务，值通常为为css选择器字符串。
            data: { //data中用于存储数据，数据供el中所指定的容器去使用，值暂时先写成一个对象
                name: '上师大',
                address: '上海徐汇'
            }
        });
        new Vue({
            el: '#root2', //用于指定当前Vue实例为哪个容器服务，值通常为为css选择器字符串。
            data: { //data中用于存储数据，数据供el中所指定的容器去使用，值暂时先写成一个对象
                name: 'ShangHaiNormalUniversity',
                address: 'ShangHaiXuHui'
            }
        });

    </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
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
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Vue模板语法</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

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

		 -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <br />
        <h1>指令语法</h1>
        <!-- <a v-band:href="https://www.nieqianlong.cn">点击我去博客学习</a> -->
        <a v-bind:href="school.url.toUpperCase()">点击我去{{school.name}}博客学习1</a>
        <a :href="school.url">点击我去{{school.name}}博客学习2</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示

        new Vue({
            el: "#root",
            data: {
                name: 'jack',
                school: {
                    name: '聂千龙',
                    url: 'https://www.nieqianlong.cn'
                }
            }
        });
    </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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>数据绑定</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
			Vue中有2种数据绑定的方式：
					1.单向绑定(v-bind)：数据只能从data流向页面。
					2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
						备注：
								1.双向绑定一般都应用在表单类元素上（如：input、select等）
								2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
		 -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 普通写法 -->
        <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br />
        双向数据绑定：<input type="text" v-model:value="name"> -->
        <!-- 简写 -->
        单向数据绑定：<input type="text" :value="name"><br />
        双向数据绑定：<input type="text" v-model="name">
        <h2 v-bind:x="name">你好啊！</h2>
        <!-- 如下代码是错误的，因为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
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
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>数据绑定</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
			data与el的2种写法
					1.el有2种写法
									(1).new Vue时候配置el属性。
									(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
					2.data有2种写法
									(1).对象式
									(2).函数式
									如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
					3.一个重要的原则：
									由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
		-->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    //el的两种写法
    // const v = new Vue({
    //     // el: "#root",     //第一种写法
    //     data: {
    //         name: "聂千龙"
    //     }
    // });
    // console.log(v)
    // // v.$mount('#root')    //第二种写法
    // setTimeout(() => {
    //     v.$mount('#root')
    // }, 1000);

    //data的两种写法
    new Vue({
        el: "#root",
        //data的第一种写法：对象式
        // data:{
        //     name:"上师大"
        // }

        //data的第二种写法：函数式
        data() {
            console.log('@@@', this)//此处的this是Vue函数对象
            return {
                name: "上师大"
            }
        }
    });
</script>

</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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>数据绑定</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
			MVVM模型
						1. M：模型(Model) ：data中的数据
						2. V：视图(View) ：模板代码
						3. VM：视图模型(ViewModel)：Vue实例
			观察发现：
						1.data中所有的属性，最后都出现在了vm身上。
						2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
		-->
    <!-- 准备好一个容器 -->
    <div id="root">
        <!--View-->
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
        <h1>测试一下1：{{1+1}}</h1>
        <h1>测试一下2：{{$options}}</h1>
        <h1>测试一下3：{{$emit}}</h1>
        <h1>测试一下4：{{_c}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    const vm = new Vue({                           //ViewModel
        el: "#root",
        data() {
            return {
                name: '上师大',         //Model
                address: '上海徐汇'
            }
        }
    });
    console.log(vm)
</script>

</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
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>回顾Object.defineProperty方法</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>


</body>
<script type="text/javascript">
    let number = 170;
    let person = {
        name: '聂千龙',
        gender: '男',
        // age: 18
        // height: number
    }

    Object.defineProperty(person, 'age', {
        value: 18,
        enumerable: true,//控制属性是否可以枚举，默认值是false
        writeable: true, //控制属性是否可以被修改，默认值是false
        configurable: true//控制属性是否可以被删除，默认值是false
    })
    Object.defineProperty(person, 'height', {
        //当有人读取person的height属性时，get函数(getter)就会被调用，且返回值就是age的值
        get() {
            console.log('有人读取height属性了')
            return number
        },
        //当有人修改person的height属性时，set函数(setter)就会被调用，且返回值就是age的值
        set(value) {
            console.log('有人修改了height属性，且值是', value)
            number = value;
        }
    })
    // console.log(Object.keys(person))

    // for (let key in person) {
    //     console.log('@', person[key])
    // }

    console.log(person)
</script>

</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
27
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>何为数据代理</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -->
    <script type="text/javascript">
        let obj = { x: 100 }
        let obj2 = { y: 200 }

        Object.defineProperty(obj2, 'x', {
            get() {
                return obj.x
            },
            set(value) {
                obj.x = value
            }
        })
    </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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Vue中的数据代理</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
				1.Vue中的数据代理：
							通过vm对象来代理data对象中属性的操作（读/写）
				2.Vue中数据代理的好处：
							更加方便的操作data中的数据
				3.基本原理：
							通过Object.defineProperty()把data对象中所有属性添加到vm上。
							为每一个添加到vm上的属性，都指定一个getter/setter。
							在getter/setter内部去操作（读/写）data中对应的属性。
		 -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    let data = {
        name: '上师大',
        address: '上海徐汇'
    }

    const vm = new Vue({
        el: "#root",
        data
        // data: {
        //     name: '上师大',
        //     address: '上海徐汇'
        // }
    });
</script>

</html>

数据代理

vm对_data做了数据代理，使得vm.name和vm.address对应的便是_data中的name和address，Vue还对_data做了升级（数据劫持）以便于data中的数据改变后能使得使用到data中数据的地方能跟随变化，并不是在_data中做了数据代理

事件处理

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>事件处理的基本使用</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
				事件的基本使用：
							1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
							2.事件的回调需要配置在methods对象中，最终会在vm上；
							3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
							4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
							5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
		-->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <button v-on:click="showInfo1">点我提示信息1（不传参）</button>
        <button @click="showInfo2(66,$event)">点我提示信息2（传参）</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    const vm = new Vue({
        el: "#root",
        data() {
            return {
                name: '上师大'
            }
        },
        methods: {
            showInfo1(event) {
                // console.log(event.target)
                // console.log(event.target.innerText)
                // console.log(this == vm) //此处的this是vm
                alert('同学你好!')
            },
            showInfo2(number, event) {
                console.log(number, event)
                alert('同学你好!!')
            }
        }
    });
</script>

</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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>事件修饰符</title>
    <!-- 引入Vue -->
    <script 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 {
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }

        li {
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- 
				Vue中的事件修饰符：
						1.prevent：阻止默认事件（常用）；
						2.stop：阻止事件冒泡（常用）；
						3.once：事件只触发一次（常用）；
						4.capture：使用事件的捕获模式；
						5.self：只有event.target是当前操作的元素时才触发事件；
						6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- 阻止默认事件（常用） -->
        <a href="http://www.nieqianlong.cn" @click.prevent="showInfo">点我查看笔记</a>
        <!-- 阻止事件冒泡（常用） -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
            <!-- 修饰符可以连续写 -->
            <!-- <a href="http://www.nieqianlong.cn" @click.stop.prevent="showInfo">点我提示信息</button> -->
        </div>
        <!-- 事件只触发一次（常用） -->
        <button @click.once="showInfo">点我提示信息</button>
        <!-- 使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>
        <!-- 只有event.target是当前操作的元素时才触发事件 -->
        <div class="demo1" @click.self="showInfo">
            <button @click="showInfo">点我提示信息</button>
        </div>

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

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

    new Vue({
        el: "#root",
        data() {
            return {
                name: '上师大'
            }
        },
        methods: {
            showInfo(e) {
                // e.preventDefault() //阻止默认事件
                // e.stopPropagation() //阻止事件冒泡
                alert('同学你好！')
                // console.log(e.target)
            },
            showMsg(msg) {
                console.log(msg)
            },
            demo() {
                // console.log('@')
                for (let i = 0; i < 1000; i++) {
                    console.log('#')
                }
                console.log('累坏了')
            }
        }
    });
</script>

</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
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
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>键盘事件</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
				1.Vue中常用的按键别名：
							回车 => enter
							删除 => delete (捕获“删除”和“退格”键)
							退出 => esc
							空格 => space
							换行 => tab (特殊，必须配合keydown去使用)
							上 => up
							下 => down
							左 => left
							右 => right

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

				3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
							(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
							(2).配合keydown使用：正常触发事件。

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

				5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
		-->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- <input type="text" placeholder="按下提示输入" @keyup="showInfo"> -->
        <!-- <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"> -->
        <!-- <input type="text" placeholder="按下删除或退格提示输入" @keyup.delete="showInfo"> -->
        <!-- <input type="text" placeholder="按下Esc提示输入" @keyup.esc="showInfo"> -->
        <!-- <input type="text" placeholder="按下Caps提示输入" @keyup.caps-lock="showInfo"> -->
        <!-- <input type="text" placeholder="按下Tab提示输入" @keydown.tab="showInfo"> -->
        <!-- <input type="text" placeholder="按下Ctrl提示输入" @keyup.ctrl="showInfo"> -->
        <!-- <input type="text" placeholder="按下Ctrl提示输入" @keydown.ctrl="showInfo"> -->
        <!-- <input type="text" placeholder="按下Alt提示输入" @keyup.alt="showInfo"> -->
        <!-- <input type="text" placeholder="按下Shift提示输入" @keyup.shift="showInfo"> -->
        <!-- <input type="text" placeholder="按下Meta提示输入" @keyup.meta="showInfo"> -->
        <!-- <input type="text" placeholder="按下Ctrl+y提示输入" @keydown.ctrl.y="showInfo"> -->
        <input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo">
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    Vue.config.keyCodes.huiche = 13

    new Vue({
        el: "#root",
        data() {
            return {
                name: '上师大'
            }
        },
        methods: {
            showInfo(e) {
                console.log(e.target.value)

                // if (e.keyCode != 13) return
                // console.log(e.target.value)

                // console.log(e.key, e.keyCode) //显示按键名称

                // console.log(e.keyCode) //显示按键编码

                // console.log(e.target.value) //没有敲回车就传入数据
            }
        }
    });
</script>

</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
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_插值语法实现</title>
    <!-- 引入Vue -->
    <script 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.slice(0,3)}}-{{lastName}}</span>
        <!-- 全名：<span>{{firstName + '-' + lastName}}</span> -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    new Vue({
        el: "#root",
        data() {
            return {
                firstName: '张',
                lastName: '三'
            }
        }
    });
</script>

</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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_method实现</title>
    <!-- 引入Vue -->
    <script 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><br /><br />
        全名：<span>{{fullName()}}</span><br /><br />
        全名：<span>{{fullName()}}</span><br /><br />
        全名：<span>{{fullName()}}</span><br /><br />
        全名：<span>{{fullName()}}</span>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    new Vue({
        el: "#root",
        data() {
            return {
                firstName: '张',
                lastName: '三'
            }
        },
        methods: {
            fullName() {
                console.log('@-----')
                return this.firstName + '-' + this.lastName
            }
        }
    });
</script>

</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
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
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_计算属性实现</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
			计算属性：
					1.定义：要用的属性不存在，要通过已有属性计算得来。
					2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
					3.get函数什么时候执行？
								(1).初次读取时会执行一次。
								(2).当依赖的数据发生改变时会被再次调用。
					4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
					5.备注：
							1.计算属性最终会出现在vm上，直接读取使用即可。
							2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
		 -->
    <!-- 准备好一个容器 -->
    <div id="root">
        姓：<input type="text" v-model="firstName"><br /><br />
        名：<input type="text" v-model="lastName"><br /><br />
        测试：<input type="text" v-model="x"><br /><br />
        全名：<span>{{fullName}}</span><br /><br />
        全名：<span>{{fullName}}</span><br /><br />
        全名：<span>{{fullName}}</span><br /><br />
        全名：<span>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: "#root",
        data() {
            return {
                firstName: '张',
                lastName: '三',
                x: '你好'
            }
        },
        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>

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

<head>
    <meta charset="UTF-8" />
    <title>姓名案例_计算属性简写</title>
    <!-- 引入Vue -->
    <script 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><br /><br />
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: "#root",
        data() {
            return {
                firstName: '张',
                lastName: '三',
            }
        },
        // 完整写法
        // computed: {
        //     fullName: {
        //         get() {
        //             console.log('get被调用')
        //             return this.firstName + '-' + this.lastName
        //         },
        //         set(value) {
        //             console.log('set', value)
        //             const arr = value.split('-')
        //             this.firstName = arr[0]
        //             this.lastName = arr[1]
        //         }
        //     }
        // }

        //简写(只考虑读取不考虑修改)
        computed: {
            fullName() {
                console.log('get被调用')
                return this.firstName + '-' + this.lastName
            }
        }
    });
</script>

</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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>监视属性</title>
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>今天天气很{{info}}</h2>
        <!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
        <!-- <button @click="isHot = !isHot">切换天气</button> -->
        <button @click="changeWeather">切换天气</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示

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

</html>