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

学习关于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>元素中

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

④ 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语法学习第一课——插值

相关文章