文章目录
一、Vue插值表达式
概述: 插值表达式是vue框架提供的一种在html模板中绑定数据的方式,使用{{变量名}}
方式绑定Vue
实例中data
中的数据变量。会将绑定的数据实时的显示出来。
注意:
{{}}
括起来的区域,就是一个就是js语法区域
,在里面可以写部份的js
语法
语法: vue模板的表达式为{{ 变量 }}
注意: 表达式中不能定义变量或函数,也不可以写 if 条件或循环
1.1. 绑定变量
<div id="app">
<!-- 绑定变量 -->
<div>{{ title }}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
title: 'hello vue'
}
})
</script>
1.2. 进行计算
<div id="app">
<!-- 进行计算 vue模板中不太建议在里面写运算 -->
<div>{{ 1+1 }}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
title: 'hello vue',
}
})
</script>
注意: vue模板中不太建议在表达式中写运算,但是比较推荐写函数。
1.3. 调用函数或方法
<div id="app">
<!-- 调用函数或方法 -->
<div>{{sum()}}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
title: 'hello vue',
},
methods: {
sum() {
return 1 + 2
}
}
})
</script>
注意: 函数可以写在
data
中的,就像下面这样,但是不太建议,因为data
中的数据都会被劫持,但是函数是没有必要劫持。所以vue
为了提升性能,新增一个配置选项,用于定义函数方法method
,它不会被劫持,就是上面的写法。
<div id="app">
<!-- 调用函数或方法 -->
<div>{{sum()}}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
title: 'hello vue',
sum
}
function sum() {
return 1 + 2
}
</script>
1.4. 调用js内置方法
<div id="app">
<!-- 调用js内置方法 不太推荐 -->
<div>{{ '电饭锅是'.substr(0,3) }}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
title: 'hello vue',
}
})
</script>
同样这种方式不推荐。
1.5. 进行三目运算
<div id="app">
<!-- 三目运算 -->
<div>{{ age<20?'未成年':'成年' }}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
age: 18,
title: 'hello vue',
}
})
</script>
二、常用指令
指令(
Directives
)就是vue
给html
标签提供的一些自定义属性,这样属性都是带有v-
前缀的特殊属性。指令特性的值预期是单个JS
表达式(v-for
是例外情况)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM
。
vue
中的指令是可以操作真实的dom
的。
指令扩展了
html
标签的功能、大部分的指令的值是js的表达式
,取代了DOM
操作。
2.1. v-html
v-html
指令,会解析字符串中的html
标签,解析输出,一般用于将后台添加的富文本内容,在前台显示所用。
首先,我们看一下没用指令时,普通表达式的输出效果:
<div id="app">
<!-- 表达式,不会对于标签进行解析输出,它会转义后输出,为了安全 -->
<div>{{ title }}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
title: `<iframe src="https://www.mmonly.cc/wmtp/fjtp/" frameborder="1" width="600"></iframe>`
}
})
</script>
我们可以发现,普通表达式不会对于标签进行解析输出,它会转义后输出,为了安全(防止XSS跨站脚本攻击)。
使用 v-html 指令时,表达式的输出效果:
<div id="app">
<!-- 解析字符串中的html标签,解析输出,一般用于在后台添加的富文本内容,在前台显示所用 -->
<!-- 解决闪现 -->
<div v-html="title"></div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
title: `<iframe src="https://www.mmonly.cc/wmtp/fjtp/" frameborder="1" width="600"></iframe>`
}
})
</script>
2.2. v-text
在使用
{{}}
展示或更新页面数据时:当网速比较慢时,会出现一个不好的过度现象,会让用户先看到我们的表达式({{msg}}
),然后才看到data
中的值,即所谓的闪烁问题!
使用 v-text 指令的作用:
转义输出,为了解决早期没有使用工程化时,直接
script
引入vue
进行使用,会出现花括号闪现问题。
一般用不到,在单文件vue
中(使用工程化),不会有这样的闪现问题,所以用不到。
注意:
- v-html 也可以解决花括号闪现问题。
- vue中提供一个专门用于解决闪现问题的指令 v-cloak
- v-html或v-text虽然能够解决闪现,但是有的时候,一些项目在前期没有用它,这时候如果全部去修改,工程量有点大,可以用此指令
2.3. v-cloak
作用: 解决浏览器在加载页面时因存在时间差而产生闪烁问题
,需要配合CSS样式使用。
在使用
{{}}
展示或更新页面数据时:当网速比较慢时,会出现一个不好的过度现象,会让用户先看到我们的表达式({{msg}}
),然后才看到data
中的值,即所谓的闪烁问题
!
语法:
# css中设置
/* css3的属性选择器 */
[v-cloak] {
display: none !important;
}
# html
<div v-cloak>
{{ message }}
</div>
2.4. v-pre
此指令一个性能优化的指令,使用它,可以提升性能。
跳过这个元素和它的子元素的编译过程,跳过大量没有指令的节点会加快编译。
Vue
在模板解析的过程中,首先会将代码抽象成抽象语法树,然后再将抽象语法树解析成虚拟Dom
。而v-pre
指令的作用就是将解析成虚拟Dom
的过程跳过(静态驱动),将一段html
当成字符串存起来,当这段html
需要显示的时候,直接将字符串显示在页面,并不解析成虚拟Dom
,这样做性能很高,但是这意味着这段html
变成了静态数据,不能动态更新。如果数据需要动态显示,则不能使用该指令。
<div id="app">
<!-- ul中的数据,它是一个固定的,没有通过vue中的数据来渲染 -->
<!-- 无需把它们转为虚拟dom,直接存储html,直接输出显示 -->
<ul v-pre>
<li>首页</li>
<li>列表</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
}
})
</script>
2.5 v-once
Vue 是双向数据绑定,数据和标签一旦绑定,两者会互相影响,但有的时候我们只需要数据和标签(视图)绑定一次,这时候就需要用到 v-once 指令。
只渲染元素和组件一次,之后元素和组件将失去响应式功能。
v-once
是一种性能优化的方案。
<div id="app">
<div>{{title}}</div>
<!-- 对于数据,只绑定一次 性能优化 -->
<div v-once> v-once --- {{title}}</div>
</div>
<!-- 第3步:实例化vue -->
<script>
const vm = new Vue({
el: '#app',
data: {
title: 'hello vue'
}
})
</script>
2.6 v-if 和 v-show
概述:
由于插值表达式中不允许写if
条件判断和循环,所以 Vue
为我们提供了一种进行条件判断的方案,即 v-if
和 v-show
指令。
两条指令都是根据表达式的布尔值 (true/false
) 进行判断是否渲染该元素。
二者区别:
- v-if:是对
dom
元素的移除和创建。如果条件不成立,则不创建或删除已创建元素,初始化它的性能更高一些,如果频繁切换则性能低一些,如果与权限显示相关,建议用v-if
。 - v-show:是通过修改标签的
display
值。如果条件不成立,通过样式来隐藏,初始化它的性能低一些,如果频繁切换则性能更好一些。
条件不成立时,使用v-if指令,Dom 元素直接不创建,而v-show则会创建元素,通过修改元素的display属性来隐藏元素。
2.7 多条件判断
<div id="app">
<!-- 多条件 -->
<div v-if="age<10">儿童</div>
<div v-else-if="age<20">少年</div>
<div v-else>老年</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
age: 12
}
})
</script>
2.8 v-bind
概述:
动态地绑定一个或多个属性。
语法:
-
标准语法:v-bind:属性=“动态数据”
-
简写语法::属性=“动态数据”
使用:
<div id="app">
<!-- 如果我们要求src属性中的数据它是通过data数据源中得到的 -- 动态绑定写法 -->
<!--
语法:
标准语法:v-bind:属性="动态数据"
简写语法::属性="动态数据"
-->
<img v-bind:src="src" alt="" />
<img :src="src" alt="" />
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
src: "http://www.mobiletrain.org/images_index/right-fixed-face.png",
},
});
</script>
2.9 v-for
概述:
根据一组数组或对象的选项列表进行渲染。
v-for
指令需要使用(item,index) in 数组
或对象形式的特殊语法,同时还需要指定key
值,key
的作用在 vue
进行新旧数据比对渲染页面里,如果有key
值会提升比对性能,加快渲染,key
使用唯一的值来赋值。
vue
中对于 v-for
进行了增强,它可以用 for in/of
都可以,而且两者都可以进行对象的迭代。
语法:
迭代数组:v-for="(元素,索引) in/of 数组"
迭代对象:v-for="(元素,键名,索引) in/of 对象"
注意:
- 在使用语法中,vue2 中小括号可以写,也可以不写,在 vue3 中一定要写小括号。
- Vue2 中如果一个标签中同时有 v-if 和 v-for,则 v-for 的优先级高于 v-if,所以在vue2中不推荐两者在一个标签中。vue3中v-if优先级高于v-for。
- 建议给循环项每个添加一个 key 来作标识,用于提升性能,key 值,一定要唯一不重复的,不太建议使用循环的索引当作 key 值,防止索引塌陷。一般在和后台请求数据时,要求后台提供一个唯一的 id 给我们。
案例:
- 循环数组
<div id="app">
<!-- 加括号写法 -->
<li v-for="(item,index) in user1">{{index}} -- {{item}}</li>
<!-- 不加括号写法 -->
<li v-for="item,index in user1">{{index}} -- {{item}}</li>
<!-- 添加 key 作为标识的写法 -->
<li v-for="item,index in user2" :key="item.id">{{item.name}}</li>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
user1: ['张三', '李四', '王五'],
user2: [{ id: 2, name: '赵六' }, { id: 1, name: '孙七' }]
}
})
</script>
- 循环对象
<div id="app">
<div id="app">
<!-- 循环对象 -->
<div v-for="item,key,index in user" :key="key">
{{index}} -- {{key}} -- {{item}}
</div>
</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
user: { id: 1, name: '张三' }
}
})
</script>
2.10 v-on
概述:
该指令用来绑定事件监听器(事件绑定)。
语法:
v-on:事件名="实现的方法[此方法定义在vue配置中的methods中]"
由于 v-on 使用很频繁,所以可以简写:@事件名=“方法”`
注意:绑定的方法后面,它可以跟小括号,也可以不跟小括号。
<div id="app">
<h3>{{num}}</h3>
<button v-on:click="clickFn">点击事件</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
// 绑定的方法是可以写在data配置中,但是不建议,data中属性会进行劫持
// clickFn: function () {
// console.log('我是一个点击事件');
// }
num: 100
},
methods: {
clickFn: function () {
this.num++;
}
}
})
</script>
注意:绑定的方法是可以写在data配置中,但是不建议,data中属性会进行劫持,该方法没有被劫持的必要。
上面的案例还可以使用简写的方式实现:
<div id="app">
<h3>{{num}}</h3>
<!-- 简写 -->
<button @click="clickFn">点击事件</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
num: 100
},
// 注:methods中定义方法不用使用箭头函数,但是在方法体中建议使用箭头函数,用来保持this指向
methods: {
// 简写
clickFn() {
setTimeout(() => {
this.num++
}, 1000);
}
// 箭头函数 没有作用域,找父级
// 这里由于使用箭头函数,this指向window,故num的值不会发生改变
// clickFn: () => {
// console.log(this);
// this.num++
// console.log('我是一个点击事件');
// }
}
})
</script>
注意:上面方法体中简写函数时,
methods
中定义方法不用使用箭头函数,但是在方法体中建议使用箭头函数,用来保持this
指向。
2.10.1. event事件对象
上文说到,事件绑定的方法后面,可以跟小括号,也可以不跟小括号。那么,具体二者有什么区别呢?
- 如果绑定方法时,没有写小括号,则
vue
在解析时,会自动给你映射一个event
给绑定方法 - 如果绑定方法时,有写小括号,则需要手动把
event 对象($event)
传过去,$event
可以传多个,但是建议只传一个,一般写在第1位或最后1位
<div id="app">
<!-- 如果你绑定方法时,没有写小括号,则vue在解析时,会自动给你映射一个event给绑定方法 -->
<button @click="clickFn">点击事件</button>
<!--
如果你绑定方法时,有写小括号,则需要手动把event对象传过去$event,$event可以传多个,但是建议只传一 个,一般写在第1位或最后1位
-->
<button @click="clickFn($event)">点击事件</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {},
methods: {
clickFn(evt) {
console.log(evt);
},
},
});
</script>
2.10.2. 事件对象的使用
<div id="app">
<button uname="李四" data-uname="张三" @click="clickFn($event)">
点击事件
</button>
<input type="text" @keyup="onEnter" />
</div>
<script>
const vm = new Vue({
el: "#app",
data: {},
methods: {
// event可以用它来完成dom数据的获取
clickFn(evt) {
// 自定义的需要使用getAttribute方法,简写(evt.target.name)必须使用标签内置属性
console.log(evt.target.getAttribute("uname"));
console.log(evt.target.dataset.uname);
},
onEnter(evt) {
// 回车键的 keyCode 是13
if (evt.keyCode === 13) {
console.log(evt.target.value);
}
},
},
});
</script>
2.10.3. 事件修饰符
Vue 可以对事件添加一些通用的限制,例如添加阻止事件冒泡,Vue 对这种事件的限制提供了特定的写法,称之为修饰符。
在事件处理程序中,调用
event.preventDefault()
(阻止默认行为)或event.stopPropagation()
(阻止事件冒泡)是非常常见的需求。尽管可以在方法中轻松实现这一点,但更好的方式是使用纯粹的数据逻辑,而不是去处理 DOM 事件细节。
Vue
事件修饰符处理了许多DOM
事件的细节,让我们不再需要花费大量的时间去处理这些烦恼的事情,而将更多的精力用于程序的逻辑处理。
Vue 事件修饰符的语法如下:
v-on:事件.修饰符
在 Vue 中,事件修饰符主要有:
- stop:等同于 JavaScript 中的 event.stopPropagation(),阻止事件冒泡。
- capture:与事件冒泡的方向相反,事件捕获由外到内。
- self:只会触发自己范围内的事件。
- once:只会触发一次。
- prevent:等同于 JavaScript 中的 event.preventDefault(),阻止默认事件的发生。
- passive:执行默认行为。
stop
阻止了事件冒泡,相当于调用了
event.stopPropagation
方法
<div @click="shout(2)">
<button @click.stop="shout(1)">ok</button>
</div>
prevent
阻止了事件的默认行为,相当于调用了
event.preventDefault
方法
默认行为: a标签跳转,表单提交等等,html标签自带的行为
.prevent
可以取消这种默认行为
self
只当在
event.target
是当前元素自身时触发处理函数
<div v-on:click.self="doThat">...</div>
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用
v-on:click.prevent.self
会阻止所有的点击,而v-on:click.self.prevent
只会阻止对元素自身的点击
once
绑定了事件以后只能触发一次,第二次就不会触发
<button @click.once="shout(1)">ok</button>
capture
使事件触发从包含这个元素的顶层开始往下触发
<div @click.capture="shout(1)">
obj1
<div @click.capture="shout(2)">
obj2
<div @click="shout(3)">
obj3
<div @click="shout(4)">obj4</div>
</div>
</div>
</div>
输出结构: 1 2 4 3
passive
在移动端,当我们在监听元素滚动事件的时候,会一直触发onscroll
事件会让我们的网页变卡,因此我们使用这个修饰符的时候,相当于给onscroll
事件整了一个.lazy
修饰符
<div v-on:scroll.passive="onScroll">...</div>
不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。
passive 会告诉浏览器你不想阻止事件的默认行为
native
让组件变成像html内置标签
那样监听根元素的原生事件,否则组件上使用 v-on
只会监听自定义事件
<my-component v-on:click.native="doSomething"></my-component>