Vue语法学习第一课——插值

2019-03-09 11:03:05 阅读：206 来源： 互联网

标签：Vue HTML 插值 myname 第一课 html 表达式大括号

学习关于Vue的插值语法

① 文本值：

　　"Mustache"语法，即双大括号

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

　　注：双大括号中的msg值改变，插入的内容也会随之改变，可通过v-once指令限制，但会影响该节点上其他的数据绑定

　　v-once 例：（只会第一次渲染，之后修改myname也不会改变v-once中的值）

 1 <div id="app0">
 2     <input type="text" v-model="myname"/>
 3     <p v-once>
 4         my name is : {{myname}}
 5     </p>
 6 </div>
 7 
 8 <script>
 9     var vm = new Vue({
10         el:"#app0",
11         data:{
12             myname : "zxq"
13         }
14     });
15 </script>

② 原生HTML ：

　　① 中的双大括号语法会将数据解释为普通文本，当我们为了输出HTML时，应该使用v-html指令

1 <p>Using Mustaches : {{rawHtml}}</p>
2 
3 <p>Using v-html directive : <span v-html = "rawHtml"></span></p>

　　注：v-html 会直接作为HTML，会忽略解析属性值中的数据绑定，即不能使用v-html符合局部模板

③ 特性：

　　双大括号不能作用在HTML特性上，需要使用v-bind指令

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

　　注：布尔特性在html中存在即暗示为true，但在v-bind中，如果disabled为null/undefined/false，则该属性甚至不会包含在渲染出来的<button>元素中

　布尔特性测试

④ JavaScript 表达式：

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

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

　　注：每个绑定只能包含单个表达式，下面的例子不会生效

　　　　{{ var a = 1 }}    <!-- 这是语句，不是JavaScript表达式 -->

　　　　{{ if( OK ) { return message } }}     <!-- 控制流不会生效，请使用三元表达式 -->

　　只能访问全局变量的白名单，如Math、Date。不能在模板表达式中访问用户自定义的全局变量

——————————————————————————————————————————————————————————————

Vue.js官方文档 : https://cn.vuejs.org/v2/guide/

标签：Vue,HTML,插值,myname,第一课,html,表达式,大括号
来源： https://www.cnblogs.com/zhuxingqing/p/10499558.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue语法学习第一课——插值