Vue基础之内部指令（下）

34次阅读

共计 2192 个字符，预计需要花费 6 分钟才能阅读完成。

v-on 绑定事件监听器
直接撸代码：
<div id=”app”>
<h2> 计数器 </h2>
number：{{number}}
<button v-on:click=”add”>+</button>
<button @click=”subtract”>-</button>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script type=”text/javascript”>
var app = new Vue({
el: ‘#app’, // app 是 Vue 实例的挂在对象
data: {
number: 0
},
methods: {
add () {
this.number ++
},
subtract () {
this.number —
}
}
})
</script>
@click 等同于 v -on:click，是 Vue 的语法糖，在 methods 内定义好方法，v-on 指令监听 DOM 事件来触发一些 javascript 代码。
除了绑定 click 之外，我们还可以绑定其它事件，比如键盘回车事件 v -on:keyup.enter, 更多事件请点击查看
面试考点：Vue 事件修饰符的作用
<div id=”app”>
<div @click=”grandfather”>
<div @click=”father”>
<div @click=”son”>me</div>
</div>
</div>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script type=”text/javascript”>
var app = new Vue({
el: ‘#app’, // app 是 Vue 实例的挂在对象
data: {
},
methods: {
grandfather () {
console.log(‘grandfather’)
},
father () {
console.log(‘father’)
},
son () {
console.log(‘son’)
},
}
})
</script>
事件流图 (来自百度)：

上面一段代码，什么修饰符都不添加时，点击“me”，依次打印 son、father、grandfather
.stop
阻止冒泡, 操作子元素不会触发父元素同类事件
<div @click.stop=”grandfather”>
<div @click.stop=”father”>
<div @click.stop=”son”>me</div>
</div>
</div>
此时，只会触发子元素事件
.capture
添加事件侦查时使用事件捕获模式，从外到内依次捕获
<div @click.capture=”grandfather”>
<div @click.capture=”father”>
<div @click.capture=”son”>me</div>
</div>
</div>
依次打印 grandfather、father、son
.prevent
取消默认事件
<a href=”www.baidu.com” @click.prevent=””> 百度 </a>
链接不跳转
.self
只在添加事件的元素自身触发
.once
事件只触发一次
其他指令
v-pre（不需要表达式）
在模板中跳过 vue 的编译，直接输出原始值。就是在标签中加入 v -pre 就不会输出 vue 中的 data 值了
<div id=”app” v-pre>
<h1>{{message}}</h1>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script type=”text/javascript”>
var app = new Vue({
el: ‘#app’, // app 是 Vue 实例的挂在对象
data: {
message: ‘Hello world’
}
})
</script>
v-cloak（不需要表达式）
为了解决当网速较慢时，Vue.js 文件没有被加载完时页面上数据绑定的闪现问题。例如：
<h1>{{message}}</h1>
会闪现 {{message}}
利用 v -cloak 指令使页面在 Vue 渲染完指定的整个 DOM 后才进行显示，并且 v -cloak 会在 Vue 实例结束编译后从绑定的 DOM 上移除，结合 CSS 可以解决这个问题。
[v-cloak] {
display: none;
}
v-once（不需要表达式）
这个指令在实际开发中用的不是很多，作用是使定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。渲染一次后不会随数据变化，可以视为静态。
<div id=”app” v-once>
<input type=”text” v-model=”message”>
<h1>{{message}}</h1>
</div>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script type=”text/javascript”>
var app = new Vue({
el: ‘#app’, // app 是 Vue 实例的挂在对象
data: {
message: “Hello world” // 字面量
}
})
</script>