Vue.js中模板语法的示例分析

　　介绍

这篇文章主要介绍Vue.js中模板语法的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强> Vue。js模板语法

Vue。js使用了基于HTML的模版语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。

Vue。js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。

结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

使用“胡子”语法(即用双大括号包裹)的文本插值:

<代码> & lt; span>信息:{{味精}}& lt;/span>

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

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

<强> HTML

直接用双大括号包裹只是普通文本,如果想实现HTML代码效果,需要加入<强> v-html 指令

HTML部分:

& lt; div  id=癮pp"比; 　　& lt; p> Using 胡子:{{,rawHtml }} & lt;/p> 　　& lt; p> Using  v-html 指令:,& lt; span  v-html=皉awHtml"祝辞& lt;/span> & lt;/p> 　　& lt;/div>

js部分:

var  vm =, Vue ({new  　　艾尔:& # 39;#应用# 39; 　　数据:{ 　　,rawHtml: & # 39; & lt; span 祝辞却;能够is  red & # 39; 　　} 　　});

v-html使用时<强>在跨度标签的前标签内写入“v-html=皒xx”强,相当于将数据中的值以HTML形式放入跨度标签内。

<人物>

Vue.js中模板语法的示例分析”>,</p> <p> <强>属性(属性)</强> </p> <p>胡子语法不能作用在HTML属性上,遇到这种情况应该使用v-bind指令:</p> <p>格式:v-bind:属性=氨淞棵?/p> <p> HTML部分:</p> <pre类= & lt; div  v-bind:颜色=皌extcolor"在123 & lt;/div>

js部分:

数据:{ 　　,输入textcolor:“red" 　　}

将变量输入textcolor的值“red"绑定在盒子的“color"属性上

<人物>

Vue。js中模板语法的示例分析

对于布尔属性,v-bind使用为:

& lt; button  v-bind:禁用=癷sButtonDisabled"祝辞Button

如果<强> isButtonDisabled 的值是<强> null,未定义的或<强>假强,则禁用属性甚至不会被包含在渲染出来的& lt; button>元素中。

<强> JS表达式

迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue。js都提供了完全的JavaScript表达式支持。

{{变,数据量,+,1,}},,,//{{,数据变量/表达式,?,& # 39;真正的代码& # 39;,:,& # 39;错误的代码& # 39;,}},,,//三元运算 　　{{,数据变量.split (& # 39; & # 39;) .reverse () . join(& # 39; & # 39;),}},,,//可以进行函数调用 　　 　　& lt; div  v-bind: id=? # 39;清单& # 39;,+,id"祝辞& lt;/div>

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

限制是:每个绑定都只能包含单个表达式,所以下面的例子都不会生效。

& lt; !——,这是语句,不是表达式,——比; 　　{{,var  a =, 1,}} 　　 　　& lt; !——,流控制也不会生效,请使用三元表达式,——比; 　　{{,if (好),{,return  message },}}

<强>指令

指令(指令)是带有v -前缀的特殊属性。指令属性的值预期是单个JavaScript表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。回顾我们在介绍中看到的例子:

& lt; p  v=皊een"在现在你看到我了& lt;/p>

这里,v指令将根据表达式看到的值的真假来插入/移除& lt; p>元素。

<强>参数

一些指令能够接收一个“参数”,在指令名称之后以冒号表示,例如,<强> v-bind 指令可以用于响应式地更新HTML属性值:

& lt; a  v-bind: href=https://www.yisu.com/zixun/" url " rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel="外部nofollow”>…

在这里<强> href是参数强,告知v-bind指令将该元素的href属性与表达式url的值绑定。

Vue.js中模板语法的示例分析