vue模板语法-插值详解

1.文本

数据绑定最常见的形式就是使用‘Mustache'语法（双打括号）的文本插值：

<span>message:{{msg}}</span>

使用v-once指令，也能执行一次性的插值，当主句改变时，插值处的内容不会更新。

但请留心这回影响到该节点上所有的数据绑定：

<span v-once>this will nver change:{{message}}</span>

2.纯html

双打括号会将数据解释为纯文本，而非html。为了输出html可以使用v-html指令：

<div v-html="rawhtml"></div>

被插入的内容被当做HTML---数据绑定会被忽略。注意，你不能使用v-html来

复合局部模版，因为vue不是基于字符串的模版引擎。组件更适合单人UI重用与复合的基本单元。

站点上动态渲染的任意html可能会非常危险，因为它会很容易导致XSS攻击。

请只对可信内容使用html插值，绝不要对用户提供的内容插值。

3.属性

Mustache不能在html属性中使用，应使用v-bind指令；

<div v-bind:id="dynamicId"></div>

这对布尔值的属性也有效--如果条件被求值为flase的话该属性被移除

<button v-bind:disabled="someDynamicCondition">Button</button>

4.使用JavaScript表达式

迄今为止，在我们的模版中我们一直都值绑定简单的属性键值。但实际上，对于

所有的数据绑定，Vue.js都提供了完全的Javascript表达式支持

{{nunber+1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:is="'list-'+id"></div>

这些表达式会在所属vue实例的数据作用域下作为哦JavaScript被解析。

每个限制就是，每个绑定都只能包含单个表达式，所以下面不会生效

//这句是语句不是表达式
{{var a = 1}}
//流控制也不会生效，请使用三元表达式
{{if(ok){return message}}}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date。

不应该在模板表达式中试图访问用户自定义的全局变量

以上所述是小编给大家介绍的vue模板语法-插值详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 简单的vue-resourse获取json并应用到模板示例

    不说废话上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue js</title> <style> .completed { text-decoration: line-through; } .something { color: red; } </style> <

  • 简单谈谈Vue 模板各类数据绑定

    『天下武功,唯快不破』√,这一直是对武学造诣方面的追捧,虽然对于这个丝毫不会:更是对待现实工作不懈渴求,乃至苛求.因为这已不是遁隐修行,而是职场卖命,唯有先快速解决需求,方能攫取更为充盈的时间去深究技术机理,以使臻于更强,更强而优于快,如此优良循环得以形成.言归正传,作为前端ER,一度觉得,这 Vue 的诞生,好比一柄倚天利器,其易上手,写以及运行也都很高效,十分让人爱不释手:但这易上手,倒不等于容易精通,蛮多东西都需悉心学习.练习.理解,才能运用自如. 在使用 Vue 开发过程中,那基于 Do

  • vue模板语法-插值详解

    1.文本 数据绑定最常见的形式就是使用'Mustache'语法(双打括号)的文本插值: <span>message:{{msg}}</span> 使用v-once指令,也能执行一次性的插值,当主句改变时,插值处的内容不会更新. 但请留心这回影响到该节点上所有的数据绑定: <span v-once>this will nver change:{{message}}</span> 2.纯html 双打括号会将数据解释为纯文本,而非html.为了输出html可以使

  • 基于Vue单文件组件详解

    基于Vue单文件组件详解

    本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素. 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图.但当在更复杂的项目中,或者前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显: 1.全局定义 (Global definitions) 强制要求每个 compon

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

  • petite vue的使用示例详解

    petite vue的使用示例详解

    目录 题引: 特征及使用: 1. CDN引入: 2.module引入 3. 组件化 4. 模板组件 结尾: 题引: 这几天在公司没事做,于是上网看看有关vue的文章,忽然看到尤大大的一个文章:只有5kb大小的mini vue,好家伙,又整活了,这不得冲一冲嘛. 特征及使用: petite-vue体积更小,约5bk: 对渐进的增强更加的明显,特别是运用在服务端渲染的页面上更是便捷.系统看了一下,语法跟vue的语法绝大部分是一样了,除了增加了一些新的语法糖: 基于reactive进行响应式 peti

  • Vue.extend构造器的详解

    Vue.extend构造器的详解 1.简单介绍 Vue.extend(options) 参数:对象 用法:使用Vue构造器,创建一个"子类",参数是一个包含组件选项的对象,其中,data选项中必须是函数 描述:Vue.extend返回的是一个"扩展实例构造器",也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件作为标签的自定义元素时,会自动调用"扩展实例构造器"来生产组

  • Vue中props的详解

    Vue中props的详解

    看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数据的唯一接口. 详细一点解释就是: 一个组件可以直接在模板里面渲染data里面的数据(双大括号). 子组件不能直接在模板里面渲染父元素的数据. 如果子组件想要引用父元素的数据,那么就在prop里面声明一个变量(比如a),这个变量就可以引用父元素的数据.然后在模板里渲染这个变量(前面的a),这时候渲染

  • VUE安装使用教程详解

    如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpack或Browserify模块打包器配合使用,同时Vue也提供配套工具来开发单文件组件. 1. 安装nodejs 由于npm(nodejs package manager)是nodejs的包管理器,所以要首先安装nodejs,从官网下载相应版本安装即可https://nodejs.org/en/download/.

  • Vue生命周期区别详解

    Vue生命周期区别详解

    生命周期分类 vue每个组件都是独立的,每个组件都有一个属于它的生命周期, 从一个组件创建.数据初始化.挂载.更新.销毁,这就是一个组件所谓的生命周期. 在组件中具体的方法有: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因

  • Go模板template用法详解

    本文只介绍template的语法和用法,关于template包的函数.方法.template的结构和原理,见:深入解析Go template模板使用详解. 入门示例 以下为test.html文件的内容,里面使用了一个template语法{{.}}. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-

  • vue2从template到render模板编译入口详解

    目录 正文 1.template:模板获取 2.createCompiler:核心参数 3.createCompileToFunctionFn:缓存处理 4.compile:参数合并 小结 正文 在vue的渲染过程中,渲染核心逻辑是vm._update(vm._render(), hydrating),通过vm._render的执行获取到vNode,再通过vm._update的执行来将vNode渲染成真实视图. 其中,render函数的来源是: (1)用户手写: (2)通过vue-loader引

随机推荐