Vue基础之内部指令(下)
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!]
相关推荐
安卓猴 2020-09-12
malonely 2020-07-20
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
学习web前端 2020-09-28
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
小焊猪web前端 2020-09-10
颤抖吧腿子 2020-09-04