02 - Vue入门：模板语法

模板语法

1. 插值，遵循Mustache语法

       <h1>{{ message }}</h1>
       ```
   
   

2. 输出原始的HTML文本，需要使用到 v-html 指令

   	<div id="app">
   		原始的HTML文本：{{ rawHtml }}
   		<span v-html="rawHtml"></span>
   	</div>
   

   其中{{ rawHtml }} 被渲染为一段文本，而包含v-html属性的标签被渲染为HTML。

3. v-once 指令作用在标签属性上，表示该标签内的插值只会被渲染一次

4. 插值中可以使用JavaScript表达式，例如：三目运算、++、–、字符串处理函数

5. 由于插值不能作用与HTML标签的属性上，所以需要使用v-bind指令，将数据绑定到标签的属性上

   <div v-bind:id="eleId"></div>
   <script>
   	var app = new Vue({
           ...
           data: {
               eleId: "content"
           }
   	})
   </script>
   

   这样<div>标签的id属性就与eleId变量之间建立了双向绑定关系。

6. v-on 指令用来监听DOM事件

   <button v-on:click="handleClick"></div>
   <script>
   	new Vue({
           ...
           methods: {
               handleClick: function () {
                   // do something
               }
           }
   	})
   </script>
   

   对于<button>上的单击事件就会触发handleClick()函数的执行。

   修饰符

   用来指示指令应该以一种特殊的方式绑定

   <form v-on:submit.prevent="handleSubmit"></form>
   

   .prevent 修饰符指示在触发submit事件的时候，执行 event.preventDefault()

   v-bind 和 v-on 指令的语法糖

   v-bind:id='eleId' === :id='eleId'
   v-on:click='handle' === @click='handle'