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>

事件流图(来自百度):

Vue基础之内部指令(下)

上面一段代码,什么修饰符都不添加时,点击“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>

Vue基础之内部指令(下)

以上是本期全部内容,欲知后事如何,请听下回分解<( ̄︶ ̄)↗[GO!]

相关推荐