vue模板语法及操作

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cygodwg/article/details/80780129

vue使用了基于html的模板语法，所有的vue.js的模板语法是合法的html。

1、文本

    使用了{{}}双大括号的形式

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

    {{msg}}会被替代为对应数据对象上的msg属性的值，并在绑定数据对象的msg发生改变，内容也会随之变化。

    使用v-once指令，执行一次插值，之后不会变化。

    

<span v-once>这个将不会改变: {{ msg }}</span>

2、原始HTML

    双大括号会将数据解释为普通文本(即连带标签一并显示)，而非html代码，为输出真正的html，需要使用v-html

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

3、特性

    Mustache 语法不能直接作用在html特性上，此处可以使用v-bind

<div v-bind:id="dynamicId"></div>

    <script type="text/javascript">

var app = new Vue({
el:'#app',
data:{
dynamicId:'dyid'
}
});

</script>

3、vue数据绑定可支持javascript

可以试下下列简单实例

<div id="app">
{{number+1}}
<br>
{{ok? 'YES' : 'NO'}}
<br>
{{message.split('').reverse().join('')}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">

var app = new Vue({
el:'#app',
data:{
number:1,
ok:false,
message:'hello'
}
});

</script>

表达式会在所属vue实例的数据作用域下作为js被解析，但是只能包含单个表达式，下面的例子就不会生效：

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

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

4、指令

指令是带有v-前缀的特殊特性，指令特性预期值是单个js表达式（v-for除外）

指令职责：当表达式的值改变时，将其产生的连带影响作用域dom。

参数：一个指令能够接受一个参数，在指令名称之后以冒号表示。v-bind:href v-bind:class

v-on可用于监听事件

   

<a v-on:click="doSomething">...</a>

v-bind与v-on缩写

    

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>