vue4.模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

本文使用的style

<style>
        #app-5 {
            color: red;
        }
        #test {
            color: dodgerblue;
        }
    </style>

插值

插值有文本,html,attribute,javascript表达式

<h1>插值</h1>
<h2>文本</h2>
    <span id="app-1">msg更新时对应的值将会更新 Message: {{ msg }}</span>
<br>
    <span id="app-2" v-once>不更新,注意但是会影响里面别的数据绑定: {{ msg }}</span>
<script>
    var app1 = new Vue({
        el: '#app-1',
        data: {
            msg: '<a href="#">hi</a>'
        }
    });
    app1.msg = '<a href="#">ni</a>';
    var app2 = new Vue({
        el: '#app-2',
        data: {
            msg: 'hi'
        }
    });
    app2.msg = 'ni';
</script>
<hr>
<h2>原始HTML</h2>
<p id="app-3">Using mustaches: {{ rawHtml }}</p>
<p id="app-4">Using v-html directive: <span v-html="rawHtml"></span></p>
<script>
    var app3 = new Vue({
        el: '#app-3',
        data: {
            rawHtml: '<a href="#">hi</a>'
        }
    });
    var app4 = new Vue({
        el: '#app-4',
        data: {
            rawHtml: '<a href="#">ni</a>'
        }
    });
</script>
<hr>
<h3>Attribute</h3>
<p>双大括号不能作用在标签的属性上,这时候需要使用v-bind指令</p>
<div id="app-5" v-bind:id="dynamicId">dynamicId</div>
<script>
    var app5 = new Vue({
        el: '#app-5',
        data: {
            dynamicId: "test"
        }
    });
</script>

<hr>
<h4>Attribute-布尔值</h4>
<p>如果isButtonDisabled是false将不会被添加到button属性中,为true表示被禁用</p>
<button id="app-6" v-bind:disabled="isButtonDisabled">Button</button>
<script>
    var app6 = new Vue({
        el: '#app-6',
        data: {
            isButtonDisabled: true
        }
    });
</script>

<hr>
<h2>使用javascript表达式</h2>
<p>注意只能使用单个表达式像:var a = 1这种属于语句不会生效,if语句也不会生效,可以使用三元表达式</p>
<div id="app-7">
    {{ number+1 }}
    <br>
    {{ ok==='YES' ? 'YES' : 'NO' }}
    <br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id[0]">{{ id[0] }}</div>
</div>
<script>
    var app7 = new Vue({
        el: '#app-7',
        data: {
            number: 1,
            ok: 'YES',
            message: 'hello',
            id: [1]
        }
    });
</script>

指令

<hr>
<h1>指令</h1>
<p>指令是带有v-前缀的特殊attribute,指令attribute的值预期是一个单个javascript表达式(v-for例外),指令的职责是,当表达式的值发生改变的时候,将其产生的连带影像,响应式地作用域DOM.</p>
<hr>
<h2>参数</h2>
<p>一些指令能够接受一个参数,在指令名称之后以冒号表示.例如,v-bind指令可以用于响应式地更新HTML attribute:例如"&lta v-bind:href="url"&gt&lt/a&gt"<br>
    在这里href是参数,告知v-bind指令将该元素的href attribute与表达式 url 的值绑定.另一个例子是v-on指令,它用于监听DOM事件:
    "&lta v-on:click="doSomething"&gt...&lt/a&gt"
    <br>
    在这里参数是监听的事件名.我们也会更详细地讨论事件处理
</p>

<h2>动态参数</h2>
2.6新增,可以用方括号括起来的javascript表达式作为一个指令的参数:
"&lta v-bind:[attributeName]="url"&gt...&lt/a&gt"
<br>
这里的attributeName会被作为一个javascript表达式进行动态求值,求得的值将会作为最终的参数来使用.例如:如果你的Vue实例有一个data property attributeName,其值为href,那么这个绑定将等价于v-bind:href,同理也可以使用一个动态的事件名绑定处理函数
<br>
需要注意的是,在DOM中使用模板时,还需要避免使用大写字符来命名键名,因为浏览器会吧把attribute名全部强制转为小写.在动态的参数表达式中,方括号内异常值为null,这个特殊的null值也可以被显性地用于移除绑定.任何其它非字符串类型的值都将会触发一个警告.对于方括号内的表达式,如果有空格和引号,放在HTML attribute名里是无效的.

<hr>

缩写

<h2>缩写</h2>
v-bind缩写:
<!-- 完整语法 -->
&lta v-bind:href="url"&gt...&lt/a&gt

<!-- 缩写 -->
&lta :href="url"&gt...&lt/a&gt

<!-- 动态参数的缩写 (2.6.0+) -->
&lta :[key]="url"&gt ... &lt/a&gt

v-on缩写:
<!-- 完整语法 -->
&lta v-on:click="doSomething"&gt...&lt/a&gt

<!-- 缩写 -->
&lta @click="doSomething"&gt...&lt/a&gt

<!-- 动态参数的缩写 (2.6.0+) -->
&lta @[event]="doSomething"&gt ...&lt/a&gt