模板语法、计算属性和侦听器

目标

1、熟练使用vue的模板语法

2、理解计算属性与侦听器的用法以及应用场景

1. 模板语法

<div id="app">

<!-- 以下说绑定的值都可以写成js表达式形式 -->

<!-- {{}}: 双大括弧语法 -->

<!-- 如果不想让它响应更新,可以添加v-once指令(只渲染一次) -->

<p>

first: {{firstName}}<br>

last: {{lastName}}<br>

{{firstName + ' ' + lastName}}

</p>

<!-- 以下的绑定都会优先显示,也就是原本标签之间的值的会无效 -->

<!-- 使用v-html: html会被解析 -->

<p v-html="test"></p>

<!-- 使用v-text: html不会被解析,直接以文本输出 -->

<p v-text="test">123</p>

<!-- 标签属性绑定v-bind, 简写":" -->

<img v-bind:height="imgHeight" :width="imgWidth" style="border: 1px solid #000"></img>

</div>

<script>

var vm = new Vue({

el: '#app',

data: {

firstName: 'Chi',

lastName: 'Chan',

test: '<h1>哈哈哈<h1>',

imgHeight: '200px',

imgWidth: 200

}

})

</script>

2. 计算属性(computed)

计算属性和方法时不一样, 计算属性是基于他们的依赖,进行缓存, 当计算属性的相关变量发生变化才会重新进行计算, 否则都是直接从缓存中读取之前的计算结果.(这样可以降低性能的消耗)

计算属性有getter和setter, 可以分别定义其设值和取值时会执行的函数.

3. 侦听器(watch)

如果我们只需要侦听一个数据,或者要在一个数据变化的时候执行一些操作(去改动多个数据),而且这些改动可能和这个数据没有依赖关系, 那么就可以使用侦听器了.

侦听器,可以侦听一个数据的变化,然后执行相应的操作.

 

4.  使用场景

1.watch擅长处理的场景:一个数据影响多个数据   (一个变化)
2.computed擅长处理的场景:一个数据受多个数据影响  (多个变化,最终返回一个数据)

3.method相对普通,需要主动去触发,还可能会让代码变得复杂,而且如果像以上这些场景的话,使用method会有更大的性能消耗.

Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器的更多相关文章

  1. Vue学习计划基础笔记(一) - vue实例

    最近又重新看vue的文档了,计划是别人写的,之前看过一次,没有考虑太多,只考虑看懂能用就好.看完之后写过写demo,现在是零实际项目经验的,所以这一次打算细看,算是官方文档的二次产物吧,但是不是全部直 ...

  2. Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器

    目标 钩子函数 自定义指令 自定义过滤器 计算属性 监听属性 局部自定义指令 为什么需要自定义指令 为了复用,为了代码的灵活 指令的分类:全局指令,局部指令 在vm外面创建的指令 通过Vue.dire ...

  3. Vue学习计划基础笔记(六) - 组件基础

    组件基础 目标: 掌握组件的构建方式 掌握如何复用组件.父子组件如何传值.如何向父组件发送消息 掌握如何通过插槽分发内容 了解解析dom模板时的注意事项 了解动态组件 组件 组件理解起来大概上就和ph ...

  4. Vue学习计划基础笔记(五) - 表单输入绑定、组件基础

    表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...

  5. Vue学习计划基础笔记(四) - 事件处理

    事件处理 目标: 熟练掌握事件监听的方式,熟悉事件处理方式以及各类事件修饰符 理解在html中监听事件的意义 监听事件(v-on) 类似普通的on,例如v-on:click或@click就相当于普通的 ...

  6. Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染

    Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...

  7. 052_末晨曦Vue技术_处理边界情况之程序化的事件侦听器

    程序化的事件侦听器 点击打开视频讲解更详细 现在,你已经知道了 $emit 的用法,它可以被 v-on 侦听,但是 Vue 实例同时在其事件接口中提供了其它的方法.我们可以: 通过 $on(event ...

  8. vue入门(二)----模板与计算属性

    其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...

  9. Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

    目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...

随机推荐

  1. 安卓混合开发——原生Java和H5交互,保证你一看就懂!

    ** 在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的Jav ...

  2. Android的JNI调用(一)

    Android提供NDK开发包来提供Android平台的C++开发,用来扩展Android SDK的功能.主要包括Android NDK构建系统和JNI实现与原生代码通信两部分. 一.Android ...

  3. 算法-求两个有序数组两两相加的值最小的K个数

    我的思路是: 用队列,  从(0,0)開始入队,每次出队的时候,选(1,0) (0,1) 之间最小的入队,假设是相等的都入队,假设入过队的就不入了,把出队的k个不同的输出来就可以 我測试了几组数据都是 ...

  4. 接入Gobelieve IM开发平台的DEMO代码

    接入Gobelieve IM开发平台的DEMO代码, 请求头部: Authorization: Basic $base64(appid:$hex_md5(appsecret))意思是 appsecre ...

  5. SQL中的CONVERT();cast()函数

    SQLSERVER中CONVERT函数格式: CAST (expression AS data_type) 参数说明: expression:任何有效的SQLServer表达式. AS:用于分隔两个参 ...

  6. 仓位 001 998 AUFNAHME不存在(L9009)

    测试做一个物料库存561初始化时,库位是上启用了WM的.提示“C01 998 AUFNAHME 不存在”,998 库存余额的初始条目 是缺省的存储类型.用LS25在正式系统中,CO1 998下有AUF ...

  7. MySQL案例04:Cause: java.sql.SQLException: Could not retrieve transaction read-only status from server

    今天同事发现程序日志有异常抛出,询问原因,进过排查发现与java的连接参数有关系,具体处理过程如下: 一.错误信息 "message": "\n### Error upd ...

  8. 完美解决 Cydia 不能上网

    国行手机比美版.港版.韩版手机新增了网络授权的功能,iOS 10 及以上系统版本,任何应用首次打开,如果有请求网络的行为,都会提示网络请求授权的对话框. 首次打开 Cydia 并没有提示网络请求授权的 ...

  9. HCNA(二)以太网的帧结构

    一.网络通讯协议 一般地,关注于逻辑数据关系的协议通常被称为上层协议,而关注于物理数据流的协议通常被称为低层协议. IEEE802就是一套用来管理物理数据流在局域网中传输的标准,包括在局域网中传输物理 ...

  10. 关于sparkStreaming(spark on yarn)的一个坑!

    前些天我维护的一个streaming实时报表挂了,情况:数据无法实时更新增长,然后查看了报表所依赖的五张sqlserver的表,发现,只有1张的数据是正常写入的,还一张数据非正常写入,还有3张完全没有 ...