Vue学习笔记（尚硅谷）

Vue基础

Vue是什么

一套用于构建用户界面的渐进式javascript框架。渐进式是指Vue可以自底向上逐层的应用。
作者尤雨溪。2013年发布0.6.0; 2014正式对外发布; 2015年1.0版;2016年2.0版; 2020年3.0版。

vue的特点：

1.采用组件化模式，提高代码复用率、且让代码更好维护。
2.声明式编码，让编码人员无需直接操作DOM，提高开发效率。
3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

学习Vue之前要掌握的Javascript基础知识：

ES6语法规范; ES6模块化；包管理器；原型、原型链；数组常用方法; axios；promise……

官网：
https://cn.vuejs.org/

安装：

2种方式，一种直接引入vue.js; 另一种是用NPM配合CLI使用。
安装vue-devtools。
设置关闭生产环境提示：Vue.config.productionTip=false;
Live Server安装

1.想让 Vue工作，就必须创建一个 Vue 实例，且要传入一个配置对象；
2.root 容器里的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法。
3.root 容器里的代码被称为“Vue 模板”。
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新。

Hello小案例

容器与Vue实例是一一对应的，不能一对多也不能多对一。

{{}}里面可以写什么：js表达式
注意区分 js 表达式和 js 代码（语句）
1.表达式：一个表达式会产生一个值，可以放在任何需要值的地方。
（1）a（2）a+b（3）demo（1）（4）x===y？’a’:’b’
2.js代码（语句）
（1）if(){} （2）for(){}

模板语法

Vue模板语法有2大类:
1.插值语法:
功能: 用于解析标签体内容。
写法:{{xxx]}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法:
功能: 用于解析标签（包括:标签属性、标签体内容、绑定事件…..) 。
举例: v-bind:href=”xxx”或简写为 :href=”xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。

Vue中有2种数据绑定方式：

1.单向绑定v-bind:数据只能从data流向页面.
2.双向绑定v-model: 数据不仅能从data流向页面，还可以从页面流向data。只能用在输入类，有value属性的表单元素上，如input、select等。v-model:value，可以简写为v-model，因为其默认收集的就是value值。

el与data的两种写法：

，以后学习到组件时,data必须使用函数式,否则会报错。

理解MVVM：

1.M：模型（Model），对应data中的数据。
2.V：视图（View），模型。
3.VM：视图模型（ViewModel），Vue实例对象。
观察发现：1.data中的所有属性，最后都出现在了vm身上。
2.vm身上的所有属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

数据代理：

Object.defineproperty方法

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写入）

1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作（读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

事件处理

事件的基本使用:
1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;
2.事件的回调需要配置在methods对象中，最终会在vm上;
3.methods中配置的函数，不要用箭头函数! 否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
5.@click=”demo”和@click=”demo($event)”效果一致，但后者可以传参;

事件修饰符：可以连着写多个修饰符

1.prevent：阻止事件默认行为（常用）
2.stop：阻止事件冒泡（常用）
3.once：事件只触发一次（常用）
4.capture：使用事件的捕获模式
5.self：只有event.target是当前操作的元素时才触发事件
6.passive：事件的默认行为立即执行，不需要等待回调执行完毕。

键盘事件：

1.Vue中常用的按键别名:
回车 => enter
删除=> delete(捕获”删除”和“退格”键)
退出=> esc
空格=> space
换行=>tab，特殊，必须配合keydown使用。
上 => up
下=> down
左=>left
右=> right
2.Vue未提供别名的按键，可以使用按健原始的key值去绑定，但注意要转为kebab-case(短横线命名)
3.系统修饰键（用法特殊）:ctrl、alt、shift、meta
(1).配合keyup使用: 按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐)
5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

计算属性

