Vue 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时,Vue 能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。
插值
文本
数据绑定最常见的形式就是使用{ {...}}(双大括号)的文本插值:
<div id="app">
<p>{
{ message }}</p>
</div>
{ {...}}标签的内容将会被替代为对应组件实例中 message 属性的值,如果 message 属性的值发生了改变,{ {...}}标签内容也会更新。
如果不想改变标签的内容,可以通过使用 v-once 指令执行一次性地插值,当数据改变时,插值处的内容不会更新。
<span v-once>这个将不会改变: { { message }}</span>
Html
使用 v-html 指令用于输出 html 代码:
<div id="example1" class="demo">
<p>使用双大括号的文本插值: {
{ rawHtml }}</p>
<p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
<script>
const RenderHtmlApp = {
data() {
return {
rawHtml: '<span style="color: red">这里会显示红色!</span>'
}
}
}
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
属性
HTML 属性中的值应使用 v-bind