02：模板语法(上)

三思原创大约 10 分钟

Vue模板语法包括插值操作、v-once、v-html、v-text等常用操作，通过Mustache语法实现数据插入到H ML中。另外，还介绍了v-pre、v-cloak等指令的使用方式，以及动态绑定src、href和class的方法。

Vue自学笔记2：模板语法(上)

本文章为观看B站codewhy老师教学视频自学vuejs过程中记录的笔记，对视频进行了清晰的整理。

二、模板语法

1. 插值操作

1.1 Mustache

如何将data中的文本数据，插入到HTML中呢？
我们已经学习过了，可以通过Mustache语法(也就是双大括号)。
我们可以像下面这样来使用，并且数据是响应式的

1.2 v-once

1.3 v-html

1.4 v-text

注意：

效果：

总结： v-text不灵活，还是使用mustache好!

1.5 v-pre

1.6 v-cloak

cloak：斗篷

Css 中括号 [ ] 的用法：

 <head>
     <title>Document</title>
     <style>
         /* 判断有没有v-cloak，在决定是否显示 */
         [v-cloak] {
             display: none;
         }
     </style>
 </head>
 
 <body>
     <div id="app" v-cloak>
         <h2>{{message}}</h2>
     </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
     <script>
         //待解决的问题：如果vue还没执行好，#app就已经渲染出来了，页面会直接显示{{message}}
 
         // 在vue解析之前，div有一个属性v-cloak
         // 在vue解析之后，div没有属性v-cloak
     
         //据上面的原理，做出以下实现：
         //1.设置定时器，1秒钟后new Vue
         //2.Vue解析过后会将#app中的v-cloak属性消除
         //3.导致style标签中的[v-cloak]选择器失效，display：none失效
         //4.#app就会显示出来了
         setTimeout(() => {
             const app = new Vue({
                 el: '#app',
                 data: {
                     message: 'hello,world'
                 }
             })
         }, 1000)
 
     </script>
 </body>

但之后也不常用。。。

2. 绑定属性 v-bind

2.1 动态绑定src，href

2.2 绑定class

1）方式1：对象语法 (重点掌握)

基本格式：

<h2 :class:"类名1:布尔值,类名2:布尔值"></h2>

注意：

如果类名加了单引号，则说明它是固定的字符串；

如果类名没加单引号，则说明它是一个变量，可以通过vue中的data中的值来赋值

用法：

 <!-- 用法一：直接通过{}绑定一个类 -->
 <h2 :class="{'active': isActive}">Hello World</h2>
 
 <!-- 用法二：也可以通过判断，传入多个值 -->
 <h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
 
 <!-- 用法三：和普通的类同时存在，并不冲突 -->
 <!-- 注：如果isActive和isLine都为true，那么会有title/active/line三个类 -->
 <h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
 
 <!-- 用法四：如果过于复杂，可以放在一个methods或者computed中 -->
 <!-- 注：classes是一个计算属性 -->
 <h2 class="title" :class="classes">Hello World</h2>

2）方式2：数组语法 (用的较少)

注意：

如果类名加了单引号，则说明它是固定的字符串；

如果类名没加单引号，则说明它是一个变量，可以通过vue中的data中的值来赋值

 <!-- 用法一：直接通过{}绑定一个类 -->
 <h2 :class="[active]">Hello World</h2>
 
 <!-- 用法二：也可以传入多个值 -->
 <h2 :class="[active, line]">Hello World</h2>
 
 <!-- 用法三：和普通的类同时存在，并不冲突 -->
 <!-- 注：会有title/active/line三个类 -->
 <h2 class="title" :class="[active, line]">Hello World</h2>
 
 <!-- 用法四：如果过于复杂，可以放在一个methods或者computed中 -->
 <!-- 注：classes是一个计算属性 -->
 <h2 class="title" :class="classes">Hello World</h2>

2.3 绑定style

1）方式1：对象语法

基本格式：

<h2 **:style="{属性名1：'属性值',属性名2：'属性值'}"**></h2>

注意：

<!--属性值一定要加单引号，否则会被当成变量处理-->
<!-- font-size要加单引号才不会报错 -->
<h2 :style="{'font-size':'50px'}">{{message}}</h2>

<!-- fontSize驼峰式写法不需要叫单引号 -->
<h2 :style="{fontSize:'50px'}">{{message}}</h2>

<!-- 通过变量充当属性值也有方法 -->
<!--下面代码中的finalSize是vue对象中data中的变量-->
<h2 :style="{fontSize: finalSize + 'px'}">{{message}}</h2>

2）方式2：数组语法

 <div v-bind:style="[baseStyles, overridingStyles]"></div>
 <!--style后面跟的是一个数组类型-->
 <!--多个值以，分割即可-->

