这是我参与「第四届青训营 」笔记创作活动的第2天
三、Vue模板语法
Vue模板语法有两大类：
1、插值语法： 功能：用于解析标签体内容 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
2、指令语法： 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件等）
举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写表达式，且可以直接读取到data中的所有属性
备注：Vue中有很多指令，且形式都是：v-????
<!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>Document</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">点我进入链接</a>
<a :href="school.url">点我进入链接</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'ljx', // 如果存在多个name，以最后一个的值为准
school:{
url:'https://www.baidu.com/', // 多层
}
}
})
</script>
</html>
四、数据绑定
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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue -->
<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">
<!-- 简写 -->
单向数据绑定：<input type="text" :value="name"><br>
双向数据绑定：<input type="text" v-model="name">
<!-- 错误代码 -->
<h2 v-model:x="name">你好哦</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'ljx',
}
})
</script>
</html>
五、el与data的两种写法
el与data的两种写法
1、el的两种写法
（1）new Vue 时配置el属性
（2）先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
2、data的两种写法
（1）对象式
（2）函数式
3、一个重要的原则：不能写箭头函数，否则this不再是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>Document</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
// el的两种写法
const vm = new Vue({
// el:'#root', el第一种写法
data:{
name:'ljx',
}
})
console.log(v)
vm.$mount('#root') // el第二种写法 mount挂载
// data的两种写法
new Vue({
el:'#root',
// data第一种写法：对象式
data:{
name:'ljx',
},
// data第二种写法：函数式
data() {
console.log('@@@',this) // 此处this是Vue实例对象
return{
name:'ljx'
}
}
})
</script>
</html>
六、理解MVVM模型
1、M：模型（Model）：对应data中的数据
2、V：视图（View）：模板
3、VM：视图模型（ViewModel）：Vue实例对象
根据代码可知：
（1）data中的所有属性，最后都出现再了vm身上
（2）vm身上的所有属性及Vue原型上的所有属性，再Vue模板中都可以直接使用
七、数据代理
1、回顾Object.defineProperty方法
<!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>Document</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
let number = 18
let person = {
name:'张三',
sex:'男',
}
// 添加属性方法
Object.defineProperty(person, 'age', {
value:18,
enumerable:true, // 控制属性是否可以枚举，默认值是false
writable:true, // 控制属性是否可以被修改，默认值是false
configurable:true, // 控制属性是否可以被删除，默认值是false
// 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
get() {
return number
},
// 当有人读取person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
set(value) {
number = value
},
})
</script>
</body>
</html>
2、什么是数据代理
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
<!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>Document</title>
</head>
<body>
<script type="text/javascript">
let obj1 = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2, 'x', {
get() {
return obj1.x
},
set(value) {
obj1.x = value
}
})
</script>
</body>
</html>
3、Vue中的数据代理
1、Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
2、Vue中数据代理的好处：更加方便的操作data中的数据
3、基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上；
为每一个添加到vm上的属性，都指定一个getter/setter；
在getter/setter内部去操作（读/写）data中对应的属性。
本篇总结：
这篇笔记的主要内容是介绍Vue内，Vue的模板语法、数据绑定、el与data的区别、理解MVVM模型、数据代理这五方面内容的概括和实践。
-
Vue的模板语法包括插值语法和指令语法
-
数据绑定分为单向绑定和双向绑定
-
el与data的两种书写方式
-
MVVM中M、V、VM分别的含义与功能
-
什么是数据代理？数据代理的原理等等
今天也是有收获的一天~
