Vue的常用指令
一、逻辑相关 v-if
我们可以通过v-if、v-else-if、v-else来对页面元素的条件进行判断输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-if="'one' === message2">hhh</div>
<div v-else-if="'two' == message2">jjj</div>
<div v-else>{{message3}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message1: 'one',
message2: 'two',
message3: 'three'
}
});
</script>
</body>
</html>
效果如图：
二、循环遍历：v-for指令
我们可以使用v-for指令来遍历得到vue实例中data属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul >
<li v-for="student in students">{{student.name}}的年龄是：{{student.age}}岁</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
students: [
{name:'xiaoming',age: 18},
{name: 'xiaohong',age: 19},
{name: 'xiaolan',age: 10}
]
}
});
</script>
</body>
</html>
效果如图：
需要注意的点：
1. 创建数组对象时，格式为 [ {对象1} ， {对象2} ，{对象3} ...]
2. 我们还可以在v-for指令中拿到当前item的索引：
<div id="app">
<ul >
<li v-for="(student,index) in students">{{index + 1}} {{student.name}}的年龄是：{{student.age}}岁</li>
// 注意，index默认从0开始取值
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
students: [
{name:'xiaoming',age: 18},
{name: 'xiaohong',age: 19},
{name: 'xiaolan',age: 10}
]
}
});
</script>
结果如图：
三、v-show指令
我们可以通过v-show指令来控制某个元素的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p v-show="flag">小米是个大帅比</p>
<button v-on:click="hide">点击控制语句的显示和隐藏</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true
},
methods:{
hide: function(){
this.flag=!this.flag;
}
}
});
</script>
</body>
</html>
点击前：
点击后：
补充：v-show控制元素是否显示，实质上是通过元素的display属性的修改来进行修正当不显示时，display属性的值为：none
四、事件绑定：v-on指令
v-on用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器
- 语法：v-on:click="say" or v-on:click="say('参数', $event)"
- 简写：@click="say"
- 说明：绑定的事件从methods中获取
- 修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="sayHi()">Click Me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
methods: {
sayHi: function(){
alert('Hello , Vue')
}
}
});
</script>
</body>
</html>
效果如图：
五、v-text和v-html
我们可以通过v-text和v-html两个指令来实现对vue对象文本内容的获取，二者的区别在于使用v-html指令可以动态的渲染文本中的html元素，而v-text指令只会将内容识别为文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<!-- 等同于下面这句 -->
{{message}}
<div v-text="text"></div>
<div v-html="text"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'Hello, Vue~',
text: "<button>Click Me</button>"
}
});
</script>
</body>
</html>
效果如图：
六、属性绑定：v-bind
v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
- 缩写：:
- 预期：any (with argument) | Object (without argument)
- 参数：attrOrProp (optional)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">点击跳转百度</a>
<img v-bind:src="imgSrc"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
url: 'http://www.baidu.com',
imgSrc: 'https://cn.vuejs.org/images/logo.png'
}
});
</script>
</body>
</html>
效果如图：
当然啦，更多的时候，我们是使用v-bind来绑定我们的组件，进行值的传递~
七、数据的双向绑定：v-model
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message"/>
<div>{{message}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'Hello , Vue~'
}
});
</script>
</body>
</html>
我们可以看到，通过v-model指令，表单元素获取到了vue实例的data数据。
那么怎么样可以证明v-model确实实现了双向绑定呢？我们可以通过修改文本框的内容来进行验证
当我们修改文本框中的内容时，vue实例中的对象值也被改变了
八、插槽：v-slot
对于插槽，可能刚开始接触的人会感觉比较陌生或者不好理解。
对于插槽的理解可以看一下下面这段话：
插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题在这里就点出来了，是显示不显示和怎样显示。
或者简单理解的话，插槽就是在我们的页面代码中留下了一个入口，入口的代码可以由我们自己去定义内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 使用我们的自定义模板 -->
<first-component>
<component-title slot="component-title" v-bind:title="title"></component-title>
<component-content slot="component-content" v-bind:good="good" v-for="good in goods"></component-content>
</first-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//自定义组件框架
Vue.component("first-component",{
template: '<div>\
<slot name="component-title"></slot>\
<ul>\
<slot name="component-content"></solt>\
</ul>\
</div>'
})
//自定义标题组件
Vue.component("component-title",{
props:['title'],
template:'<div>{{title}}</div>'
})
//自定义内容组件
Vue.component("component-content",{
props:['good'],
template:'<div>{{good}}</div>'
})
var vm = new Vue({
el: "#app",
data: {
title: '商品清单',
goods:['零食','纸巾','矿泉水']
}
});
</script>
</body>
</html>
效果如图：
关于slot的内容，可以参考文章：
https://www.jianshu.com/p/0c9516a3be80
https://blog.csdn.net/DDDDeng_/article/details/107475920
