模板语法

Vue模板语法有2大类:

插值语法

功能：用于解析标签体内容

写法：，xxx是js表达式，且可以直接读取到data中的所有属性

指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）

举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性

备注：Vue中有很多的指令，且形式都是 v-xxx，此处只是拿v-bind举例

<div id="root">
	<h2>插值语法</h2>
    <h4>你好，{{ name }}</h4>
    <hr />
    <h2>指令语法</h2>
    <a v-bind:href="tencent.url.toUpperCase()" x="hello">点我去看{{ tencent.name }}1</a>
    <a :href="tencent.url" x="hello">点我去看{{ tencent.name }}2</a>
</div>

<script type="text/javascript">
	new Vue({
		el: '#root',
      	data: {
        name: 'jack',
		tencent: {
			name: '开端',
			url: 'https://v.qq.com/x/cover/mzc00200mp8vo9b/n0041aa087e.html',
        }
	}
})
</script>