插值

比较常用的就是插值,插值就是{{ foobar }}用两个大括号包起来的一个变量,显示的时候会将双大括号标签替换为这个变量的值。

基本的用法就是:

<p>{{ message }}</p>

当绑定的message变量的值发生了变化时,此处也会发生相应的变化。

使用v-once的话可以使得数据绑定只发生一次,在渲染页面的时候会使用这个变量的值来替换掉双括号标签,再之后即使变量的值发生了变化这里也不会再变化了,使用方法:

<p v-once>{{ message }}</p>

但是因为v-once是添加在元素标签上的所以会对标签上的所有插值都有效,如果只想让一个元素下的某一个插值只渲染一次而不影响同标签元素下的其它插值,那么可以在变量前加个*号来表示只渲染一次:

<p v-once>{{* message }}</p>

纯HTML

比如有的时候需要将一段HTML文本直接插入到页面中,Vue提供了一个v-html指令可以在元素上渲染HTML,元素的内容将被v-html的内容替换掉,同时其中的绑定数据将失效。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue Study</title>
</head>
<body> <div id="app">
<p v-html="rawHtml">原来的值</p>
</div> <script src="../lib/vue/vue.js"></script>
<script type="text/javascript"> var app3 = new Vue({
el: '#app',
data: {
rawHtml : '<span style="color:green;">这是一些HTML片段</span>'
}, }) </script>
</body>
</html>

渲染HTML是一种不安全的行为,如果非要进行渲染的话至少也应该做过XSS转义之类的处理。

属性

双括号{{ foobar }}的形式不能在元素的属性中使用,要想将元素的属性与某个变量绑定应当使用v-bind:foo="bar",用法如下:

<button v-bind:disabled="isDisabled">A BUTTON</button>

JS表达式

绑定的插值或者v-bind并不一定是变量名,它们可以是一个简单的JS表达式,这个JS表达式的返回值会被使用,但是需要注意的是这里只可以使用一句单个的表达式。

这个是声明语句,并不是表达式,所以不会生效

{{  var foo = 'bar' }}

下面这个也不会生效,如果想使用if的话应该使用三元表达式

{{ if(foo) { bar; } }}

下面这个三元表达式会生效:

{{ foo && bar }}

指令

指令是带有v-前缀的属性,指令的职责是当表达式的值改变时将某些行为应用到DOM上。

比如:

<button v-if="canSee">A BUTTON</button>

是根据canSee的变化来切换这个按钮的可见性。

参数

一个指令能够接受一个参数,在指令后面使用:号紧跟参数来指明,比如使用v-bind绑定元素属性时v-bind:foo='bar',比如当使用v-on绑定单击事件时v-on:click。

修饰符

修饰符是使用.指明的特殊后缀,用于指出一个指令应当使用特殊方式绑定。

<form v-on:submit.prevent="onSubmit"></form>

表示当触发submit的时候调用event.preventDefault()来抑制表单提交行为。

过滤器

过滤器设计的目的是用于文本转换,故只能放在最后用于对前面表达式的结果进行处理。

过滤器函数可以在Vue的组件中使用filters来声明,传入的第一个参数是表达式的值

new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})

过滤器可以串联。

{{ message | filterA | filterB }}

过滤器可以接受参数

{{ message | filterA('arg1', arg2) }}

指令缩写

有些指令会被频繁的时候,如果老是写全名的话可能会嫌麻烦,Vue提供了缩写。

v-bind

全:

<span v-bind:id="id"></span>

缩写:

<span :id="id"></span>

v-on

全:

<span v-on:click="onClick"></span>

缩写:

<span @click="onClick"></span>

参考文档:

1. 官方文档 https://cn.vuejs.org/v2/guide/syntax.html#文本

.

Vue笔记之模板语法的更多相关文章

  1. Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器

    模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...

  2. Angular 5.x 学习笔记(1) - 模板语法

    Angular 5.x Template Syntax Learn Note Angular 5.x 模板语法学习笔记 标签(空格分隔): Angular Note on github.com 上手 ...

  3. Vue实例与模板语法

    VUE基础使用方法 一.安装 1.NPM 在用 Vue 构建大型应用时推荐使用 NPM 安装[1].NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用.同时 Vue ...

  4. Vue介绍以及模板语法-插值

    1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架. 注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/ Vue不支持IE8及一下版本,因为 ...

  5. 前端框架VUE——数据绑定及模板语法

    一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...

  6. VUE 学习笔记 三 模板语法

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

  7. Vue API 3模板语法 ,指令

    条件# v-if# v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. v-show# v-show 指令也是用于根据条件展示一块内容.v-show ...

  8. Vue详细介绍模板语法和过滤器的使用!

    表达式 {{ XXX }}使用过滤器 {{ XXX | yyy}}使用多个过滤器 {{ XXX | yyy | yyy1}}过滤器带参数 {{ XXX | yyy(123,"zhuiszhu ...

  9. Vue.js模板语法介绍

    Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? ​ 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 ​ 使 ...

随机推荐

  1. Hadoop环境搭建(三)

    长久没用了,再次登陆Ubuntu的时候提醒密码错误,然后就进入了guest session,依然可以进入系统进行工作但身份是guest,于是开始了找回密码的漫漫长路. 首先,在guest模式下,右上角 ...

  2. ctf实验平台-成绩单

    题目链接:http://120.24.86.145:8002/chengjidan/ 平台地址:http://123.206.31.85/ 第一步:暴库 id=-1' union select 1,2 ...

  3. mybatis_mysql

    SELECT round(avg(c.AVG_DELAY_TIME)) as AVG_DELAY FROM `result_road_saturation_day` a LEFT JOIN info_ ...

  4. rabbitmq 配置用户信息

    本文摘自:http://my.oschina.net/hncscwc/blog/262246 1. 用户管理 用户管理包括增加用户,删除用户,查看用户列表,修改用户密码. 相应的命令 (1) 新增一个 ...

  5. 利用SSH secure Shell实现windows与linux之间传输文件

    在windows下安装SSH secure Shell.默认安装后有两个快捷方式. linux下需要安装openssh-server utuntu默认安装了opens是-client,所以不需要安装, ...

  6. jmeter 兼容bug 记录一笔

    这个问题我也遇到过,然后网上搜到了这篇文章! 先说下问题: 我在做性能测试时,使用JMeter搞了100个并发,以100TPS的压力压测十分钟,但压力一直出现波动,而且出现波动时JMeter十分卡,如 ...

  7. 第193天:js---Math+Error+Number+Object总结

    一.Math 随机选取 //随机选取 function getRandom (begin,end){ return Math.floor(Math.random()*(end-begin))+begi ...

  8. asp.net 中使用 pagedlist 分页并具有查询功能的实现方法

    用pagedlist在项目中做分页已N次了,今天再次用实例来实现一个带查询功能的分页例子. 1.在view代码: @using PagedList.Mvc@model BGZS.Models.User ...

  9. FZU2125_简单的等式

    题目想到了就是一个水题. 提示一下,S(x,m)是一个很小的数.(不超过100) 这样直接枚举这个数,然后求方程的整数解,并且判断是否满足条件即可. ——————(一开始还用Pollard大整数分解+ ...

  10. HDU4753 Fishhead’s Little Game——2013 ACM/ICPC Asia Regional Nanjing Online

    今天比赛又是做得好水的.被狂虐啊. 比赛两个多小时一直没出题,遒遒最先交的若干发都wa了.T_T 我独自在一遍苦思了1006这个题,还好最后把这个题目A掉了,不然又是深坑队友. 题目的意思我就不多说了 ...