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入门教程 第四篇 (属性与事件)的更多相关文章

  1. Vue入门教程 第三篇 (条件与循环)

    v-if语法(条件) 符合条件时显示(渲染)某一元素. <div id="app"> <div v-if="ok"> <h1> ...

  2. Node.js入门教程 第四篇 (流及文件操作)

    流 Stream是Node.js中的抽象接口,有不少Node.js对象实现自Stream. 所有的Stream对象都是EventEmitter 的实例. 例如:fs模块(用于读写操作文件的模块) fs ...

  3. 【转帖】Systemd 入门教程:命令篇

    Systemd 入门教程:命令篇  Copy From http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html 感觉 ...

  4. vue入门教程 (vueJS2.X)

    vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...

  5. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  6. WCF入门教程(四)通过Host代码方式来承载服务

    WCF入门教程(四)通过Host代码方式来承载服务 之前已经讲过WCF对外发布服务的具体方式. WCF入门教程(一)简介 Host承载,可以是web,也可以是控制台程序等等.比WebService有更 ...

  7. Docker入门教程(四)Docker Registry

    Docker入门教程(四)Docker Registry [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第四篇,介绍了Docker Registry,它 ...

  8. 无废话ExtJs 入门教程十四[文本编辑器:Editor]

    无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...

  9. Systemd 入门教程:实战篇

    Systemd 入门教程:实战篇 上一篇文章,介绍了 Systemd 的主要命令,这篇文章主要介绍如何使用 Systemd 来管理我们的服务,以及各项的含义: 一.开机启动 对于那些支持 System ...

随机推荐

  1. 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对象) ...

  2. vue基础技术点列表(一)

    一. vue编写需要注意的细节1.vue初始化实例时使用首字母大写,在添加全局配置时也要首字母大写(如添加组件Vue.component("",{template:"&q ...

  3. ERROR IN RESOURCESTART

    TOMCAT启动时出现这个问题,试遍了网上所有的方法就是不管用,卸载tomcat重新安装即可

  4. 让Jenkins执行GitHub上的pipeline脚本

    本文是<Jenkins流水线(pipeline)实战>系列的第二篇,上一篇搭建好了Jenkins环境并执行了一个简单的pipeline任务,当时我们直接在Jenkins网页上编写pipel ...

  5. BZOJ 刷题总结(持续更新)

    本篇博客按照题号排序(带*为推荐题目) 1008 [HNOI2008]越狱 很经典的题了..龟速乘,龟速幂裸题,, 1010 [HNOI2008]玩具装箱toy* 斜率优化 基本算是裸题. 1012 ...

  6. selenium IDE的断言与验证

    断言 验证应用程序的状态是否同所期望的一致.常见的断言包括验证页面内容,如标题是否为X或当前位置是否正确等等 断言被用于4种模式+5种手段: Assert Assert断言失败时,该测试将终止 ver ...

  7. [原创] 为Visio添加公式编辑器工具栏按钮

    前言 作为理工科的学生,在写论文时,难免会在示意图中添加一些公式来说明研究内容.常用的画图工具就是 Visio .而常用的公式编辑器就是 Mathtype .对于 Word 这种软件,Mathtype ...

  8. js中对时间的操作

    我们先来看一下如何获取当前时间: var date = new Date() //输出:Tue Jul 02 2019 10:36:22 GMT+0800 (中国标准时间) 紧接着,我们来获取相关参数 ...

  9. Ubuntu+docker+gitlab安装和使用

    以前自己写的代码都是在本地,因为都是自己一个人维护,现在交给团队维护了,所以想着搭建一个gitlab 1,拉镜像 安装非常简单 docker search gitlab  搜索镜像 docker pu ...

  10. selenium基于java 一 软件安装

    学习网站 http://www.testclass.net/selenium_java/ 一·安装java环境及eclipse,网上教程较多不讲 二·下载火狐浏览器(旧版) 下载地址:链接: http ...