提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
本着巩固Vue的一些内容,从基础开始做起,第一次发文;
本文介绍了Vue中一些简单指令和事件修饰符的使用
一、指令
1. v-cloak:在使用{{}}插值表达式的时候,我们如果网速过于加载缓慢,我们会看到页面中出现我们写的一些插值式子
如 
,
主要是由于没有将vue.js文件加载完毕,导致的数据还没有进行渲染 ,
这个时候我们可以使用 指令 v-cloak 来解决这个问题
需要配合我们的css来使用,在还没有加载完毕vue的时候,先将元素隐藏不可见,然后加载完毕了在显示出来.极好的解决闪烁的问题
<style>
[v-cloak] {
display: none;
}
</style>
<!-- 使用v-cloak 能够解决 插值表达式闪烁的问题 -->
<p v-cloak>{{msg}}</p>
<h4 v-text="msg"></h4>
const app = new Vue({
el: '#app',
data: {
msg: '6666',
msg2: '<h1>我是一个大大的H1,我大,我骄傲</h1>',
mytitle: '这是一个自己定义的title'
},
methods: { // 这个 methods属性中定义了当前Vue实例中所有可用的方法
show() {
console.log('啦啦啦');
}
}
});当然,插值表达式{{}}也可以写一个合法的js表达式,这里就不一一赘述了,
2. v-text: 与原生的innerText类似
他相对于{{}}而言,不存在闪烁的问题, 但是会覆盖元素自带的一些内容,如文本,标签等,
而{{}} 就不会覆盖 只会加载自己那一块儿占位符的内容
<div id="app">
<div v-text="msg2"></div>
</div>
const app = new Vue({
// 挂载的元素
el: '#app',
// 挂载元素区域定义的数据
data: {
msg: '6666',
msg2: '<h1>我是一个大大的H1,我大,我骄傲</h1>',
mytitle: '这是一个自己定义的title'
},
methods: { // 这个 methods属性中定义了当前Vue实例中所有可用的方法
show() {
console.log('啦啦啦');
}
}
});
3. v-html: 不存在闪烁问题,可以识别普通文本,也可以识别标签文本,与原生的innerHTML类似
<div id="app">
<!-- 会识别为标签内容进行渲染 -->
<div v-html="msg2"></div>
</div>
const app = new Vue({
// 挂载的元素
el: '#app',
// 挂载元素区域定义的数据
data: {
msg: '6666',
msg2: '<h1>我是一个大大的H1,我大,我骄傲</h1>',
mytitle: '这是一个自己定义的title'
},
methods: { // 这个 methods属性中定义了当前Vue实例中所有可用的方法
show() {
console.log('啦啦啦');
}
}
});4. v-pre: 这个指令定义的内容,不会被进行编译,也就是说 里面就算是写了{{msg}}之类的,也只会当作普通的文本进行显示,因为根本不进行编译,适用于一些静态的内容
<div id="app">
<!-- 不会进行编译,适用于一些静态资源 -->
<div v-pre="msg2"></div>
</div>
const app = new Vue({
// 挂载的元素
el: '#app',
// 挂载元素区域定义的数据
data: {
msg: '6666',
msg2: '<h1>我是一个大大的H1,我大,我骄傲</h1>',
mytitle: '这是一个自己定义的title'
},
methods: { // 这个 methods属性中定义了当前Vue实例中所有可用的方法
show() {
console.log('啦啦啦');
}
}
});5. v-bind: 绑定属性
<!-- v-bind: 是Vue中, 提供的用于绑定属性的指令 -->
<!-- <input type="button" name="" value="按钮" v-bind:title="mytitle + '666'"> -->
<!-- 注意: v-bind: 指令可以简写为 : -->
<!-- <input type="button" name="" value="按钮" :title="mytitle + '666'"> -->
<!-- v-bind: 中, 可以写合法的js表达式 -->
const app = new Vue({
el: '#app',
data: {
msg: '6666',
msg2: '<h1>我是一个大大的H1,我大,我骄傲</h1>',
mytitle: '这是一个自己定义的title'
},
methods: { // 这个 methods属性中定义了当前Vue实例中所有可用的方法
show() {
console.log('啦啦啦');
}
}
});6. v-model: 双向数据绑定,所谓数据双向绑定,就是
当我们的View(用户页面) 发生变化,我们的Model(数据)会进行更新,
当Model(数据)发生变化了,View(用户界面) 也会进行变化
只能在表单元素( input select text area ) 或者是 components(组件中进行使用)
<!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>Document</title>
</head>
<body>
<div id="app">
<h4>{{msg}}</h4>
<!-- v-bind: 只能实现数据的单项绑定, 从 M 自动绑定到 V , 无法实现数据的双向绑定-->
<!-- <input type="text" v-bind:value="msg"> -->
<!-- 使用 v-model 指令, 可以实现 表单元素和 Model 中数据的双向数据绑定 -->
<!-- 注意： v-model 只能运用在表单元素中 -->
<!-- input{radio, text, address, email ...} select checkbox textarea -->
<input type="text" v-model="msg">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: '大家都是好学生，爱敲代码，爱学习，爱思考，没瑕疵！'
},
methods: {
}
});
</script>
</body>
</html>7. v-on: Vue中提供了这个指令用来事件的绑定
<!-- Vue中提供了 v-on: 事件绑定机制 -->
<!-- <input type="button" name="" value="按钮" :title="mytitle + '666'" v-on:click=""> -->
<!-- <input type="button" name="" value="按钮" v-on:mouseover="show"> -->
<!-- v-on:事件名="" 可以简写为 @事件名="" -->
<script>
const app = new Vue({
el: '#app',
data: {
msg: '6666',
msg2: '<h1>我是一个大大的H1,我大,我骄傲</h1>',
mytitle: '这是一个自己定义的title'
},
methods: { // 这个 methods属性中定义了当前Vue实例中所有可用的方法
show() {
console.log('啦啦啦');
}
}
});
</script>8. v-for 很类似数组的forEach 方法
可以对 普通数组, 对象数组, 对象, 数字(原生的普通for循环 注意: 这里是从1开始)
<!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>Document</title>
</head>
<body>
<div id="app">
<p v-for="(item,index) in list">{{index}}-----{{item}}</p>
<ul v-for="(item,index) in list">
<li>{{index}}-----{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
// 创建Vue的实例, 得到 ViewModel
const app = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
},
methods: {}
});
</script>
</body>
</html>对象数组
<!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>Document</title>
</head>
<body>
<div id="app">
<p v-for="user in list">{{user.id}}-----{{user.name}}</p>
<ul v-for="user in list">
<li>{{user.id}}-----{{user.name}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
// 创建Vue实例 , 得到 ViewModel
const app = new Vue({
el: '#app',
data: {
list: [{
id: 1,
name: 'yuni'
}, {
id: 2,
name: 'yuni1111'
}, {
id: 3,
name: 'yuni2222'
}, {
id: 4,
name: 'yuni6666'
}, {
id: 5,
name: 'yuni8888'
}]
}
});
</script>
</body>
</html>对象
<!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>Document</title>
</head>
<body>
<div id="app">
<!-- 注意: 在遍历对象身上的键值对的时候,除了有 val key, 在第三个位置还有 一个 索引 -->
<p v-for="(val,key,index) in user">{{key}}---{{val}}---{{index}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
// 创建Vue 实例, 得到 ViewModel
const app = new Vue({
el: "#app",
data: {
user: {
name: '遇你',
age: 18,
sex: '男',
Meet: 'MeetQin'
}
}
});
</script>
</body>
</html>迭代数字
<!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>Document</title>
</head>
<body>
<div id="app">
<!-- in 后面可以放置 普通数组, 对象数组, 对象, 还可以放置数字 -->
<!-- 注意: 如果使用 v-for 迭代数字的话, 前面的 count 值 从 1 开始 -->
<p v-for="count in 20">这是第{{count}}个</p>
</div>
<script src="../js/vue.js"></script>
<script>
// 创建Vue实例, 得到ViewModel
const app = new Vue({
el: '#app',
data: {}
});
</script>
</body>
</html>key属性的使用
<!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>Document</title>
</head>
<body>
<div id="app">
<!-- <p v-for="item in list">{{item.name}}</p>
<ul v-for="item in list">
<li>{{item.name}}</li>
</ul> -->
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- 注意: v-for 循环的时候, key 属性只能使用 number 或者 string
避免我们在数组头部插入的时候,选中失效的问题, key作为一个标识
-->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
</div>
<script src="../js/vue.js"></script>
<script>
// 创建Vue实例, 获取到 ViewModel
const app = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [{
id: 1,
name: '丽丝'
}, {
id: 2,
name: '始皇帝'
}, {
id: 3,
name: '🐂🐎'
}, ]
},
methods: {
add() {
this.list.unshift({
id: this.id,
name: this.name
});
}
}
});
</script>
</body>
</html>9. v-if: 条件式渲染,为true 的时候,会创建元素显示, 为false的时候会进行销毁元素,
10. v-show: 为true 的时候显示元素,为false的时候,隐藏元素,使用display:none;的切换来渲染
<!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>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="toggle">
<!-- v-if 的特点: 每次都会重新删除或创建元素 -->
<!-- v-show 的特点: 每次不会重新进行DOM的删除和创建操作, 只是切换了元素的 display:none; 效果 -->
<!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 -->
<!-- 如果元素涉及到频繁的切换,最好不要使用v-if, 而是推荐使用v-show -->
<!-- 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if -->
<h3 v-if="flag">这是v-if控制的元素</h3>
<h3 v-show="flag">这是v-show控制的元素</h3>
</div>
<script src="../js/vue.js"></script>
<script>
// 创建Vue实例 获取到 ViewModel
const app = new Vue({
el: "#app",
data: {
flag: true
},
methods: {
toggle() {
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>总结
主要是对一些指令的描述,由于第一次发文,感觉文字描述部分过多,但是我都是按照自己的理解来写的,会继续努力的
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
