持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
因为最近在学vue所以一直更新vue基础吧！ 马上假期了同志们卷起来！
Vue的模板语法有两大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以读取到data中的所有属性
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）
举例：v-bind:href = "xxx" 或简写为 ：href="xxx",xxx 同样要写js表达式
备注：Vue中有很多的指令，且形式都是：v-xxx ，此处我们只是用v-bind举例子
Vue的两种数据绑定方式：
1.单向绑定（v-bind）:数据只能从data流向页面
2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：1、双向绑定一般都应用在表单类元素上（如：input、select等）
2、v-model：value 可以简写为 v-model 因为 v-model默认收集的就是value值（所以下面可以有简便写法）
例子
<! --普通写法-->
//单项数据绑定
<input type="text" v-bind：value="name"><br/>
//双向数据绑定
<input type="text" v-model:value="name"><br/>
<! --简便写法 -->
//单项数据绑定
<input type="text" ：value="name"><br/>
//双向数据绑定
<input type="text" v-model="name"><br/>//v-model默认收集的就是value值
数据代理
1.Vue中的数据代理
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data的数据
3.基本原理： 通过Object.defineProperty()把data对象中所有属性添加到vm上
为每一个添加到vm上的属性，都指定一个setter/getter。
在setter/getter内部操作（读/写）data中对应的属性 MVVM模型
1、M：模型（model）：data中的数据
2、V：视图（View）：模板代码
3、VM：视图模型（ViewModel）：Vue实例
观察发现：
1、data中的所有的属性：最后都出现在了vm身上
2、vm身上所有的属性 及 Vue原型上的所有属性，在Vue模板中都可以直接使用
Object.defineProperty属性
let number = 18
let person = {
name:'张三'，
sex：'男'
}
//利用此函数定义对应函数属性
Object.defineProperty(person,'age',{
//value：18，
//enumerable：true，//控制属性是否可以枚举，默认值是false
//writable：true，//控制属性是否可以被修改，默认值是false
//configurable：ture//控制属性是否可以被删除，默认值是false
//当读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
get(){
console.log('有人修改了age属性，且值是'，value)
number = value
}，
//当修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
set(value){
console.log('有人修改了age属性，且值是'，value)
number = value
}
})
事件的基本使用
1.使用v-on:xxx 或 @xxx 绑定事件 其中xxx是文件名
2.事件的回调需要配置再methods对象中，最终会在vm上
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了
4.methods中的配置函数，都是被Vue所管理的函数，this的指向是vm 或者 组件实例对象
5.@click = “demo” 和 @click = “demo（$event）” 效果一致，后者可以传参
Vue中的事件修饰符
- prevent：阻止默认事件（常用）
- stop：组织事件冒泡（常用）
- once：事件只触发一次（常用）
- capture：使用事件的捕获模式；
- self：只有event.target是当前操作元素时才触发事件
- passive: 事件的默认行为立即执行，无需等待事件回调执行完毕
键盘事件
- Vue未提供别名的按键，可以使用按键原始的key值去绑定，但是要注意要转为kebab-case（短横线命名）
- 系统修饰键（用法特殊）：ctrl、alt、shift、meta
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
- 配合keydown使用，正常触发事件
- 也可以使用keyCode去指定具体的按键（不推荐）
- Vue.config.keyCode.自定义键名 = 键码 可以定制别名
