三、模板语法

1.文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

通过v-once指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。

2.原始HTML

v-html指令

3.参数

一些指令能够接受一个“参数”,在指令名称之后以冒号形式显示,eg:v-bind,v-on

4.修饰符 .

以半角句号. 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

5.缩写

频繁使用的指令进行了缩写:

v-bind缩写:

v-on缩写@

四、计算属性和侦听器

1.计算属性 computed

计算属性缓存vs方法method:

我们可以将同一个函数定义成一个方法或者计算属性。两种方式最终结果确实是完全相同的,不同的是计算属性是基于他们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求职,若相关依赖没有变化,多次访问计算属性会立即返回之前的结果,而不必再次执行函数。相比之下,每当触发重新渲染时,调用方法总会再次执行函数。

计算属性vs侦听属性watch:

计算属性的setter:

计算属性默认只有getter,需要时也可以提供一个setter。

2、侦听器 watch

计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。当需要在数据变化时执行异步或开销较大的操作,这个方式是最有用的。

除了watch以外,还可以使用命令式的vm.$watch

vue教程自学笔记(二)的更多相关文章

  1. vue教程自学笔记(一)

    一.介绍 1.指令 指令带有前缀v-,以表示它们是Vue提供的特殊特性.eg:v-bind,v-if,v-for,v-on,v-model(实现表单输入和应用状态之间的双线绑定) v-bind跟v-o ...

  2. vue教程自学笔记(三)

    五.Class与Style绑定 可以用v-bind用于class和style,表达式结果类型除了字符串,还可以是对象或数组. 1.绑定HTML Class 对象语法:给v-bind:class传递一个 ...

  3. 黑马JVM教程——自学笔记(二)

    三.垃圾回收 3.1.如何判断对象可以回收 3.1.1 引用计数法 弊端:循环引用时,两个对象的计数都为1,导致两个对象都无法被释放 3.1.2 可达性分析算法 JVM中的垃圾回收器通过可达性分析来探 ...

  4. webpack4 自学笔记二(typescript的配置)

    全部的代码及笔记都可以在我的github上查看, 唤醒star: https://github.com/Jasonwang911/webpackStudyInit/tree/master/typesc ...

  5. vue.js学习笔记(二)——vue-router详解

    vue-router详解 原文链接:www.jianshu.com 一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a> ...

  6. vue.js学习笔记(二):如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

  7. 简明Python教程自学笔记——命令行通讯录

    [前言]学习Python已经有一段时间了,相关的书籍资料也下载了不少,但是没有一本完整的看完,也没有编出一个完整的程序.今天下午比较清闲就把<简明Python教程>看了一遍,然后根据书里面 ...

  8. JDK源码阅读-------自学笔记(二十四)(java.util.LinkedList 再探 自定义讲解)

    一.实现get方法 1.一般思维实现思路 1).将对象的值放入一个中间变量中. 2).遍历索引值,将中间量的下一个元素赋值给中间量. 3).返回中间量中的元素值. 4).示意图 get(2),传入角标 ...

  9. 黑马JVM教程——自学笔记(一)

    一.引言 1.1.什么是JVM 定义: Java Virtual Machine - java的运行环境(java二进制字节码的运行环境) 好处: 一次编写,导出运行 自动内存管理,垃圾回收功能 数组 ...

随机推荐

  1. python基础(十三) cmd命令调用

    python cmd命令调用 关于python调用cmd命令: 主要介绍两种方式: 1.python的OS模块. OS模块调用CMD命令有两种方式:os.popen(),os.system(). 都是 ...

  2. day05 Python中的set集合

    集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 1.去重,把一个列表变成集合,就自动去重了. 2.关 ...

  3. [转载] HTTP 协议中 URI 和 URL 的区别

    出处:https://blog.csdn.net/qq_26975307/article/details/54429760 HTTP = Hyper Text Transfer ProtocolURI ...

  4. C++ STL 顺序容器--list + 关联容器

    list 双向链表,可以双向遍历,既指向前驱节点,又指向后继但不能随机访问任意元素,可动态增加或者减少元素,内存管理自动完成,增加任何元素都不会使迭代器失效, 删除元素时,除了指向当前被删元素的迭代器 ...

  5. Html Title 标签

    Html Title 标签 Title 是 HTML Head 内部标签 <html> <head> <!-- Title标签:HTML的标头标题 --> < ...

  6. java excel大数据量导入导出与优化

    package com.hundsun.ta.utils; import java.io.File; import java.io.FileOutputStream; import java.io.I ...

  7. vue style background

    vue 动态加载背景图 :style="{backgroundImage: 'url('+ item.imgList[0] +')',backgroundRepeat:'no-repeat' ...

  8. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  9. BZOJ5487: [Usaco2018 Dec]Cowpatibility

    Description 研究证明,有一个因素在两头奶牛能否作为朋友和谐共处这方面比其他任何因素都来得重要--她们是不是喜欢同 一种口味的冰激凌!Farmer John的N头奶牛(2≤N≤50,000) ...

  10. Globecom 2018 投稿过程

    Globecom 2018 投稿过程 IEEE 通信领域旗舰型会议 Globecom 2018 将于近日提交 Camera-Ready 稿件.回顾今年投稿过程,虽麻烦不断但也不算特别曲折,本篇随笔记录 ...