例子：

 <div id="app">
     <h2 :style="[baseStyle1,baseStyle2]">{{message}}</h2>
 </div>
 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
 <script>
     const app = new Vue({
         el: '#app',
         data: {
             message: 'hello,world',
             baseStyle1:{backgroundColor:'red'},
             baseStyle2:{fontSize:'50px'}
         }
     })
 </script>

3.计算属性

3.1什么是计算属性？

3.2 计算属性的复杂操作

<body>
    <div id="app">
        <!-- 利用函数求数组books的总价格 -->
        <h2>总价格:{{getSum()}}</h2>

        <!-- 使用计算属性 -->
        <h2>总价格:{{Sum}}</h2>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [
                    { id: 001, name: 'vue入门', price: 60 },
                    { id: 002, name: 'C++入门', price: 70 },
                    { id: 003, name: 'Java入门', price: 80 },
                ]
            },
            computed: {
                Sum: function () {
                    let sum = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        sum += this.books[i].price;
                    }
                    return sum;
                }
            },
            methods: {
                getSum: function () {
                    let sum = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        sum += this.books[i].price;
                    }
                    return sum;
                }
            }
        })
    </script>
</body>

3.3 计算属性的setter和getter

 <body>
     <div id="app">
         {{fullName}}
     </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
     <script>
         const app = new Vue({
             el: '#app',
             data: {
                 firstName:'Kobe',
                 lastName:'Bryant'
             },
             computed:{
                 //这个是最终简化的写法
                 // fullName: function(){
                 //     return this.firstName+' '+this.lastName
                 // }
 
                 //下面才是计算属性的完整写法
                 // 计算属性一般是没有set方法,只读属性
                 //但写了set方法,也不会报错,例如下面代码
                 fullName:{
                     set:function(newValue){
                         const names = newValue.split(' ');
                         this.firstName = names[0];
                         this.lastName = names[1];
                     },
                     get:function(){
                         return this.firstName+' '+this.lastName
                     }
                 }
             }
         })
     </script>
 </body>

效果:

控制台输入app.fullName='Stephen Curry'后:

总结:

set了解就行,百分之99的时候都用不到

3.4 计算属性的缓存

 <body>
     <div id="app">
         <!-- 直接拼接 -->
         <h2>{{firstName}} {{lastName}}</h2>
     
         <!-- 通过methods -->
         <h2>{{getFullName()}}</h2>
         <h2>{{getFullName()}}</h2>
         <h2>{{getFullName()}}</h2>
         <h2>{{getFullName()}}</h2>
     
         <!-- 通过computed -->
         <h2>{{fullName}}</h2>
         <h2>{{fullName}}</h2>
         <h2>{{fullName}}</h2>
         <h2>{{fullName}}</h2>
     </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
     <script>
         const app = new Vue({
             el: '#app',
             data: {
                 firstName: 'Kobe',
                 lastName: 'Bryant'
             },
             methods: {
                 getFullName: function () {
                     console.log('执行methods');
                     return this.firstName + ' ' + this.lastName
                 }
             },
             computed: {
                 fullName: function () {
                     console.log('执行computed');
                     return this.firstName + ' ' + this.lastName
                 }
             }
         })
     </script>
 </body>

效果:

总结:

计算属性比methods性能高.只要computed最终return的值不变化,因为会缓存所以只需要执行一次.

4. 事件监听

4.1 v-on

 <body>
     <div id="app">
        <h1>{{coutnter}}</h1>
        <!-- 方式1: -->
        <!-- <button v-on:click="counter++">+</button> -->
        <!-- <button v-on:click="counter--">-</button> -->
 
        <!-- 方式2: -->
        <!-- <button v-on:click="add">+</button> -->
        <!-- <button v-on:click="sub">-</button> -->\
 
        <!-- 语法糖写法 -->
        <button @click="add">+</button>
        <button @click="sub">-</button>
     </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
     <script>
         const app = new Vue({
             el: '#app',
             data: {
                 coutnter:0
             },
             methods:{
                 add(){
                     this.coutnter++
                 },
                 sub(){
                     this.coutnter--
                 }
             }
         })
     </script>
 </body>

鼠标事件	触发条件
click	鼠标点击左键触发
mouseover	鼠标经过触发
mouseout	鼠标离开触发
focus	获得鼠标焦点触发
blur	失去鼠标焦点触发
mousemove	鼠标移动触发
mouseup	鼠标弹起触发
mousedown	鼠标按下触发

键盘事件	触发条件
keyup	某个键盘按键被松开时触发
keydown	某个键盘按键被按下时触发
keypress	某个键盘按键被按下时触发，但是它不识别功能键，比如 ctrl shift 箭头等

