Vue 之模板语法
前期案例引入
引入错误案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "root">
<h1>差值语法</h1>
<h3>你好,{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a href={{url}}>点我去尚硅谷学习1</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data:{
name:'jack',
url:'http:www.atguigu.com'
}
})
</script>
</body>
</html>
页面显示
正确写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "root">
<h1>差值语法</h1>
<h3>你好,{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="url">点我去尚硅谷学习1</a>
<a :href="url">点我去尚硅谷学习2</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data:{
name:'jack',
url:'http:www.atguigu.com'
}
})
</script>
</body>
</html>
v-bind:href bind是绑定的意思,v-bind 是vue里面的指令
vue 里的指令都有一个特点:是v-开头
v-bind:href=‘url’ 这么写之后,引号里面的 url 当做 js 表达式去执行了
将引号里面的表达式的执行结果绑定给 href
v-bind: 可以简写成 : (冒号)
什么时候用差值语法?什么时候用v-bind指令?
- 差值语法用于指定标签体内容(如 “< h1> 这里面的内容就是标签体内容< /h1>”)
- v-bind 指令负责标签属性(如" < a :href=“url”>点我去尚硅谷学习2</ a>")
总结:
Vue 模板语法有2大类:
- 差值语法:
功能:用于解析标签体内容
写法:{{xxxx}},xxxx是 js 表达式,且可以直接读取到data中的所有属性 - 指令语法:
功能:用于解析标签
(包括:标签属性、标签体内容、绑定事件…)
举例:v-bind:href = “xxxx” 或 简写为 :href=“xxx”,xxxx 同样要写 js 表达式且可以直接读取到data 中的所有属性
备注:Vue中有很多的指令,且形式都是:v-??? ,此处我们只是拿 v-bind 举个例子
案例三:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模板语法</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "root">
<h1>差值语法</h1>
<h3>你好,{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url">点我去{{school.name}}学习1</a>
<a :href="school.url">点我去{{school.name}}学习2</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data:{
name:'jack',
school:{
name:'尚硅谷',
url:'http:www.atguigu.com'
},
}
})
</script>
</body>
</html>
数据绑定
单项绑定 v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "root">
单项数据绑定:<input type="text" v-bind:value="name"></input>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data:{
name:'尚硅谷'
}
})
</script>
</body>
</html>
页面
但是在input 框中输入,下面的值不变化,值是存在的,如下
那为什么input 框中的值变化了,vue 实例中的值为什么不变化呢?
是因为 v-bind 是单项绑定
双向绑定 v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据绑定</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id = "root">
单项数据绑定:<input type="text" v-bind:value="name"></input><br/>
双项数据绑定:<input type="text" v-model:value="name"></input>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({
el: '#root',
data:{
name:'尚硅谷'
}
})
</script>
</body>
</html>
<!-- 如下代码是错误的,因为v-model 只能应用在表单类元素(输入类元素)上 -->
<h2 v-model:x="name">你好啊</h2>
总结
Vue 中有2种绑定的方式:
- 单项绑定(v-bind):数据只能从data 流向页面
- 双向绑定(v-model):数据不仅能从data 流向页面,还可以从页面流向 data
备注:
1、双向绑定一般都应用在表单类元素上(如:input select等)
2、v-model:value 可以简写为 v-model 因为v-model 默认收集的就是value值
简写:
双项数据绑定:<input type="text" v-model:value="name"></input>
// 可以简写为:
双项数据绑定:<input type="text" v-model="name"></input>