2.VUE模板语法
Vue模板语法:
容器里的代码被称为“Vue模板”
“模板语法”包括两大类“插值语法”和“指令语法”
1.插值语法:
功能:用于解析标签体内容
写法:{{xxx}}, xxx是js表达式(可以得到值的js代码),且可以直接读取到“data”中的所有属性
2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...)
举例:v-bind:href="xxx" 或简写为 :href="xx", xxx同样要写js表达式,且可以直接读取到data中所有属性
备注:Vue中有很多的指令,且形式都是: v-????, 此处用v-bind举例
<body>
<!-- 准备好一个容器-->
<div id = "root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<h1>指令语法</h1>
<a v-bind:href = "url" x = "hello">链接1</a>
<a :href = "ur1" :x = "hello">链接2</a>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
name: 'jack',
url: 'http://www.baidu.com',
hello: '你好'
}
})
</script>