Vue的模版语法有两大类:
1.插值语法:
功能:用于解析标签体内容。
写法: {{xxx}},xxx是js表达式
2.指令语法:
功能:用于解析标签。(包括:标签属性,标签体内容,绑定事件…)
<div id="root">
<h1>hello,{{school}}</h1>
<a v-bind:href="url">百度</a>
<a :href="platform.url1.toUpperCase()">{{platform.name}}</a>
<!-- “v-bind:”可以简写成“:” -->
</div>
<script>
new Vue({
el: "#root",
data: {
school: "哔站",
url: "http://www.baidu.com",
platform: {
url1: "http://www.atguigu.com", //网址必须加http
name: "尚硅谷",
},
},
});
Vue.config.productionTip = false;
</script>
其中指令语法的数据绑定有两种方式:
单向绑定:V-bind
双向绑定:V-model
注意:双向绑定一般用于表单类元素,也就是输入类元素:input,checkbox,radio,select,textarea。因为其含有value可以实现双向交互。
<div id="root">
单向数据绑定:<input type="text" v-bind:value="name" /><br />
双向数据绑定:<input type="text" v-model:value="name" />
</div>
<script>
new Vue({
el: "#root",
data: {
name: "尚硅谷",
},
});
</script>