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. JUC(1)

    cmd目录切换 D:\>cd /d D:\Program Files\Java\jdk1.8.0_201\bin 1. JUC 简介 在 Java 5.0 提供了 java.util.concu ...

  2. webpack4 公共模块打包,怎么抽取出来一个需要经常修改的包

    项目中有一个需求: 所有页面引用了一个公共ad.js 因为广告需要不断投放新渠道,所以ad.js需要经常上线更新,这样会导致打包出来的 commons.js经常更新,缓存一下无效了.所以急需将ad.j ...

  3. NOIP2012 D2 T3 疫情控制 洛谷P1084

    题目链接:https://www.luogu.org/problemnew/show/P1084 算法:倍增,二分答案,贪心 + 瞎搞.. 背景:上学长的数论课啥也听不懂,于是前去提高组找安慰.不巧碰 ...

  4. FreeSql (十五)查询数据

    FreeSql在查询数据下足了功能,链式查询语法.多表查询.表达式函数支持得非常到位. IFreeSql fsql = new FreeSql.FreeSqlBuilder() .UseConnect ...

  5. airflow + CeleryExecutor 环境搭建

    airflow整合环境搭建 1. 整体结构 mysql -> 后端数据库 redis -> 用于broker CeleryExecutor -> 执行器 2. 环境安装 2.1,安装 ...

  6. 疑难杂症----Windows10

    现在大多数个人电脑所用的操作系统都是win10,而我们使用win10时总是会碰上各种各样的问题,所以专门写一篇博客来记录我碰上的各种问题,便于以后更快的解决问题. 一.小娜搜索不到应用问题解决方案 小 ...

  7. python实例化时带括号与不带

    1.首先这个标题题目不是很准确,但一时又想不到更好的标题所以只好用这个标题,下面我们来看看为什么. 首先我们要明白python中类的实例化是要加上括号的,那么不加括号是什么意思你,看代码 class ...

  8. (1)安装elastic6.1.3及插件kibana,x-pack,essql,head,bigdesk,cerebro,ik

    1.安装环境及程序版本 操作系统: centos6.7 jdk: 1.8.0_102 elastic: 1.6.3 kibana: 1.6.3 x-pack: 1.6.3 es-sql: 1.6.3 ...

  9. MybatisPlus报错Invalid bound statement (not found)的解决方案

    今天使用MybatisPlus,测试时报错Invalid bound statement (not found) 使用自定义的mapper接口中的方法可以执行,而调用MybatisPlus中baseM ...

  10. 2018年蓝桥杯java b组第三题

    标题:复数幂 设i为虚数单位.对于任意正整数n,(2+3i)^n 的实部和虚部都是整数.求 (2+3i)^123456 等于多少? 即(2+3i)的123456次幂,这个数字很大,要求精确表示. 答案 ...