第一章、Vue核心
1、初始Vue
1、总结
1、想要vue工作，就需要定义一个容器，传入一个配置对象（实例化一个Vue对象）
2、root容器中也是严格遵守html语法的，只不过多了一些vue的语法
3、root容器的代码被称为容器的【模版】
4、第三句话：就是说创建Vue的对象，需要把容器，拿过来，然后进行一系列解析，然后返回给容器，进行显示
5、vue实例和容器是一一对应的
6、{{xx}}中写的是js的表达式，且xxx会自动读取到date中的所有属性
7、date中的数据一旦发生改变，页面上的数据也响应的发生改变
2、区分：js表达式和js代码（语句）
1、js表达式
1、一个表达式会生成一个值，可以放在任何一个需要的地方
2、eg:三元表达式
2、js代码（语句）
1、if(){}
2、for(){}
2、模板语法
1、Vue有两大类模板
1、插值语法
1、功能
1、解析标签体的内容
2、格式
{{}}2、指令语法
1、功能
1、用于解析标签：包括标签体、标签属性、标签体内容、绑定事件等
2、格式
1、标准格式
v-bind:href="xxx"2、简写
:href="xxx"3、注意
1、还可以进行数据对象的嵌套
2、例子：
new Vue({
el:"#root",
data:{
name:"jack",
url:"http://www.baidu.com",
age:10,
school:{
name:"学习H"
}
}
})3、调用的时候school.name就行了
3、数据绑定
1、单向绑定
1、作用：数据只能从data流向页面
2、双向绑定
1、作用：数据可以流向data，页面的数据也可以流向data
3、注意
1、双向绑定一般只能应用在表单类元素（例如input、check）
2、因为没有value值就无法影响data数据啊
3、v-model:value可以简写为v-model,默认值就是value
4、el和data的两种写法
1、el两种写法
1、第一种
1、格式
new Vue({
el:xxxxx
})2、第二种
1、格式
xxx.$mount('#root')指定2、就是先创建一个Vue的实例对象，给xxx变量，然后使用vue的内置函数进行指定
2、data的两种写法
1、第一种
1、格式
new Vue({
el:xxxxx,
data:{
yyy:yyy
}
})2、就是直接在Vue创建对象的时候写死
2、第二种
1、格式
data:function(){
return{
xxx:xxx
}
}2、就是说：我们新建一个data的方法，在方法的return写我们的数据
5、MVVM模型
1、介绍
1、M：模型（model）
1、是data中的数据
2、V:视图（View）
1、是模板的代码
3、VM：视图模型（ViewModel)
1、就是Vue的实例
2、注意
1、data中的所有属性，最后都会出现在vm身上
2、vm身上的所有属性，以及Vue原型上所有属性，在Vue模板中都可以直接使用
3、图解
1、结构
2、例子
6、数据代理
复习知识
1、在script标签中，添加一个属性age，但是age中需要改变，而不是写死
2、我们就可以用这个函数
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)就会被调用，且会收到修改的具体值
set(value){
console.log('有人修改了age属性，且值是',value)
number = value
}
})1、数据代理
1、就是说通过一个对象代理，对另一个对象中的属性进行修改
2、图示
2、总结
1、Vue中的数据代理
1、通过vm对象来代理data对象中属性的操作（读写）
2、Vue中数据代理的好处
1、更方便的操作data中的数据
2、正常：_data.name
3、数据代理：name
3、基本原理
1、通过Object.defineProperty()把data对象中所有属性添加到vm上。
2、为每一个添加到vm上的属性，都指定一个getter/setter
3、在getter/setter内部去操作（读写）data中对应的属性
7、事件
1、基本使用
1、格式
v-on:xxx
@xxx 绑定事件
其中xxx是事件名2、事件的回调需要配置在methods对象化总，最终会在vm上
3、methods中配置函数，不要用箭头函数，否则this就不是vm对象，而是windows对象了
4、methods中配置的函数，都是设备vue所管理的函数，this的指向是vm或组件实例对象
5、@click="demo"和@click="demo($event)"，效果一致，但后者可以传参
2、事件修饰符
1、修饰符
| 修饰符 | 作用 |
|---|---|
| .prevent | 阻止默认事件（常用） |
| .stop | 阻止事件冒泡（常用） |
| .once | 事件只触发一次（常用） |
| .capture | 使用事件的捕获模式 |
| .self | 只有event.target是当前操作的元素时才触发事件 |
| .passive | 事件的默认行为立即执行，无需等待时间回调执行完毕 |
2、eg：
<!-- 阻止默认事件（常用） -->
<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>3、注意：修饰符可以连续写
3、键盘事件
1、内容
1、表格
| 别名 | 按键 |
|---|---|
| 回车 | enter |
| 删除 | delete（捕获删除，和退格） |
| 退出 | esc |
| 空格 | space |
| 换行 | tab(特殊，必须配合keydown去使用) |
| up | |
| 下 | down |
| 左 | left |
| 右 | right |
2、vue未提供别名的按键
可以使用按键原始key值去绑定，但注意要转为kebab-case(短横线命名)
3、系统修饰按键（特殊用法）
1、系统修饰按键：ctrl、alt、shift、meta
2、配合keyup使用：按下修饰键的同时，再按下其他键，然后释放其他键，事件才会被触发
3、配合keydown使用，正常触发事件
4、可以指定具体按键
1、可以使用可以Code去指定具体的按键（不推荐）
5、自定义键名
1、格式
Vue.config.keyCodes.xxxx = 键码
xxx是名字
键码：是每个键对应的数字8、计算属性
1、定义
1、要用的属性不存在，要通过已有属性计算得来
2、原理
1、底层借助了Object.defineproperty方法提供的getter和setter
3、getter函数什么时候执行
1、初次读取时会执行
2、当依赖的数据发生改变时会被再次调用
4、优势
1、与methods实现实现相比，内部有缓存机制（复用），效率更高，调试方便
5、备注
1、计算属性最终会出现在vm上，直接读取使用即可
2、如果计算属性要被修改，那必须去响应修改，且set中要引起计算依赖的数据发生改变
3、如果只写get的话，可以简写
xxx(){
}
#其中xxx是函数名9、监视属性watch
1、内容
1、当被监视的属性变化时，回调函数自动调用，进行相关操作
2、监视的属性必须存在，才能进行监视
3、immediate:true这个是初始化的时候让xxx调用一下
2、两种监视方法
1、方法一
1、new Vue时传入watch配置
2、方法二
1、通过vm.$watch监视
3、深度监视
1、Vue的watch默认不检测对象内部值的改变（一层）
2、配置deep:true可以检测对象内部值改变（多层）
3、Vue自身可以检测对象内部值的改变，但是Vue提供的watch默认是不可以的
4、使用watch时根据数据的具体结构，决定是否采用深度监视
5、开启深度监视可能会浪费系统资源
4、监视的简写方式
1、平常写法
watch:{
//正常写法
/* isHot:{
// immediate:true, //初始化时让handler调用一下
// deep:true,//深度监视
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}, */
//简写
/* isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)
} */
}5、computed和watch之间的区别
1、区别
1、computer能完成的功能，wawatch可以完成
2、watch能完成的功能，从铺特点不一定能完成，例如：watch可以完成异步操作
2、两个小原则
1、所被vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2、所有不被vue所管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象
10、绑定样式
1、绑定class样式
1、三种写法
1、字符串写法
1、适用于：样式的类名不确定，需要动态制定
2、例子
:class='xxxxx'2、数组写法
1、适用于：要绑定的个数不确定，名字也不确定
2、例子
表达式字符串:'class'3、对象写法
1、适用于：要绑定的样式个数确定、名字也确定，但是要动态的选择
2、例子
:{classA:isA,classB:isB}2、style绑定
1、
:style="{color:activeColor,fontSize:fontSize+'px'}"2、其中activeColor/fontSize 是data属性
11、条件渲染
1、渲染条件的指令
1、
v-if与v-else2、
v-show2、如何选择使用
1、如果要频繁切换就用v-show，因为不改变结构
2、当条件不成立的时候，v-if的所有子节点都不会解析（项目中使用）
3、注意
1、使用v-if的时候，元素可能无法获取到
2、使用v-show一定可以获取到
12、列表渲染
1、列表显示指令
1、代码格式
1、遍历数组
v-for/index2、遍历对象
v-for/key2、总结
1、用来展示列表的数据
2、语法
v-for="(item,index) in xxx" :key="yyy"3、可遍历：数组、对象
4、字符串、指定次数也可以遍历（但是用的十分的少）
3、遍历列表的时候使用key的两种方式
1、内容
13、列表的过滤
1、收集表单数据
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤14、过滤器
1、过滤器内容
1、定义
1、对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
2、语法
1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
3、注意
1、过滤器也可以接收额外参数、多个过滤器也可以串联
2、并没有改变原本的数据, 是产生新的对应的数据
15、内置指令
1、之前学过的指令
| 指令 | 内容 |
|---|---|
| v-bind | 单向绑定解析表达式, 可简写为 :xxx |
| v-model | 双向数据绑定 |
| v-for | 遍历数组/对象/字符串 |
| v-on | 绑定事件监听, 可简写为@ |
| v-if | 条件渲染（动态控制节点是否存存在） |
| v-else | 条件渲染（动态控制节点是否存存在） |
| v-show | 条件渲染 (动态控制节点是否展示) |
2、v-text指令
1、作用
1、向其所在节点中渲染文本内容
2、与插值语法的区别
1、v-text会替换掉节点中的内容，{{xx}}则不会
3、v-html指令
1、作用
1、向指定节点中渲染包含html结构的内容。
2、与插值语法的区别
1、v-html会替换掉节点中所有的内容，{{xx}}则不会。
2、v-html可以识别html结构
3、?严重注意
1、在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
2、一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
4、v-cloak指令
1、作用
1、本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
2、使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
5、v-once
1、作用
1、v-once所在节点在初次动态渲染后，就视为静态内容了。
2、以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
6、v-pre指令
1、作用
1、跳过其所在节点的编译过程。
2、可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
7、自定义指令
1、语法
(1).局部指令：
new Vue({ new Vue({directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
(2).全局指令：
Vue.directive(指令名,配置对象)
或 Vue.directive(指令名,回调函数)2、配置对象中常用的3个回调函数
| 函数 | 作用 |
|---|---|
| bind | 指令与元素成功绑定时调用 |
| inserted | 指令所在元素被插入页面时调用 |
| update | 指令所在模版结构被重新解析时调用 |
3、注意
1、指令定义的时候不用加v-，但是使用的时候需要加v-
2、指令名如果是多个单词，要使用kebab-case命名方式，不要用不要用camelCase命名
16、生命周期
1、什么是生命周期
1、又名：生命周期回调函数、生命周期函数、生命周期钩子。
2、是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3、生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
4、生命周期函数中的this指向是vm 或 组件实例对象
2、生命周期的比喻
1、图示
3、生命周期总结
1、常用的生命周期钩子
| 方法 | 内容 |
|---|---|
| mounted | 发送ajax请求、启动定时器、绑定自定义事件、订阅消息【初始化操作】 |
| beforeDestroy | 消除定时器、解绑自定义事件、取消订阅消息等【收尾工作】 |
2、关于销毁Vue实例
1、销毁后借助Vue开发者工具看不到任何信息
2、销毁后自定义事件会失败、但原生DOM事件依然有效
3、一般不会在beforeDestory操作数据，因为我即使操作数据，也不会再触发更新流程了