Vue2 基础知识点

1、初始Vue

1、想让vue工作，就必须创建一个vue实例，且要转入一个配置对象；

2、root 容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3、root容器里的代码被称为【vue模板】

4、Vue实例和容器是一一对应的；*

5、真实开发中只有一个vue实例，并且会配合着组件一起使用；

6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

7、一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

注意区分：js表达式 和 js代码（语句）

1、表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方：

(1). a

(2). a+b

(3). demo(1)

(4). x ===y ? 'a' : 'b'

2、js代码(语句)

(1). if(){}

(2). for(){}

 

2、模板语法有两大类：

1、插值语法:

功能：用于解析标签体内容。

写法：{{xxx}}.xxx是js表达式。且可以直接读取到data中的所有属性。

2、指令语法：

功能：用于解析标签（包括：标签属性，标签体内容， 绑定事件。。。）

举例：v-bind：href="xxx"或 简写为 :href="xxx",xxx同样要写js表达式，且可以直接读 取到 data中的 所有属性。

备注：Vue中很多的指令，且形式都是：v-???，此处我们只是拿v-bind举例

 

3、Vue数据绑定：

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

1、单向数据绑定（v-bind）：数据只能从data流向页面。

2、双向数据绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。

备注：

1、双向绑定一般都应用在表单元素上（如：input、select等）

2、v-model：value 可以简写为 v-model，因为v-model默认收集的就是value值。

 

4、el与data的两种写法

1、el有两种写法

1.new.Vue时候配置属性。

2.先创建Vue实例，随后在通过vm.$mount('$root')指定el的值。

2、data有两种写法

1.对象式

2.函数式

如何选择：目前那种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3、一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是VUE实例了。

 

5、MVVM 模型

1、M:模型（Model）：data中的数据。

2、V:试图（View）：模板代码。

3、VM：试图模型（ViewModel）：VUe实例

观察发现：

1、data中所有的属性，最后都出现在了vm身上。

2、vm身上所有的属性及 Vue 原型上所有属性，在Vue模板中都可以直接使用。

面试题MVVM

MVVM是一种设计模式，它是一种简便用户界面的事件驱动编程方式。

MVMM中view和model是不能直接进行通信的，要通过ViewModel进行通信。

ViewModel定义了一个Observer观察者，ViewModel是View和Model的中间件。

ViewModel可以观察到数据的变化，并对视图内容区域进行更新。

ViewModel可以监听到视图的变化，并通知数据发生改变

 

6、Vue数据代理：

1、Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读、写）

2、Vue中数据代理的好处：

更加方便的操作data中的数据

3、基本原理：

通过Object.definePeoperty()把data对象中所有属性添加到vm上。

为每一个添加到vm上的属性，都指定一个getter/setter。

在getter/setter内部去操作（读/写）data对应的属性。

 

 

7、事件处理

1、事件的基本使用：

1、使用 v-on:xxx 或 @xxx绑定事件，其中xxx是事件名。

2、事件的回调需要配置在methods对象中，最终会在vm上。

3、methods中配置的函数，不要用箭头函数！否则this就不是vm了。

4、methods中配置的函数，都是被Vue所挂你的函数，this的指向是vm 或 组件实例对象。

5、@click="demo" 和 @click="demo($event)"效果一致，但后者可以传参

2、事件修饰符

Vue中的事件修饰符：

1、prevent：阻止默认事件（常用）

2、stop：阻止事件冒泡（常用）

3、once：事件只触发一次（常用）

4、capture：使用事件的捕获模式

5、self：只有event.target是当前操作的元素时才触发事件

6、passive：事件的默认行为立即执行，无需等待事件回调完毕

3、键盘事件

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.自定义键名。可以去定制按键别名

8、计算属性

计算属性：

1、定义：要用的属性不存在，要通过已有属性计算得来。

2、原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3、get函数什么时候执行？

1.初次读取的时候会执行一次。

2.当依赖数据发生改变时会再次调用。

4、优势：与methods实现相比，内部有缓存机制（复用），效率更高，调用方便。

5、备注：

1.计算属性最终会出现在vm上，直接读取使用即可

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生。

计算属性里面的监视用法：

computed和watch之间的区别：

1、computed能完成的功能.watch都可以完成

2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要的小原则：

1、所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象

2、所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数等、promise的回调函数）最好写成箭头函数。

这样this的指向才是vm 或 组件实例对象。

9、监视属性

监视属性watch：

1、当被监视的属性变化时，回调函数自动调用，进行相关操作

2、监视的属性必须存在，才能进行监视

3、监视的两种写法

