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!]
Vue基础之内部指令(下)的更多相关文章
- Vue基础之内部指令(上)
v-if.v-else-if.v-else以及v-show 条件指令v-if.v-else-if.v-else 类似于JavaScript里的if.else-if.else,这三个指令根据表达式的值对 ...
- Vue基础语法与指令
项目初始化 用vscode打开终端,输入npm init -y生成package.json 然后安装vue npm install vue 需要注意的是,我遇到了这个问题 出现原因:文件夹名和生成的p ...
- Vue基础知识之指令和生命周期(一)
优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- Vue 2.0入门基础知识之内部指令
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一 ...
- (day65、66)Vue基础、指令、实例成员、JS函数this补充、冒泡排序
目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...
- Vue - 内部指令
1.插值 A:<span>TEXT:{{text}}</span> {{text}}会被相应的数据类型text属性值替换,当text值改变时候,文本中的值也会相应的发生变化 B ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页+指令(一)
缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
随机推荐
- 非root安装fastDFS及启动
引用https://www.cnblogs.com/zzw-zyba/p/10155781.html 非root安装部分 1.解包 [bdc@svr001 setup]$ tar -xvf lib ...
- php中微信开发的转发分享
简单来说 ,一共四步 1. 微信公众平台中公众号设置”的“功能设置”里填写“JS接口安全域名”.该域名填写你的项目的域名. 2. 下载jssdk的damo,https://mp.weixin.qq ...
- mybatis一简单one2one关系xml配置
user类 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC &qu ...
- Android studio报Error:(26, 13)-v7:27.错误的解决方法
1.报错图片 2.上图我画了红圈很明显就提示报错方向就是项目文件:build.gradle 3.解决方法如下 添加此方法到项目构建.gradle文件中: repositories { maven ...
- redis学习——redis应用场景
毫无疑问,Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数据结构和数据操作,为不同的大象 ...
- Python_Mix*函数名的使用以及第一类对象,闭包,迭代器,for循环的内部机制
一:函数名的应用(第一类对象) 函数名的命名规范和变量是一样的,函数名其实就是变量名, 0)函数名可以赋值给其他变量 def func(): #定义一个名为func的函数 print('my ange ...
- python 多进程多线程的对比
link:http://www.cnblogs.com/whatisfantasy/p/6440585.html mark一下,挺详细
- redis应用--HyperLogLog
如果你负责开发维护一个大型的网站,有一天老板找产品经理要网站每个网页每天的 UV 数据,然后让你来开发这个统计模块,你会如何实现? 如果统计 PV 那非常好办,给每个网页一个独立的 Redis 计数器 ...
- mybatis 报The content of elements must consist of well-formed character data or markup. 语法格式错误
最近在写sql的时候 同时使用到了 >= 和 <= 之前只使用一个的时候 没有什么问题,今天同时使用到了两个,结果xml出现了The content of elements must co ...
- SharePoint Framework解决方案管理参考(二)
博客地址:http://blog.csdn.net/FoxDave 使用外部脚本 在使用现有的JavaScript脚本库时,开发者可以选择将它们包含在web部件代码包中,或者从外部的URL加载.从外部 ...