1.模板语法

在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,直接写渲染(render)函数,使用可选的 JSX 语法。

1.1插值

#文本    数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:<span>Message: {{ msg }}</span>

#纯html     双大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,你需要使用 v-html 指令。

#属性    Mustache 不能在 HTML 属性中使用,应使用 v-bind指令。

#js表达式   这里每个绑定都只能包含单个表达式。

<!--合格的表达式-->

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
 
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
1.2指令
指令(Directives)是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v-for,之后再讨论)。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

#参数    一些指令能接受一个“参数”,在指令后以冒号指明。

#修饰符     修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()。

1.3 Filters

#过滤器     Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。Vue 2.x 中,过滤器只能在 mustache 绑定和 v-bind 表达式(从 2.1.0 开始支持)中使用,因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换,你应该使用计算属性

<!-- in mustaches -->
{{ message | capitalize }}
 
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
1.4缩写
#v-bind     
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
#v-on
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
 
<!-- 缩写 -->
<a @click="doSomething"></a>
2.计算属性
2.1.1基础例子
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这种情况下,模板不再简单和清晰。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。这就是为什么任何复杂逻辑,你都应当使用计算属性。

<!--html-->

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<!--js-->
var vm = new Vue({
  el: '#example',
  data: {
  message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
    }
  }
})
2.1.2计算缓存 vs Methods
你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果:<p>Reversed message: "{{ reverseMessage() }}"</p>
// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是基于它的依赖缓存。相比而言,每当重新渲染的时候,method 调用总会执行函数。
2.1.3计算属性 vs WatchedProperty
Vue.js 提供了一个方法 $watch ,它用于观察 Vue 实例上的数据变动。不过,通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。
2.1.4计算setter
计算属性默认只有一个getter,也可以提供一个setter
// ...
computed: {
  fullName: {
  // getter
  get: function () {
    return this.firstName + ' ' + this.lastName
  },
  // setter
  set: function (newValue) {
    var names = newValue.split(' ')
    this.firstName = names[0]
    this.lastName = names[names.length - 1]
    }
  }
}
2.2观察Watchers
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过watch 选项,来响应数据的变化。当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。

vue基础三的更多相关文章

  1. Vue(基础三)_监听器与计算属性

    一.前言 本文主要涉及:     1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...

  2. vue基础 (三) 自动化工具(Vue CIL)

    一.自动化工具(Vue CIL) 安装过程 1. 先安装nvm 参考:https://www.jianshu.com/p/d0e0935b150a https://www.cnblogs.com/tj ...

  3. Vue基础系列(三)——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  6. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  7. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  8. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  9. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

随机推荐

  1. java基础学习笔记五(抽象类)

    java基础学习总结——抽象类 抽象类介绍

  2. linux IPC 消息队列(二)

    我在网上想找多进程之间的通信方式,发现有人写的消息队列很好,搬过来: common.h #ifndef __COMMON_H_ #define __COMMON_H_ #include <std ...

  3. Network基础(四):MAC地址表及邻居信息查看、配置接口速率及双工模式、配置交换机管理IP

    一.MAC地址表及邻居信息查看 目标: 本例要求为修改计算机名并加入工作组: 查看交换机MAC地址表 查看CISCO设备邻居信息 方案: 网络拓扑,如下图所示. 步骤: 步骤一:查看交换机sw1的ma ...

  4. 外部表及oracle数据库内存

    create table alert1 (log varchar2(1000))2 organization external3 (type oracle_loader4 default direct ...

  5. getjob

    [op@TIM getpage]$ cat job.py #coding: utf- #title..href... import urllib.request import time url=[ p ...

  6. thinkphp5一键清除缓存

    入口文件定义缓存文件路径常量 define('DS', DIRECTORY_SEPARATOR); defined('APP_PATH') or define('APP_PATH', dirname( ...

  7. 基于Tomcat如何显示服务器上的图片或文件?

    修改tomcat中conf文件夹下的server.xml文件,在 <Valve className="org.apache.catalina.valves.AccessLogValve ...

  8. 通过HttpServletResponseWrapper修改response输出流

    在项目中遇到一个问题,需要对接口返回的数据进行加密给前端.项目中的controller一般都是返回一个实体form,重写的一个视图解析器继承ModelAndViewResolver,对返回的form转 ...

  9. spring mvc 程序

    首先我们的界面在返回的时候回根据我们的配置信息进行路径的查找  然后会识别我们的控制器返回的字符串(其实就是界面的名字)而找到界面的信息,eg:如果我们返回的是success那么就会去找我们的WEB- ...

  10. 【IO流】java中文件路径(相对路径、绝对路径)相关类及方法

    原文链接:https://blog.csdn.net/Activity_Time/article/details/98034409 1. URL 菜鸟教程:Java URL处理 通常推荐对http等协 ...