总结:
插值语法:
功能:用于解析标签体内容
写法:{undefined{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)
举例:v-bind:href=“xxx” 或 简写为 :href=“xxx”,xxx同样要写js表达式,且可以直接读取到data
中的所有属性
v-bind将href="url"解析为js表达式可以动态使用,如果不加就是一个值无法动态生成
备注:Vue中有很多的指令,且形式都是:v-???
<div id="content">
<!--插值语法{{XX}} XX要写成js表达式-->
<h1>插值语法</h1>
<h3>hello,{{name}}</h3>
<hr />
<!--指令语法 用v-bind绑定-->
<h1>指令语法</h1>
<a v-bind:href="school.url">点我去尚硅谷学习</a>
<!-- v-bind可以简写为 : -->
<a :href="school.url">点我去{{school.name}}学习</a>
<a :href="Date.now()">点我去尚硅谷学习2</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const a = new Vue({
el:"#content",
data:{
name:"尚硅谷1",
school:{
name:"尚硅谷2",
url:"http://www.atguigu.com"
}
}
});
</script>