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!]

Vue基础之内部指令(下)的更多相关文章

  1. Vue基础之内部指令(上)

    v-if.v-else-if.v-else以及v-show 条件指令v-if.v-else-if.v-else 类似于JavaScript里的if.else-if.else,这三个指令根据表达式的值对 ...

  2. Vue基础语法与指令

    项目初始化 用vscode打开终端,输入npm init -y生成package.json 然后安装vue npm install vue 需要注意的是,我遇到了这个问题 出现原因:文件夹名和生成的p ...

  3. Vue基础知识之指令和生命周期(一)

    优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...

  4. Vue基础(环境配置、内部指令、全局API、选项、内置组件)

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  6. Vue 2.0入门基础知识之内部指令

    1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...

  7. (day65、66)Vue基础、指令、实例成员、JS函数this补充、冒泡排序

    目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...

  8. Vue - 内部指令

    1.插值 A:<span>TEXT:{{text}}</span> {{text}}会被相应的数据类型text属性值替换,当text值改变时候,文本中的值也会相应的发生变化 B ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页+指令(一)

    缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...

随机推荐

  1. iSlide——智能图表的用法

    iSlide中有一个“智能图表”功能,用于制作漂亮.明了的图表.单击“智能图表”,会弹出一个对话框.从中,可以选择权限.分类和数量级,也可以直接搜索. 实战: 我想做一个全班不同年级近视人数的统计报, ...

  2. CodeBlocks中我遇到的无法调试问题及解决方案

    CodeBlocks中遇到无法调试问题,可能有很多种,以下是我遇到的问题及解决方案 1.当无法调试时,如果IDE提示你出现下图中红色问题,说明你的调试器没有装好 2.在菜单栏点击Settings--D ...

  3. docker开发实践

    一:docker的定义和使用场景: Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VM ...

  4. flask 第三章 特殊装饰器 CBV Flask-Session WTForms

    1.flask中的特殊装饰器 前面我们讲过的装饰器函数中,用来登录验证,这次我们来介绍几个flask中的特殊装饰器 1). @app.before_request 具体的用途是: 在请求进入视图函数之 ...

  5. Python-点滴

    本节内容: python简介 安装(python,pycharm) 第一个程序(Hello,World!) 变量 用户输入 字符编码 格式化输出 if流程控制 while循环 for循环 一.Pyth ...

  6. CodeForces - 1101B

    题目: B. Accordion time limit per test 3 seconds memory limit per test 256 megabytes input standard in ...

  7. elasticsearch kabana中创建索引

    在kabana中创建索引和索引类型语法 PUT clockin{ "mappings": { "time": { } }} 查询索引下的所有数据 GET clo ...

  8. 用反射的形式将一个对象属性值赋值给另一个对象,省略点get/set方法的冗余代码

    1.本例使用的是idea 首先需要在idea中安装lombok插件,省略getter和setter方法的书写 在maven项目中加入lombok依赖 <dependency> <gr ...

  9. Context Encoder论文及代码解读

    经过秋招和毕业论文的折磨,提交完论文終稿的那一刻总算觉得有多余的时间来搞自己的事情. 研究论文做的是图像修复相关,这里对基于深度学习的图像修复方面的论文和代码进行整理,也算是研究生方向有一个比较好的结 ...

  10. OO第一单元作业总结之初识面向对象

    第一个单元的三次作业均为求导,循序渐进的让我们掌握如何构造类和方法,让整个代码是面向对象的设计而不是面向过程的设计.如果第一次作业和第二次作业你只是简单的对过程着手架构类,到了第三次作业就会变得格外麻 ...