美文网首页
模板语法

模板语法

作者: 互联网中的一个咸鱼 | 来源:发表于2019-10-27 23:40 被阅读0次

1、 插值 {{}}

文本内容

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

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

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。
无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。

通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。
但请留心这会影响到该节点上的其它数据绑定:

<span v-once>这个将不会改变: {{ msg }}</span>
原始html v-html

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

<div id="app">
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>



var app=new Vue({                   //一个vue实例
    el:"#app",
    data:{
        rawHtml:"<p>html内容</p>"
    }
})

这个 span 的内容将会被替换成为属性值 rawHtml,直接作为 HTML——会忽略解析属性值中的数据绑定。

注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。反之,对于用户界面 (UI),组件更适合作为可重用和可组合的基本单位

特性

Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令

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

2、 缩写

v-bind:xxx 缩写成 :xxx
v-on:click="xxx" 缩写成@click="xxx"

相关文章

  • beego 模版语法

    beego 模板语法指南 本文讲述 beego 中使用的模板语法,与 go 模板语法基本相同。 基本语法 go 统...

  • 模板语法、条件、循环

    模板语法 vue的特点就是,可以使用简洁的模板语法将数据声明似的渲染进DOM系统。常见模板语法有:插值:{{}}输...

  • Django的模板层

    python的模板:HTML代码+模板语法 模板语法之变量 在 Django 模板中遍历复杂数据结构的关键是句点字...

  • baiduTemplate / artTemplate

    JS引擎模板 baiduTeplate 模板语法 提供一套模板语法,用户可以定义一个模板区块,每次根据传入的数据生...

  • 关于fis框架中fis3-smarty语法总结(一)

    目录 什么是smarty fis3-smarty模板语法 基础模板框架语法html、head、style、widg...

  • Vue初学-模板语法

    模板语法 Vue使用了基于HTML的模板语法,语序开发这声明式将dom绑定在底层Vue实例的数据。Vue的模板都是...

  • 08_模板层补充

    模板层 一、模板层导入与继承 模板导入: 先码一个好看的模板 语法:{% include '模板名称' %} 模板...

  • Vue3+TS Day02 - 基础指令 Mustache、v-

    一、Vue 模板语法 1、如何在 vscode 中添加代码片段? 2、什么是模板语法? 3、Mustache 双大...

  • # artTemplate.js 模板引擎 简洁语法例子

    语法 首先同样是引入template.js 在结构中随便创建个div 创建模板(简洁的语法) 创建模板(原生语法)...

  • vue 渲染函数&jsx

    jsx react模板渲染语法

网友评论

      本文标题:模板语法

      本文链接:https://www.haomeiwen.com/subject/ajzmvctx.html