| 指令名称 | 作用 |
|---|---|
| v-bind | 响应并更新DOM特性；例如：v-bind:href v-bind:class v-bind:title v-bind:bb |
| v-on | 用于监听DOM事件； 例如：v-on:click v-on:keyup |
| v-model | 数据双向绑定；用于表单输入等；例如： |
| v-show | 条件渲染指令，为DOM设置css的style属性 |
| v-if | 条件渲染指令，动态在DOM内添加或删除DOM元素 |
| v-else | 条件渲染指令，必须跟v-if成对使用 |
| v-for | 循环指令 例如 |
| v-else-if | 判断多层条件，必须跟v-if成对使用； |
| v-text | 更新元素的textContent；例如： 等同于 {{msg}}； |
| v-html | 更新元素的innerHTML； |
| v-pre | 不需要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度；例如：{{ this will not be compiled }}； |
| v-cloak | 不需要表达式，这个指令保持在元素上直到关联实例结束编译； |
| v-once | 不需要表达式，只渲染元素或组件一次，随后的渲染，组件/元素以及下面的子元素都当成静态页面不在渲染。 |
v-cloak
一般情况下， v-cloak 个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是在具有工程化的项目里，比如webpack vue-router 时，项目的 HTML结构只有 个空的 div 元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要 v-cloak
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例基本指令 v-cloak</title>
v-cloak是解决初始化慢导致页面闪动的方法
</head>
<body>
<div id="app" v-cloak>
{{message}}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '123'
}
})
</script>
</body>
</html>
v-once
v-once 也是 个不需要表达式的指令，作用是定义它的元素或组件只渲染 次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容，例如：
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例基本指令 v-once</title>
</head>
<body>
<div id="app">
只渲染一次<span v-once>{{message}}</span>
<div>
随着data变化而变化：{{message}}
</div>
<button @click="handleRef">按下数据变化</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: '123'
},
methods: {
handleRef: function() {
this.message = "我变了"
}
}
})
</script>
</body>
</html>
条件渲染指令 v-if 、 v-else-if、 v-else
条件指令可以根据表达式的值在dom中渲染或销毁元素或组件
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例基本指令 v-else v-if v-else-if</title>
</head>
<body>
<div id="app">
<template v-if="type==='name'">
<label>用户名：</label>
<input placeholder="请输入用户名" key="input-name">
</template>
<template v-else-if="type==='mail'">
<label>邮箱：</label>
<input placeholder="请输入邮箱" key="input-mail">
</template>
<template v-else>
<label>其他：</label>
<input placeholder="请输入……" key="input-mail">
</template>
<br />
<input placeholder="请输入的是其他" v-model="type" />
<br>您输入的是：{{type}}
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
type: 'name'
},
})
</script>
</body>
</html>
效果如图：
v-show
v-show与v-if相似，只是v-show是改变css的属性，相当于display,
当v-show的表达式的值是false的时候，那么就不显示，在DOM结构上就会看到内联样式display：none
<html>
<head>
<!-- v-show不能在<template>上使用 -->
<meta charset="utf-8">
<title>Vue 示例基本指令 v-show</title>
</head>
<body>
<div id="app">
<p v-show="status===2">当status为2显示出来</p>
<button @click="handle"></button>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
status: 1
},
methods: {
handle: function() {
this.status = this.status === 1 ? this.status = 2 : this.status = 1
}
}
})
</script>
</body>
</html>
效果图：
v-if 和v-show的区别说明
首先，v-if是真正的条件渲染，并会根据条件进行真正的销毁元素重建元素或绑定事件或子组件，如果一开始表示式的值是false，那么一开始元素/组件就不会被渲染，直到v-if条件变化后才会开始编译，v-show是通过改成css来实现显示或隐藏，无论v-show的条件如何，一开始都会被编译；因此v-if更适合不经常切换的场景，因为其切换开销较大，v-show适合频繁切换的场景
v-for
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例基本指令 v-for</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(book,index) in books">{{index}}-{{book.name}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
books: [{
name: '书名1'
}, {
name: '书名2'
}, {
name: '书名3'
}]
},
methods: {
handle: function() {
this.status = this.status === 1 ? this.status = 2 : this.status = 1
}
}
})
</script>
</body>
</html>
分隔符 in 前的语句使用括号 第二项就是 books 当前项的索引
v-for还可以遍历数组，以及遍历对象
v-on
vue事件处理的v-on相当于JavaScript中的onclik事件，缩写是 @
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<input type="text" @input="handleInput()" placeholder="你的名字" />
<hl>你好，{{name}}</hl>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'asd'
},
methods: {
handleInput: function() {
alert("感受到输入")
}
}
})
</script>
</body>
</html>
vue的修饰符
| 修饰符 | 作用 |
|---|---|
| .lazy | 当change的时候改变，而不是input的时候改变 |
如下所示
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="name" placeholder="你的名字" />
<hl>输入完成后改变，{{name}}</hl>
<br />
<input type="text" v-model="names" placeholder="你的名字" />
<hl>一边输入一边更新数据，{{names}}</hl>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: '',
names:''
},
methods: {
handleInput: function() {
alert("感受到输入")
}
}
})
</script>
</body>
</html>
| 修饰符 | 作用 |
|---|---|
| .trim | 自动过滤首尾的空格 |
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<input type="text" v-model.trim="name" placeholder="你的名字" />
<hl>过滤首位空格，{{name}}</hl>
<br />
<input type="text" v-model="names" placeholder="你的名字" />
<hl>未过滤首位空格，{{names}}</hl>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
name: '',
names:''
},
methods: {
handleInput: function() {
alert("感受到输入")
}
}
})
</script>
</body>
</html>
| 修饰符 | 作用 |
|---|---|
| .stop | 阻止单击事件冒泡 |
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app" @click="doOut">
<button type="button" @click="dothis"></button>
//<button type="button" @click.stop="dothis"></button>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {},
methods: {
dothis: function() {
alert("1")
},
doOut:function(){
alert("2没有被阻止")
}
}
})
</script>
</body>
</html>
| 修饰符 | 作用 |
|---|---|
| .prevent | 阻止默认事件的发生 |
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app" @click="doOut">
<div @click.capture="doOut" style="border:1px #188eee solid;">
<a href="www.baidu.com" @click.prevent="dothis">百度链接</a>
//没有prevent的时候可以实现a链接的跳转
<!-- <a href="www.baidu.com" @click.prevent="dothis">百度链接</a> -->
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {},
methods: {
dothis: function() {
alert("1")
},
doOut: function() {
alert("2没有被阻止")
}
}
})
</script>
</body>
</html>
| 修饰符 | 作用 |
|---|---|
| .capture | 触发事件由外到内 |
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app" @click.capture="doOut">
<a href="#" @click.capture="dothis">百度链接</a>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {},
methods: {
dothis: function() {
alert("1")
},
doOut: function() {
alert("2没有被阻止")
}
}
})
</script>
</body>
</html>
| 修饰符 | 作用 |
|---|---|
| .self | 只能触发自己范围内的数据 |
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app" @click.self="doOut">
<a href="#" @click.self="doOut">百度链接</a>
<a href="#" @click.self="dothis">百度链接</a>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {},
methods: {
dothis: function() {
alert("1")
},
doOut: function() {
alert("2没有被阻止")
}
}
})
</script>
</body>
</html>
| 修饰符 | 作用 |
|---|---|
| .once | 只能执行一次 |
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app" @click="doOut">
<a href="#" @click.once="dothis">百度链接</a>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {},
methods: {
dothis: function() {
alert("1")
},
doOut: function() {
alert("2没有被阻止")
}
}
})
</script>
</body>
</html>
| 修饰符 | 作用 |
|---|---|
| .passive | 告诉我们的浏览器，这个是默认执行的，不必再去查询是否为默认事件，可以提高流畅性 |
注意：注：passive和prevent冲突，不能同时绑定在一个监听器上
参考网址：https://www.jianshu.com/p/b12d0d3ad4c1
| 键盘修饰符 | 作用 |
|---|---|
| . | 告诉 |
参考网址：https://blog.csdn.net/qq_42238554/article/details/86592295
参考数据《vue.js实战》–梁灏
扫一扫
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
