Vue入门教程 第四篇 (属性与事件)
computed计算属性
计算属性(computed)在处理一些复杂逻辑时是很有用的。它的定义方式与methods类似。
<div id="app">
<div>
name:{{name}}
</div>
{{reversedMessage}}
</div> <script>
var vm = new Vue({
el: '#app',
data: {
name: 'Jimmy'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
return this.name+" welcome!"
}
}
})
</script>
执行结果:
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
watch监听属性
可以通过 watch 来响应数据的变化。
范例:
<div id = "computed_props">
正方形边长 : <input type = "text" v-model = "length">
正方形周长 : <input type = "text" v-model = "perimeter">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
length : 0,
perimeter:0
},
watch : {
length:function(val) {
this.length = val;
this.perimeter = this.length * 4
},
perimeter : function (val) {
this.perimeter = val;
this.length=this.perimeter/4
}
}
});
</script>
执行结果:
当操作边长或周长时,watch都会监控到值的变化从而计算出对应的值。
v-on事件绑定
v-on可以为元素绑定事件,可以用@简写。
<div id="app">
<button v-on:click="showCount1">一号按钮</button>
<button @click="showCount2">二号按钮</button>
</div> <script>
var app = new Vue({
el: '#app',
data: {
count1: 0,
count2: 0,
},
// 在 `methods` 对象中定义方法
methods: {
showCount1(){
this.count1++;
alert("一号按钮已经被点击了"+this.count1+"次");
},
showCount2(){
this.count2++;
alert("二号按钮已经被点击了"+this.count2+"次");
},
}
})
</script>
v-on的拓展
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名:
- .enter
- .tab
- .delete (捕获 "删除" 和 "退格" 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
Vue入门教程 第四篇 (属性与事件)的更多相关文章
- Vue入门教程 第三篇 (条件与循环)
v-if语法(条件) 符合条件时显示(渲染)某一元素. <div id="app"> <div v-if="ok"> <h1> ...
- Node.js入门教程 第四篇 (流及文件操作)
流 Stream是Node.js中的抽象接口,有不少Node.js对象实现自Stream. 所有的Stream对象都是EventEmitter 的实例. 例如:fs模块(用于读写操作文件的模块) fs ...
- 【转帖】Systemd 入门教程:命令篇
Systemd 入门教程:命令篇 Copy From http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html 感觉 ...
- vue入门教程 (vueJS2.X)
vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- WCF入门教程(四)通过Host代码方式来承载服务
WCF入门教程(四)通过Host代码方式来承载服务 之前已经讲过WCF对外发布服务的具体方式. WCF入门教程(一)简介 Host承载,可以是web,也可以是控制台程序等等.比WebService有更 ...
- Docker入门教程(四)Docker Registry
Docker入门教程(四)Docker Registry [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第四篇,介绍了Docker Registry,它 ...
- 无废话ExtJs 入门教程十四[文本编辑器:Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- Systemd 入门教程:实战篇
Systemd 入门教程:实战篇 上一篇文章,介绍了 Systemd 的主要命令,这篇文章主要介绍如何使用 Systemd 来管理我们的服务,以及各项的含义: 一.开机启动 对于那些支持 System ...
随机推荐
- jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr/val/text()、jq.height/width、offset()./position()./scrol Left/Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存
each 方法 $ ( selector).each(function( index,element) { } ); 参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...
- vue基础技术点列表(一)
一. vue编写需要注意的细节1.vue初始化实例时使用首字母大写,在添加全局配置时也要首字母大写(如添加组件Vue.component("",{template:"&q ...
- ERROR IN RESOURCESTART
TOMCAT启动时出现这个问题,试遍了网上所有的方法就是不管用,卸载tomcat重新安装即可
- 让Jenkins执行GitHub上的pipeline脚本
本文是<Jenkins流水线(pipeline)实战>系列的第二篇,上一篇搭建好了Jenkins环境并执行了一个简单的pipeline任务,当时我们直接在Jenkins网页上编写pipel ...
- BZOJ 刷题总结(持续更新)
本篇博客按照题号排序(带*为推荐题目) 1008 [HNOI2008]越狱 很经典的题了..龟速乘,龟速幂裸题,, 1010 [HNOI2008]玩具装箱toy* 斜率优化 基本算是裸题. 1012 ...
- selenium IDE的断言与验证
断言 验证应用程序的状态是否同所期望的一致.常见的断言包括验证页面内容,如标题是否为X或当前位置是否正确等等 断言被用于4种模式+5种手段: Assert Assert断言失败时,该测试将终止 ver ...
- [原创] 为Visio添加公式编辑器工具栏按钮
前言 作为理工科的学生,在写论文时,难免会在示意图中添加一些公式来说明研究内容.常用的画图工具就是 Visio .而常用的公式编辑器就是 Mathtype .对于 Word 这种软件,Mathtype ...
- js中对时间的操作
我们先来看一下如何获取当前时间: var date = new Date() //输出:Tue Jul 02 2019 10:36:22 GMT+0800 (中国标准时间) 紧接着,我们来获取相关参数 ...
- Ubuntu+docker+gitlab安装和使用
以前自己写的代码都是在本地,因为都是自己一个人维护,现在交给团队维护了,所以想着搭建一个gitlab 1,拉镜像 安装非常简单 docker search gitlab 搜索镜像 docker pu ...
- selenium基于java 一 软件安装
学习网站 http://www.testclass.net/selenium_java/ 一·安装java环境及eclipse,网上教程较多不讲 二·下载火狐浏览器(旧版) 下载地址:链接: http ...