Vue.js 模板语法

Vue.js 模板语法

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

插入值

可以操作子元素，插入数据
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号)的文本插值：
Message: {{ msg }}
插入的值当中还可以写表达式：

	{{ number + 1 }} 变量加1
	{{ ok ? 'YES' : 'NO' }} 三元表达式
	{{ message.split('').reverse().join('') }} 字符串反序
	<a v-bind:href="url">链接文字</a> 绑定链接（属性）

	<a v-bind:href="url" v-bind:title='tip'>百度网</a>

指令

指令 (Directives) 是带有“v-”前缀的特殊属性。
指令属性的值：预期是单个JavaScript表达式。
指令的职责是：响应式地作用于DOM。
常见的指令有v-bind、v-if、v-on。
v-if指令：是否存在DOM

	<!-- 根据"bool"的布尔值来插入/移除 <p> 元素 -->
	<p v-if="bool">是否显示这一段</p>

缩写
v-bind简写方式：绑定属性

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

v-on简写方式：绑定事件

	<!-- 完整语法 -->
	设置监听按钮的click事件来执行fn方法
	<button v-on:click="fn">按钮</button>
	<!-- 缩写 -->
	<button @click="fn">按钮</button>