开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术-vue 指令-单向和双向绑定】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11306
前端技术-vue 指令-单向和双向绑定
内容简介:
一、v-bind 指令
二、双向数据绑定
一、v-bind 指令
V-bind 特性被称为指令。指令带有前缀V-
除了使用插值表达式{ { } }进行数据渲染,也可以使用 v-bind 指令,它的简写的形式就是-个冒号(:)
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset = "UTF-8" >
<meta name= "viewport" content= "width = device-width, initial-scale= 1.0" >
<meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
<title>Document</title>
</head>
<body>
<div id= "app">
<! -- v-bind指令
单向数据绑定
这个指令一般用在标签属性里面,获取值
-- >
<hl v-bind: title = "message">
{{content}}
</hl>
执行: 我是标题
< !--简写方式--〉
<h2: title= "message">
{{content}}
</h2>
</div>
<script src= "vue.min.js"></script>
<script>
new Vue({
el: '#app' ,
data: {
content: '我是标题' ,
message: '页面加载于' + nev Date(). toLocaleString()
}
})
</script>
</body>
</html>
二、双向数据绑定
双向数据绑定和单向数据绑定:使用v-model进行双向数据绑定
<div id = "app">
< input type= "text" v-bind:value = "searchMap.keyWord"/>
<! --双向绑定-- >
< input type= "text" v-model = "searchMap.keyWord/>
<p>{{searchMap. keyWord}}</p>
执行:
尚硅谷 尚硅谷
尚硅谷
</div>
<script src= "vue.min.js"></script>
<script>
new Vue({
el: '#app' ,
data: {
searchMap: {
keyWord: "尚硅谷"
}