1.new Vue 时传入watch配置

2.通过vm.$watch监视

深度监视：

1、Vue中的watch默认不检测对象内部值的改变 （一层）

2、配置deep：true 可以检测对象内部值的改变 （多层）

备注：

1、Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以。

2、使用watch时根据数据的具体结构，决定是否采用深度监视。

10、绑定样式

1、clas样式:

写法：class='xxx' xxx可以是字符串、对象、数组。

字符串：写法适用于：类名不确定，要动态获取

对象：写法适用于：要绑定多个样式，个数不确定，名字也不确定

数组：写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2、style样式

:style="{fontSize:xxx}"其中xxx是动态值

:style="[a,b]"其中a、b是样式对象

11、条件渲染

条件渲染：

1、v-if

写法：

1.v-if="表达式"

2.v-else-if="表达式"

3.v-else="表达式"

适用于：切换频率较低的场景

特点：不提示的DOM元素直接被移除

注意：v-if可以和：v-else-if、v-else一起使用，但要求结构不能被“打断”

12、v-for指令

1、用于展示列表数据

2、语法：v-for="(item,index) in xxx" :key="yyy"

3、可遍历：数组，对象，字符串，（用的少），指定次数（用的很少）

13、 面试题：react、vue中的key有什么作用？（key的内部资源）

1、虚拟DOM中key的作用

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2、对比规则

1.旧虚拟DOM中内容没变。直接使用之前的真实DOM。

（1）若虚拟DOM中内容没变。直接使用之前的真实DOM

（2）若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

2.旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到页面

3、用index作为key可能会引发的问题

1.若对数据进行，逆序添加，逆序删除等破坏谁许操作

2.如果结构中还包含输入类DOM：

会产生错误DOM更新 ==> 界面有问题

4、开发中如何选择key？

1.最好使用每条数据的卫衣标识作为key，不如id，手机号，身份证号，学号等卫衣值。

2.如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用idnex作为key是没有问题的。

14、收集表单数据：

若：<input type="text/>则v-model收集的是value值，用户输入的就是value值。

若：<input type="radio/>则v-model收集的是value值。且要给标签配置value值。

若：<input type="checkbox"/>

1.没有配置input的value属性。那么收集的就是checked（勾选or 未勾选。是布尔值）

2.v-model的初始值是数组。那么手机的就是value组成的数组。

备注：v-model的三个修饰符

lazy：失去焦点收集数据

number：输入字符转为有效数字

trim：输入首尾空格过滤

15、过滤器：

定义：对要显示的数据进行特定格式化以后在显示（适用于一些简单逻辑的处理）。

语法：

1.注册过滤器：Vue.filter(name.callback)或 v-bind:属性 = "xxx | 过滤器名"

备注：

1.过滤器也可以接受额外参数、多个过滤器也可以串联

2.并没有改变原版的数据，是产生新的对应数据

16、内置指令

指令：

v-bind ：单项数据绑定

v-model ：双向数据绑定

v-for ：遍历数组/对象/字符串

v-on ：绑定事件监听，可以简写为@

v-if ：条件渲染（动态控制节点是否存在）

v-else ：条件渲染（动态控制节点是否存在）

v-show ：条件渲染（动态控制节点是否展示）

v-text ：向其所在的标签差入文本

v-html指令：

1.作用：向指定节点渲染包含html结构的内容

2.与插值语法的区别

1.v-html会替换掉节点中的所有的内容，{{xx}}则不会

2.v-html可以识别html结构

3.严重注意：v-html有安全性问题！！！

1.在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击

2.一定要在可信的内容上使用v-html，永远不要在用户提交的内容上使用v-html

v-once指令：

1.v-once所在节点在初次动态渲染后，就视为静态内容了

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre:

1.跳过其所在节点的编译过程

2.可利用它跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译。

17、生命周期：

1.又名：生命周期回调函数、生命周期函数、生命周期钩子

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向 是vm或 组件实例对象。

vm的一生（vm的生命周期）：

将要创建 ===》 调用 beforeCreate 函数

创建完毕 ===》 调用 created 函数

将要挂载 ===》 调用 beforeMount 函数

(重要) 挂载完毕 ===》 调用 mounted 函数。 ===》【重要的钩子】

将要更新 ===》 调用 beforeUpdate 函数

更新完毕 ===》 调用 updated 函数

（重要） 将要销毁 ===》 调用 beforeDestroy 函数

销毁完毕 ===》 调用 destroyed 函数*

18、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/>

备注：不用使用脚手架时，<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(options)配置中：

data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。

Vue的实例对象，以后简称vm。