1.定义: 要用的属性不存在，要通过已有属性计算得来。
2.原理: 底层借助了objcet.defineproperty方法提供的getter和setter.
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势: 与methods实现相比，内部有缓存机制(复用），效率更高、调试方便。
5.备注:
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

简写形式：确实了只需要读不需要写，则可以简写。直接写成一个函数即可。

监视属性watch

插件推荐：Vue3 Snippets
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置
(2).通过vm.$watch监视

深度监视：默认不开启，为了效率。
(1).vue中的watch默认不监测对象内部值的改变(一层）。
(2).配置deep:true可以监测对象内部值改变(多层）。
备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

如果不需要特殊需求，只有handler时，可以采用简写形式：

computed和lwatch之间的区别:
1.computed能完成的功能,watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。
两个重要的小原则:
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。

绑定样式

1.class样式
写法: class=”xxx” xxx可以是字符串、对象、数组。
字符串写法适用于: 类名不确定，要动态获取。
对象写法适用于: 要绑定多个样式，个数不确定，名字也不确定。
数组写法适用于: 要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2.style样式
:style=”{fontSize: xxx}”其中xxx是动态值。
:style=”[a,b]”其中a、b是样式对象。

Math.random(): 返回0到1之间的随机数，不含1。

条件渲染

1.v-if
写法:
(1).v-if=”表达式”
(2).v-else-if=”表达式”
(3).v-else=”表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意:：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
可以与template一起配合使用。
2.v-show
写法: v-show=”表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

列表渲染

v-for指令:
1.用于展示列表数据
2.语法: v-for=”(item,index) in xxx” :key=”yyy”
3.可遍历:数组、对象、字符串（用的很少)、指定次数（用的很少)

面试题:react.[vue中的key有什么作用?(key的内部原理)
1.虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】
生成【新的虚拟DOM) ,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:
2.对比规则:
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
回.若虚拟DOM中内容没变,直接使用之前的真实DOM !
2.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的
真实DOM.
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。
3。用index作为key可能会引发的问题:
1。若对数据进行:逆序添加、
逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新==>界面效果没问题，但效率低.
2．如果结构中还包含输入类的DOM:
会产生错误DOM更新==>界面有问题。
4。开发中如何选择key? :
1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示,
使用index作为key是没有问题的。

列表过滤

列表排序

Vue监测数据的原理

1.vue会监视data中所有层次的数据。
2．如何监测对象中的数据?
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API:
Vue.set(target.propertyName/index,value)或
vm.$set(target.propertyName/index，value)
3. 如何监测数组中的数据?
通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
4.在Vue修改数组中的某个元素一定要用如下方法:
1.使用这些API：push()、pop()、shift()、unshift()、spllice()、sort()、reverse(）
2.Vue.set()或vm.$set()
特别注意:Vue.set()和 vm.$set()不能给vm或 vm的根数据对象添加属性!!!

收集表单数据

若<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:输入首尾空格过滤

过滤器

内置指令

v-bind :单向绑定解析表达式,可简写为:xxx
v-model :双向数据绑定
v-for: 遍历数组/对象/字符串
v-on :绑定事件监听,可简写为@
v-if: 条件渲染（动态控制节点是否存存在)
v-else : 条件渲染（(动态控制节点是否存存在)
v-show: 条件渲染（动态控制节点是否展示)

v-text：
1.向其所在的节点中渲染文本内容。将所有字符串当成普通字符，不解析标签。
2.与插值语法的区别：v-text会替换节点中的内容，{{xx}}则不会。

v-html指令:

1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别:
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意: v-html有安全性问题!!!!
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!

v-clock指令：

v-once指令:
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令:
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
自定义指令总结:
一、定义语法:
(1).局部指令:
new Vue({ directives:{指令名:配置对象} }）; 或 new Vue({directives{指令名:回调函数} }）;
(2).全局指令:
Vue.directive(指令名,配置对象) 或 Vue.directive (指令名,回调函数)
二、配置对象中常用的3个回调:
(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。
(3).update:指令所在模板结构被重新解析时调用。
三、备注:
1.指令定义时不加v-，但使用时要加v-;
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

组件

vue中使用组件的三大步骤:
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)

一、如何定义一个组件?
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，
但也有点区别，区别如下:
1.el不要写，为什么：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2.data必须写成函数，为什么：避兔组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。
二、如何注册组件?
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component(‘组件名’，组件)
三、编写组件标签:
<school></school>

几个注意点:
1.关于组件名:
一个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):School
多个单词组成:
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool（需要Vue脚手架支持)

备注:
(1).组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:
第一种写法: <school></school>
第二种写法: <school/>
备注: 不用使用脚手架时，会导致后续组件不能渲染。
3.一个简写方式:
const school = Vue.extend(options）可简写为: const school = options

组件的嵌套

关于VueComponent：
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的 new VueComponent(options)。
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent !!!!
4.关于this指向:
(1).组件配置中: data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
(2).new Vue()配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。
5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
Vue的实例对象，以后简称vm。

单文件组件

以.vue结尾的文件。安装相应插件：vetur，作者Pine Wu

vue-cli：command line interface 命令行接口工具脚手架

Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。
第一步：全局安装@vue/cli npm install -g @vue/cli
第二步：切换到你要创建项目的目录，然后使用命令创建项目 vue create xxxx
第三步：启动项目 npm run serve

关于不同版本的Vue:

1.vue.js 与vue.runtime.xxx.js的区别:
(1).vue.js是完整版的Vue，包含: 核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含核心功能，没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

脚手架默认配置：

vue inspect > output.js //导出配置信息，共1300多行，只用作显示

ref属性

1.被用来给元素或子组件注册引用信息（id的替代者)
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc)
3.使用方式：
打标识：<h1 ref=”xxx’>……</h1>或 <School ref=”xxx”> </School>
获取: this.$refs.xxx