插值语法和指令语法
2021-12-19 本文已影响0人
冰点雨
总结：
vue语法模板有两大类
1.插值语法
功能：用于解析标签体内容
写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
2.指令语法
功能：用于解析标签（包括：标签属性 标签体内容 绑定事件...）
举例：v-bind:href="xxx" :href="xxx",xxx同样要写js表达式，且可以直接读取到data中的所有属性
备注：Vue多很多指令，形式都是v-???
插值语法
<h3> {{name}}</h3>
指令语法
<a v-bind:href="school.url.toUpperCase()">去{{school.name}}旅游</a>
使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>day1</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>插值语法</h1>
<h3>hello {{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url.toUpperCase()">去{{school.name}}旅游</a>
<a :href="school.url">去旅游2</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
new Vue({
el:"#root",
data:{
name:"世界",
school:{
name:'北京大学',
url:'https://www.baidu.com/'
}
}
})
</script>
</body>
</html>
