学习期间参考的读物是Vue.js权威指南。若有理解不正确的地方,欢迎大家指正,我会积极理解改正。希望和大家共同进步。
1、v-cloak
1.1 用途:用于解决插值表达式闪烁问题。
1.2 造成闪烁的原因:当网速特别慢的时候,外部引用的包没有完全加载完,页面上会渲染出{
{xx}}这样的画面,全部加载完成后{
{}}里的内容才会被正常的渲染出来。
1.3 代码展示:
/* 利用属性选择器,选择有v-cloak属性的元素,
在未完全加载完时,不显示该元素的内容 */
[v-cloak] {
display: none;
}
<div id="app1">
<div v-cloak>{
{ msg }}</div>
</div>
var vm = new Vue ({
el: '#app1',
data: {
msg: '我是前端小白'
},
})
2、v-text
2.1 用途:更新元素内部的内容。
2.2 代码展示:
<!-- v-text会自动覆盖这个元素里面本来有的内容,渲染到页面上内容是msg里的内容。 -->
<div id="app2" v-text="msg">我本来是这个内容</div>
var vm = new Vue ({
el: '#app2',
data: {
msg: '我是前端小白'
},
})
2.3 页面效果展示:
2.4 v-text和{
{}}(插值表达式)的区别:
①v-text没有闪烁问题。
②v-text会覆盖原有元素的内容,{
{}}不会覆盖原有元素的内容。元素原本有的内容会正常渲染到页面上,{
{}}是替换了它本身占位符的内容。
3、v-html
3.1 用途:可以更新元素的innerHTML,内容会按照普通HTML插入。
3.2 代码展示:
<div id="app3" v-html="msg"></div>
var vm = new Vue ({
el: '#app3',
data: {
msg: '<p>插入一个段落结构</p>'
},
})
3.3 页面效果展示:
4、v-bind
4.1 用途:给元素绑定属性。
4.2 代码展示:
<input id="btn" value="按钮" type="button" v-bind:title="title" >
var vm = new Vue ({
el: '#btn',
data: {
title: '添上了吧'
},
})
4.3 页面效果展示:
4.4 v-bind 缩写“ :”
<input id="btn" value="按钮" type="button" :title="title" >
5、v-on
5.1 用途:用于给元素绑定事件。
5.2 代码展示:
<div id="app4" v-on:click="show" >
{
{msg}}
</div>
var vm = new Vue ({
el: '#app4',
data: {
msg: '点我点我'
},
methods: {
show() {
alert("我弹出来了吧")
}
}
})
5.3 v-on可简写为@
<div id="app4" @click="show" >
{
{msg}}
</div>
5.4 页面效果展示:
5.5 事件修饰符
5.5.1 .stop 阻止冒泡,调用event.stopPropagation()方法。
示例代码:
<div id="wrap">
<div id="inner" @click="divClick">
<input type="button" value="点击" @click="buttonClick">
</div>
</div>
#inner {
width: 400px;
height: 200px;
background-color: blueviolet;
}
var vm = new Vue ({
el: '#wrap',
data: {
},
methods: {
divClick() {
console.log("这里触发的是div的点击事件");
},
buttonClick() {
console.log("这里触发的是button的点击事件");
}
}
})
输出结果:
先触发的是当前元素的事件,然后触发的是外围的事件。
若想阻止外围事件的触发,可以直接在事件上添加.stop方法。
代码示例:
<div id="wrap">
<div id="inner" @click="divClick">
<input type="button" value="点击" @click.stop="buttonClick">
</div>
</div>
输出结果:
5.5.2 .prevent 阻止默认事件,调用event.preventDefault()方法。
代码示例:
<div id="wrap">
<a href="http://www.baidu.com" @click.prevent="aClick">跳转链接</a>
</div>
5.5.3 .capture 添加事件侦听器时使用事件捕获模式。
代码示例:
<div id="wrap">
<div id="inner" @click.capture="divClick">
<input type="button" value="点击" @click="buttonClick">
</div>
</div>
var vm = new Vue ({
el: '#wrap',
data: {
},
methods: {
divClick() {
console.log("这里触发的是div的点击事件");
},
buttonClick() {
console.log("这里触发的是button的点击事件");
},
}
})
打印结果:
事件是从外向内捕获的。
5.5.4 .self 当事件在当前元素本身触发时,触发回调。
代码示例:
<div id="wrap">
<div id="inner" @click.self="divClick">
<input type="button" value="点击" @click="buttonClick">
</div>
</div>
js代码与capture一致。
打印结果:
.self只会阻止自己本身的冒泡行为触发,并不会真正的阻止冒泡行为。
5.5.5 .once事件值触发一次。
代码示例:
<div id="wrap">
<div id="inner" @click.once="divClick">
<input type="button" value="点击" @click="buttonClick">
</div>
</div>
js代码同上
打印结果:
只能触发一次事件。
6、v-model
6.1 用途:双向数据绑定 (这是唯一一个可以实现双向数据绑定的指令。)
6.2 代码示例:
<div id="app">
<p>{
{msg}} </p>
<input class="text" type="text" v-model="msg">
</div>
var vm = new Vue ({
el: '#app',
data: {
msg: '我是前端初学者,我们一起来学习。'
},
})
页面效果:
在vm实例中,数据内容也是被修改后的。
注意:v-model指令只能运用到表单元素中。
7、v-for
7.1 用途:循环、遍历,重复渲染元素。
7.2 对数组的循环
代码示例
<div id="app">
<p v-for='item in list'>{
{item}}</p>
</div>
var vm = new Vue ({
el: '#app',
data: {
list: [1,2,3,4,5]
},
})
效果:
数组遍历需要获取索引时:
代码示例
<div id="app">
<p v-for='(item,i) in list'>{
{i}}+++{
{item}}</p>
</div>
效果:
7.3 对象数组的遍历:
代码示例:
<div id="app">
<p v-for='course in list'>{
{course.id}}+++{
{course.name}}</p>
</div>
var vm = new Vue ({
el: '#app',
data: {
list: [
{
id: 1, name: 'Vue'},
{
id: 2, name: 'ES6'},
{
id: 3, name: 'Webpack'},
{
id: 4, name: 'jQuery'},
{
id: 5, name: 'angular'}
]
},
})
效果:
7.4 对象的循环
代码示例:
<div id="app">
<p v-for='(val, key) in list'>{
{key}}+++{
{val}}</p>
</div>
var vm = new Vue ({
el: '#app',
data: {
list: {
id: 1,
name: '王大个',
gender: '男'
}
},
})
效果:
7.5 数字的循环
代码示例:
<div id="app">
<!-- 循环数字的话,count从1开始。 -->
<p v-for='count in 6'>这是第{
{count}}次的循环了。</p>
</div>
效果:
8、v-if和v-show
8.1 用途:
v-if用来生成或移除一个元素。
v-show用来显示或隐藏一个元素。
8.2 代码示例:
<div id="app">
<input type="button" @click="toggle()" value="有惊喜">
<!-- 每次都会重新创建和删除元素,切换性能消耗比较大. -->
<h1 v-if="flag" >这个是使用v-if的测试标题</h1>
<!-- 不会重新创建和删除元素,只是改变了元素的display:none.有较高的初始渲染消耗。 -->
<h1 v-show="flag" >这个是使用v-show的测试标题</h1>
</div>
var vm = new Vue ({
el: '#app',
data: {
flag: true,
},
methods: {
toggle() {
this.flag = !this.flag;
}
}
})
效果:
点击按钮后:
文章结束了,有错误的地方欢迎大家指正,谢谢大家!