4.2 v-on参数

 <body>
     <div id="app">
         <!-- 事件调用的方法没有参数 -->
         <button @click="btnClick1()">按钮1</button>
         <button @click="btnClick1">按钮2</button>
 
     
         <!-- 事件调用的方法需要参数 -->
         <!-- 1. 调用时写了参数,方法正常调用 -->
         <button @click="btnClick2('lalalala')">按钮3</button>
         <!-- 2. 调用时没写参数,输出undefined -->
         <button @click="btnClick2()">按钮4</button>
         <!-- 3. 调用时连括号都没写,Vue会默认将浏览器生产的event事件对象作为参数传入到方法 -->
         <button @click="btnClick2">按钮5</button>
 
     
         <!-- 方法定义时,既需要event对象,又需要其他参数 -->
         <!-- 实现方法: 在调用方法时手动的传入$event -->
         <button @click="btnClick3(123,$event)">按钮6</button>
     </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
     <script>
         const app = new Vue({
             el: '#app',
             data: {
                 coutnter: 0
             },
             methods: {
                 btnClick1() {
                     console.log('lalalala');
                 },
                 btnClick2(abc) {
                     console.log(abc);
                 },
                 btnClick3(abc, event) {
                     console.log(abc,event);
                 }
             }
         })
     </script>
 </body>

效果:

依次按下按钮的效果

4.3 v-on 的修饰符

1) .stop修饰符

作用: 阻止冒泡

 <body>
     <div id="app">
         <div @click="divClick">
             <!-- 通过.stop修饰符来阻止button的事件冒泡 -->
             <button @click.stop="btnClick">按钮</button>
         </div>
     </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
     <script>
         const app = new Vue({
             el: '#app',
             data: {
             },
             methods: {
                 divClick() {
                     console.log('div');
                 },
                 btnClick() {
                     console.log('btn');
                 }
             }
         })
     </script>
 </body>

2) .prevent修饰符

作用: 阻止默认行为

在实际开发中，有的时候，我们想要改变某些组件原生的动作，比如默认情况下，如果我点击一个"a"标签，那么默认会自动跳转到href对应的链接上去。如果我想要阻止这些原生的动作行为，那么这时候，我们就要使用prevent了，我们来举一个例子看看：:

 <body>
     <div id="app">
         <a href="www.baidu.com" @click.prevent="func3">baidu</a>
     </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
     <script>
         var vm = new Vue({
             el: "#app",
             data: {
             },
             methods: {
                 func3() {
                     alert('阻止a标签原先点击跳转的默认行为。')
                 }
             }
         })
     </script>
 </body>

效果:

3) .{keyCode/keyAlias}修饰符

作用:监听某个键盘的键帽

Vue官方提供的按键修饰符：

.enter // 回车键抬起
.tab // tab切换键抬起
.delete (捕获“删除”和“退格”键)
.esc //退出键抬起
.space // 空格键抬起
.up // 上
.down // 下
.left // 左
.right // 右
.对应键盘码 // 使用键盘码是要注意如果不是以上对应的键盘修饰符，需要创建按键修饰符

1.字母和数字键的键码值 (keyCode)

按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

2.数字键盘上的键的键码值 (keyCode)

按键	键码	按键	键码
0	96	8	104
1	97	9	105
2	98	*	106
3	99	+	107
4	100	Enter	108
5	101	-	109
6	102	.	110
7	103	/	111

3.功能键键码值 (keyCode)

按键	键码	按键	键码
F1	112	F7	118
F2	113	F8	119
F3	114	F9	120
F4	115	F10	121
F5	116	F11	122
F6	117	F12	123

4.控制键键码值 (keyCode)

按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222

5.多媒体键码值 (keyCode)

按键	键码
音量加	175
音量减	174
停止	179
静音	173
浏览器	172
邮件	180
搜索	170
收藏	171

 <body>
     <div id="app">
         <!-- 监听某个键盘的键帽 -->
         <!-- 下面的代码在监听回车 -->
         <input type="text" @keyup.enter="keyUp">
         <!--等同于一下代码-->
         <input type="text" @keyup.13="keyUp">
     </div>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
     <script>
         const app = new Vue({
             el: '#app',
             data: {
             },
             methods: {
                 keyUp(){
                     console.log('按下了回车');
                 }
             }
         })
     </script>
 </body>

4) .once修饰符

作用: 只触发一次的回调

 <button @click.once="btnClick">按钮</button>
 <!--上面的按钮只能点击一次-->

按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

按键	键码	按键	键码
F1	112	F7	118
F2	113	F8	119
F3	114	F9	120
F4	115	F10	121
F5	116	F11	122
F6	117	F12	123

按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

按键	键码	按键	键码
F1	112	F7	118
F2	113	F8	119
F3	114	F9	120
F4	115	F10	121
F5	116	F11	122
F6	117	F12	123

按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

按键	键码	按键	键码
F1	112	F7	118
F2	113	F8	119
F3	114	F9	120
F4	115	F10	121
F5	116	F11	122
F6	117	F12	123