这是我参与【第四届青训营】笔记创作活动的第一天。
Vue模板语法有2大类
1.插值语法：
功能：用于解析标签体内容。
写法：｛｛ＸＸＸ｝｝，ｘｘｘ是ｊｓ表达式，且可以直接读取到ｄａｔａ中的所有属性
２.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件。。。
举例：ｖ－ｂｉｎｄ：ｈｒｅｆ＝“ｘｘｘ”或简写为：ｈｒｅｆ＝“ｘｘｘ”，ｘｘｘ同样要写ｊｓ表达式
且可以直接读取到ｄａｔａ中的所有属性
备注：Ｖｕｅ中有很多的指令，且形式都是：ｖ－？？？，在这仅仅是拿Ｖｕｅ举个例
<a v-bind:href="url" x="hello">点我去尚硅谷学习1</a>
<a :href="url" x="hello">点我去尚硅谷学习2</a>
03_数据绑定
Vue中有2种数据绑定的方式：
1.单向绑定（v-bind）：
数据只能从data流向页面
2.双向绑定(v-model):
数据不仅能从data流向页面，还可以从页面流向data
备注：
2.双向绑定一般都应用在表单类元素上（如：input selec等） (如果应用在其他元素上会报错)
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值
单向数据绑定：<input type="text" v-bind:value="name"><br/>
双向数据绑定：<input type="text" v-model:value="name">
:model 和 v-model 的区别
1.v-model：通常用于表单上的双向数据绑定，如果除了表单其他组件使用时，起不到任何效果。它可以实现子组件到父组件的双向数据动态绑定。
2.:model
:model 是 v-bind:model 的缩写
只是将父组件的值传递给和子组件，但是并未实现子组件和父组件之间的双向数据绑定，当然引用数据类型除外，子组件改变了引用数据类型的数据的话，父组件的数据也会跟着改变。
04_MVVM模型
MVVM模型
1.M：模型（Model）：data中的数据
2.V：试图（View）：模板代码
3.VM：试图模型（ViewModel）：Vue实例
观察发现：
1.data中所有的属性，最后都出现在了vm身上
2.vm身上所有的属性 及 Vue 原型上所有的属性 ，在Vue模板中都可以直接使用
<div id="root">
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{name}}</h1>
<h1>测试一下1：{{1+1}}</h1>
<h1>测试一下2：{{$options}}</h1>
<h1>测试3：{{$emit}}</h1>
<h1>测试4：{{_c}}</h1>
</div>
05_数据处理
Object.defineProperty方法
给某个属性添加属性或方法，是不可枚举类型，不可遍历(无法通过Object.key(对象名)，读取到)，如果想要被遍历到，需要添加enumerable:true
<script type="text/javascript">
let number = 18;
let person = {
name: '张三',
sex: '男',
// age:18//这里的age是可以直接修改的
}
Object.defineProperty(person, 'age', {
// value: 18,
// enumerable: true, //控制属性是否可以枚举，默认值是false
// writable: true, //控制属性是否可以被修改，默认值是false，当需要被修改时，加上这句
// configurable: true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
get() {
console.log('有人读取age属性了')
return number;
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
ser(value) {
console.log('有人修改了age属性，且值是', value)
number = value;
}
})
</script>
数据代理
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -->
<script type="text.javascript">
ler obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'2',{
get(){
return obj.x;
}
ser(value){
obj.x = value;
}
})
</script>
