Vue模板内容
前⾯的话
  如果只使⽤Vue最基础的声明式渲染的功能，则完全可以把Vue当做⼀个模板引擎来使⽤。本⽂将详细介绍Vue模板内容
概述
  Vue.js使⽤了基于HTML的模板语法，允许声明式地将DOM绑定⾄底层Vue实例的数据。所有Vue.js的模板都是合法的HTML ，所以能被遵循规范的浏览器和HTML解析器解析
  在底层的实现上， Vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应⽤状态改变时， Vue能够智能地计算出重新渲染组件的最⼩代价并应⽤到DOM操作上
  ⼀般地，模板内容包括⽂本内容和元素特性
⽂本渲染
【⽂本插值】
  ⽂本渲染最常见的形式是使⽤双⼤括号语法来进⾏⽂本插值，下⾯的message相当于⼀个变量或占位符，最终会表⽰为真正的⽂本内容　<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data:{
'message': '<span>测试内容</span>'
}
博客模板大全})
</script>
【表达式插值】
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
  上⾯这些表达式会在所属Vue实例的数据作⽤域下作为JS被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下⾯的例⼦都不会⽣效
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会⽣效，请使⽤三元表达式 -->
{{ if (ok) { return message } }}
  模板表达式都被放在沙盒中，只能访问全局变量的⼀个⽩名单，如Math和Date。不应该在模板表达式中试图访问⽤户定义的全局变量
  [注意]关于表达式与语句的区别
<div id="app">
{{ num + 1 }}
</div>
<script>
new Vue({
el: '#app',
data:{
'num': -1
}
})
</script>
【v-text】
  实现插值类似效果的另⼀种写法是使⽤v-text指令，该指令⽤于更新元素的innerText。如果要更新部分的innerText，需要使⽤模板插值
  [注意]v-text优先级⾼于模板插值的优先级
<div id="app" v-text="message">
</div>
<script>
new Vue({
el: '#app',
data:{
message:"This is a <i>simple</i> document"
}
})
</script>
【v-html】
  如果要输出真正的 HTML ，需要使⽤v-html指令，该指令⽤于更新元素的innerHTML
  [注意]在⽹站上动态渲染任意 HTML 是⾮常危险的，因为容易导致 XSS 攻击。只在可信内容上使⽤v-html，⽽不⽤在⽤户提交的内容上
<div id="app" v-html="message">
</div>
<script>
new Vue({
el: '#app',
data:{
message:"This is a <i>simple</i> document"
}
})
</script>
静态插值
  上⾯介绍了模板插值，⼀般地，模板插值是动态插值。即⽆论何时，绑定的数据对象上的占位符内容发⽣了改变，插值处的内容都会更新<div id="app">  {{ message }}</div>
<script>
var vm = new Vue({
el: '#app',
data:{
'message': '测试内容'
}
})
</script>
  结果如下图所⽰，vm.message的内容发⽣了改变，DOM结构中的元素内容也相应地更新
【v-once】
  如果要实现静态插值，即执⾏⼀次性插值，数据改变时，插值处内容不会更新，这时需要⽤到v-once指令<div id="app" v-once>{{ message }}</div>
<script>
var vm = new Vue({
el: '#app',
data:{
'message': '测试内容'
}
})
</script>
  由下图所⽰，vm.message改变为123时，DOM结构中元素内容仍然是“测试内容”
不渲染
【v-pre】
  如果要跳过这个元素和它的⼦元素的编译过程，只⽤来显⽰原始⼤括号及标识符，则可以使⽤v-pre指令。这样，可以减少编译时间
<div id="example" v-pre>{{message}}</div>
<script>
var vm = new Vue({
el: '#example',
data:{
//如果使⽤v-pre指令，则不会被表⽰为match
message:'match'
},
})
</script>
隐藏未编译
  ⼀般地，使⽤模板差值时，页⾯上会显⽰⼤括号及占位符。编译完成后，再转换为真正的值。如果在⽹络条件不好的情况下，这种现象更加明显
<div id="example">{{message}}</div>
<script src="unpkg/vue"></script>
<script>
var vm = new Vue({
el: '#example',
data:{
message:'match'
},
})
</script>
【v-cloak】
  这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] { display: none }⼀起⽤时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
<style>
[v-cloak]{display:none;}
</style>
<div id="example" v-cloak>{{message}}</div>
<script src="unpkg/vue"></script>
<script>
var vm = new Vue({
el: '#example',
data:{
message:'match'
},
})
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。