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>
以上是本期全部内容,欲知后事怎样,请听下回分解<( ̄︶ ̄)↗[GO!]