1. Vue模板语法有两大类
1. 插值语法
1.1 功能：用于解析标签体内容
1.2 写法：{{xxx}} xxx是js表达式，并且可以直接读取到data中的所有属性
2. 指令语法
1.1 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）
1.2 举例：v-bind:href="xxx" 或 简写为 :href="xxx", xxx同样要写js表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>插值语法</h2>
<h2>你好, {{name}}</h2>
<hr>
<h2>指令语法</h2>
<a v-bind:href="url">跳转到百度1</a>
<a :href="url">跳转到百度2</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data:{
name: 'jack',
url: 'http://www.baidu.com'
}
})
</script>
</body>
</html>
2. Vue中有两种数据绑定方式：
1. 单向绑定
单向绑定 v-bind：数据只能从data流向页面
2. 双向绑定
双向绑定 v-model：数据不仅能从data流向页面，还可以从页面流向data
注意：
1. 双向绑定一般应用在表单元素上，如：input、select等
2. v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name">
<br>
双向数据绑定：<input type="text" v-model:value="name">
<h2 v-model:x="name">刘恺威</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#root',
data:{
name: '刘恺威',
url: 'http://www.baidu.com'
}
})
</script>
</body>
</html>
|