标签：use ref org v-on color 三目运算 vue模板 inner 需要
vuejs使用及HTML的模板语法，可以实现声明式将DOM绑定至底层VUE实例的数据。通过模板语法将数据渲染进DOM的系统，结合响应系统，在应用状态改变时，Vue能够计算出重新渲染组件的最小代价并应用到DOM操作上。
VUE的模板语法的内容包括：插值、指令。
插值包括：文本插值、原始HTML插值、特性插值、以及使用javascript表达式实现插值。
指令：参数、动态参数、修饰符。
缩写形式是指v-bind和v-on指定可以采用缩写形式：‘v-bind:‘-->‘:’、‘v-on‘-->‘@‘。
1 <div id="user">{{userName}}</div> 2 <script> 3 new Vue({ 4 el:‘#user‘, 5 data:{ 6 userName:‘他乡踏雪‘ 7 } 8 }); 9 </script>
渲染结果：
<div id="user">他乡踏雪</div>
v-once单次渲染指令，只渲染元素和组件一次，随后的重新渲染，元素/组件及所有的子节点将被视为静态并跳过。这可以用于优化性能。
<!--v-once单次渲染--> <span v-once>{{sex}}</span>
1 <div id="user" v-html="dataHtml"></div> 2 <script> 3 new Vue({ 4 el:‘#user‘, 5 data:{ 6 userName:‘他乡踏雪‘, 7 dataHtml:‘<div><span>昵称：</span><span>他乡踏雪</span></div><div><span>职业：</span><span>前端开发工程师</span></div>‘ 8 } 9 }); 10 </script>
渲染结果：
1 <div id="user"> 2 <div> 3 <span>昵称：</span> 4 <span>他乡踏雪</span> 5 </div> 6 <div> 7 <span>职业：</span> 8 <span>前端开发工程师</span> 9 </div> 10 </div>
这里的v-html和v-text同等与element.innerHTML和element.innerText的效果。但是这两个指令不能复合局部模板，就是说不能在数据中再插入模板语法，比如“<span>{{userName}}</span>”这个段v-html数据中的复合插入userName不会生效（v-text一样不生效）。
在vue官方文档中提到，需要谨慎使用v-html指令，不要对用户提供的内容执行v-html指令，因为很容易引发XSS攻击。
1 <div id="user" v-bind:class="className">{{userName}}</div> 2 <script> 3 new Vue({ 4 el:‘#user‘, 5 data:{ 6 userName:‘他乡踏雪‘, 7 className:‘userWarpper aaa‘ 8 } 9 }); 10 </script>
渲染结果：
<div id="user" class="userWarrper">他乡踏雪</div>
v-bind可以省略不写，比如示例中的代码可以写成:class="userName",关于元素特性插值需要重点关注的是比如class多个值怎么插入，又比如style行间的样式特性值又怎么插入。这一块是个独立的内容，后面独立分析。
1 <div id="user">{{userName + ‘~丹‘}}</div> 2 <script> 3 new Vue({ 4 el:‘#user‘, 5 data:{ 6 userName:‘他乡踏雪‘ 7 } 8 }); 9 </script>
渲染结果：
<div id="user">他乡踏雪~丹</div>
这里说的JavaScript表达式插值不是说在js代码中，而是可以将js表达式插入到HTML中，这些表达式会在所属vue实例的数据作用域下被识别作为javascript被解析，但是只能包含单个表达式，所以下面的例子不会生效：
1 <!--这样的JavaScript表达式不会生效--> 2 <div>{{var userName = "他乡踏雪"}}</div> 3 <div>{{if(true){ return message }}}</div>
所以注意，三目运算可以有效执行，链式调用方法可以有效执行。
1 //可以被有效执行 2 {{ true ? ‘YES‘ : ‘NO‘ }} 3 {{ message.split(‘‘).reverse().join(‘‘) }}
vuejs内置指令集：https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
标签：use ref org v-on color 三目运算 vue模板 inner 需要
原文地址：https://www.cnblogs.com/ZheOneAndOnly/p/10977403.html
