文档章节

Vue模板语法

tianyawhl
 tianyawhl
发布于 2017/08/22 11:42
字数 654
阅读 16
收藏 0

文本

 数据绑定最常见的形式是使用Mustache 语法(双大括号)的文本插值
<span>Message: {{ msg }}</span>
通过使用v-once指令,执行一次性插值,当数据改变时,插值处的内容不会更新,但请注意这会影响到该节点所有的数据绑定
<span v-once>这个将不会改变: {{ msg }}</span>

纯html

双大括号会将数据解释为纯文本,而非HTML,为了输出真正的html,需要使用v-html指令
<div v-html="rawHtml"></div> 这个div的内容将会被替换成为属性值rawHtml
 var app=new Vue({
        el:"#app-7",
        data:{rawHtml:"<h2>hello world</h2>"}
})

特性(属性)

Mustache 语法不能作用在HTML特性(属性)上,这种情况应该使用v-bind指令
<div v-bind:id="dynamicId"></div>
同样适用于布尔类特性
<button v-bind:disabled="isButtonDisabled">Button</button>

使用JavaScript表达式

Vue.js都提供了完全的Javascript表达式支持
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

 指令

指令是带有v-前缀的特殊属性
<p v-if="seen">现在你看到我了</p>

v-if指令将根据表达式seen的值的真假来插入/移除<p>元素

参数
一些指令能够接收一个参数,在指令名称之后以冒号表示,例如,v-bind指令可以用于响应式的更新html属性
<a v-bind:href="url"></a>
在这里href是参数,告知v-bind指令将该元素的href属性与表达式url的值绑定在一起

另一个例子是v-on指令,它用于监听DOM事件
<a v-on:click="doSomething"></a>

修饰符

修饰符Modifiers是以点 . 指名的特殊后缀,用于指出一个指令应该以特殊方式绑定,

例如.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()
<form v-on:submit.prevent="onSubmit"></form>

过滤器

Vue.js允许自定义过滤器,可被用作一些常见的文本格式化,过滤器可以用在2个地方,mustache 差值和v-bind 表达式
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数总接收表达式的值作为第一个参数,在这个例子中capitalize过滤器函数将会接收message的值作为第一个参数

 {{message1 | capitalize }}
  var app7 = new Vue({
        el: '#app-7',
         data: {
            message1: "lovestudyvue"
        },
        filters:{
          capitalize:function(value){
            if(!value) return ''
             //value = value.toString()
             return value.charAt(0).toUpperCase() + value.slice(1)
        }   
        }
       
    })
    //过滤器添加在javascript表达式的尾部,前面的是原始的数据,主要用于文本转换

缩写

v-bind缩写
完整写法<a v-bind:href="url"></a>  缩写<a :href="url"></a>
v-on缩写
<a v-on:click="doSomething"></a>   缩写<a @click="doSomething"></a>

© 著作权归作者所有

上一篇: Vue.js 计算属性
下一篇: Vue实例
tianyawhl
粉丝 8
博文 261
码字总数 138286
作品 0
常州
前端工程师
私信 提问
Vue核心50讲 | 第六回:Vue 模板语法第一式 — 插值

书接上文,上一回咱们讲到了 Vue 的黑魔法 —— 模板语法,但是咱们只是解释了什么是模板语法。关于 Vue 的模板语法要怎么使用,具体又包含哪些内容,咱们现在是一概不知。那么接下来,就让咱...

全栈小白_KingJ
06/05
0
0
关于Vue和React区别的一些笔记

这篇文章记录我在使用Vue和React的时候,对他们的不同之处的一些思考,不仅局限于他们本身,也会包括比如 等经常搭配使用的工具。因为涉及到的内容很多,可能下面的每一个点都能写成一篇文章...

言川
2018/07/30
0
0
vue中如何使用i18n实现国际化

一、前言 在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具。比如: + + + + 在4K广告机项目中使用的前端框架为Vue,故而...

gorkys
09/04
0
0
React,迁移到 Vue 的心路历程

原文https://mp.weixin.qq.com/s/-Mss0-6m9rGTasTpF2iOA 前几年我一直在使用 React。最初仅有 React,后来使用 Redux 和 React 的其他库(react-router、react-redux、prop-types 等)配合使...

大灰狼的小绵羊哥哥
2018/10/13
0
0
前端战五渣学前端——模板引擎(Handlebars.js)

最近想着写点什么实用的工具,算是偶然间又接触到了这个名词模板引擎,所以又专门的查了一下,相信在这个三大框架(😜也可能是两大框架)大行其道的时候,多少接触过,只是不知道这就是模板...

前端战五渣
05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
35分钟前
4
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
37分钟前
7
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
40分钟前
4
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
45分钟前
6
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
6
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部