1.vue简介

1.1 vue是什么

一套用于构建用户界面的渐进式JavaScript框架

前端的职责：在合适的时候发出合适的请求把数据展示到合适的位置

渐进式：vue可以自底向上的应用
简单应用：只需一个轻量小巧的核心库
复杂应用：可以引入各式各样的Vue插件

cdn引入

vue2 的版本用下面这个

	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

1.2 Vue的特点

采用组件化模式，提高代码复用率、且让代码更好维护。
声明式编码，让编码人员无需直接操作DOM，提高开发效率

1.3 学习Vue之前需要掌握哪些JavaScript基础知识

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

1.4 初识vue需要知道的地方

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

2. vue的核心基础

2.1 模板语法

vue 的模板语法有两大类：

差值语法：

功能：用于解析标签体内容
写法： {{xxx}},xxx会作为标签体去解析，且可以自动读取到data中的属性

指令语法：

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

2.2 数据绑定

单向数据绑定（v-bind）

数据只能从data流向了页面

双向数据绑定 v-model

数据不仅能从data流向页面，还可以从页面流向data

小结

v-model一般应用于表单元素，要有value值

2.3 el和data的两种写法

el有两种写法：

第一种：

        new Vue ({
            el:'#root',
            data:{
                msg:'小帅'
            }
        })

第二种不常用的：

        const vm = new Vue ({
            data:{
                msg:'xiba'
            }
        })

        vm.$mount('#root')

data的两种写法：

第一种：对象式

第一种写法,data是一个对象

            data:{
                msg:'小帅'
            }

第二种：函数式

data的第二种写法，data是一个函数，返回数据对象(组件中用的多)

            data(){
                return {
                    msg:'xiba'
                }

组件化必须使用函数式的data

一个重要的原则

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

2.4 MVVM

M:模型（Model）：对应data中的数据
V：视图（View）：模板代码
VM ：视图模型（ViewModel）：Vue的实例对象

我的理解：

Model相当于冰箱放的什么，例如一个西瓜对应data，view相当于你看着西瓜放在冰箱的哪里，viewmodel就是这个冰箱

观察可以发现

data中所有的属性,最后都出现在了vm身上。
vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

    <div id="root">
        <!-- 这里是view -->
        <div>{{name}}</div> 
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>

        // 这里是ViewModel
        new Vue({
            el:'#root',
            // 这里是Model
            data:{
                name:'xiba'
            }
        })
    </script>

vue实例做的是什么

就是靠数据绑定和数据监听

2.5 数据代理

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

Vue中的数据代理:

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

Vue中数据代理的好处:

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

基本原理:

通过object.defineProperty()把data对象中所有属性添加到vm上.为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。

2.6 事件处理

2.61事件的基本使用:

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

2.62 事件修饰符

Vue中的事件修饰符:

prevent:阻止默认事件(常用);
stop:阳止事件冒泡(常用);
once:事件只触发一次(常用):
capture:使用事件的捕获模式;
self:只有event.target是当前操作的元素是才触发事件;
passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

2.63 键盘事件

Vue中常用的按键别名:

回车=> enter
删除=> delete(插获“删除”和"退格”健)
退出=> esc
空格=> space
换行=>tab （特殊，必须配合keydown使用）
上=> up
下 =>down
左=>left
右=> right

Vue未提供别名的按健，可以使用按健原始的key值去绑定，但注意要转为kebab-case(短横线命名)
系统修饰键(用法特殊）:ctrl、alt、shift、meta
1. 配合keyup使用:按下修饰键的同时，再按下其他健，随后释放其他健，事件才被触发。
2. 配合keydown使用:正常触发事件。
也可以使用keyCode去指定具体的按键(不推荐)
Vue.config . keyCodes.自定义健名=健码，可以去定制按键别名

2.7 计算属性

计算属性:

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

可以简写为一个函数

2.8 监视属性

监视属性watch:

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

深度监视：

deep :true 监视多级结构里的数据改变

watch：{
    xxx:{
        immediate:true //初始化调用
        deep：true // 深度监视
        handler(newValue，oldValue){
            
        }
        
    }
}

computed和lwatch之间的区别:

computed能完成的功能,watch都可以完成。
watch能完成的功能，computed不一定能完成，例如: watch可以进行异步操作。

两个重要的小原则:|

所被Vue管理的函数,最好写成普通函数，这样this的指向才是vm或组件实例对象。
所有不被Vue所管理的函数（定时器的回调函数、ajax的国调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象。

2.9 绑定样式

绑定class

三种方法

字符串写法

适用于:样式的类名不确定，需要动态指定

        <div class="basic" :class='mood' @click="changeMood">{{name}}</div>

            data:{
                name:'xiba',
                mood:'happy'
            },

数组写法

适用于:要绑定的样式个数不确定、名字也不确定-->

        <div class="basic" :class="classArr[1]">{{name}}</div><br>

                classArr:['happy','sad','normal'],

对象写法

适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用

        <div class="basic" :class="classObj">{{name}}</div>


                classObj:{
                    happy:false,
                    normal:true

                }

绑定style

写成对象的方式

3.0 条件渲染

条件渲染:

v-if

写法:

v-if="表达式"
v-else-if=”表达式"
v-else="表达式"

适用于:切换频率较低的场景。
特点:不展示的DOM元素直接被移除。
注意: v-if可以和:v-else-if、 v-else一起使用，但要求结构不能被"打断”。

v-show

写法: v-show="表达式"

适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

3.备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

3.1 列表渲染

v-for指令：

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

3.11 key的作用和原理

key的作用：

数据变得时候，vue根据新数据生成新的虚拟dom，新dom和旧dom会进行比较

比较的规则：

一看key，而看内容，

key相同：

内容没变，用以前的真实dom
内容变了，生成新的真实dom，替换以前的真实dom

key不同：

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

用index作为key的问题：

对数据做逆序等破坏顺序的操作，就会产生没必要的真实dom更新，影响效率
有输入类的dom，会产生错误的dom更新，让界面出现问题

开发中如何选择key：

要用唯一标识

3.12 列表过滤

可以说是一种模糊搜索

watch和computed都能实现，watch复杂点，不如computed

            computed: {
                filpersons() {
                    return this.persons.filter((p) => { //这个return把结果给filpersons
                        return p.name.indexOf(this.keyWord) !== -1 //通过这个return返回过滤出来的结果
                    })
                }
            }

3.13 列表排序

利用计算属性实现

创建一个新数组，对新数组进行排序

            computed: {
                filpersons() {
                    const arr = this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1
                    })

                    if (this.sortType) {
                        arr.sort((a, b) => {
                            return this.sortType === 1 ? b.age - a.age : a.age - b.age
                        })

                    }
                    return arr
                }
            }

3.2 vue监测数据原理

通过 object.defindeProperty 中的get 和set 方法

data中的数据都会被加工，读取的时候自动调用get ，修改用set ，然后把数据告诉wacher，把新旧dom重新对比渲染

vue监视数据的原理:

vue会监视data中所有层次的数据。
如何监测对象中的数据?

通过setter实现监视,且要在new Vue时就传入要监测的数据。

1. 对象中后追加的属性,Vue默认不做响应式处理
2. 如需给后添加的属性做响应式,请使用如下API:

Vue.set(target.propertyName/index. value)或vm.$set(target. propertyName/index. value)

如何监测数组中的数据?

通过包裹数组更新元素的方法实现,本质就是做了两件事:
1. 调用原生对应的方法对数组进行更新
2. 重新解析模板,进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法:

使用这些API:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

2.Vue.set()或vm.$set()

特别注意:Vue.set()和 vm.$set()不能给vm 或vm的根数据对象添加属性!

vue的数据劫持就是你修改数据，被vue逮住，他给你用set来修改，帮你改完后还往网页上丢

3.3 如何利用v-model收集表单数据

收集表单数据：

若input type="text"/>，则v-model收集的是value值,用户输入的就是value值。
若:，则v-modei收集的是value值，且要给标签配置value值。
若:

没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值>
配置input的value属性:
1. v-model的初始值是非数组，那么收集的就是checked（勾选 or未勾选，是布尔值)
2. v-model的初始值是数组，那么收集的的就是value组成的数组

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

lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤

3.4 过滤器

vue3移除了不学了

3.5 v-text

v-text指令:

作用:向其所在的节点中渲染文本内容。
与插值语法的区别: v-text会替换掉节点中的内容，{{xx}}则不公。

3.6 cookie小知识

他就像我们的身份证很重要，服务器给我们的，通过这个识别使身份

如何获取别人的cooki？

一个链接，跳转，a

3.7 vue内置指令

3.71 v-html

v-html可以识别htm1结构。
严重注意: v-html有安全性问题!!!!
1. 在网站上动态渲染任意HTML是非常危险的,容易导致XSS政击.
2. 一定要在可信的内容上使用v-html，不要用在用户提交的内容上!

3.72 v-cloak

v-cloak指令（没有值）:

本质是个特殊属性，Vue实例创建完毕并接管容器后，会那掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xXx]}的问题。

3.73 v-once

v-once指令:

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

3.74 v-pre

v-pre指令:

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

3.8 自定义指令

自定义指令总结:

一、定义语法:

局部指令: new vue directives:{指令名:配置对象}或

directives(){指令名:回调函数}

            directives:{
                big(element,binding){
                    console.log('big')
                    element.innerText = binding.value * 10
                },
                fbind:{
                    bind(){

                    },
                    inserted(){},
                    update(){}
                }
            }

}) 2. 全局指令: Vue.directive(指令名,配置对象）或Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调:

bind:指令与元素成功绑定时调用。
inserted:指令所在元素被插入页面时调用
update:指令所在模板结构被重新解析时调用。

三、备注:

指令定义时不加v-。但使用时要加v-;
指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

3.9 vue的生命周期

生命周期:

又名:生命周期回调的数、生命周期函数、生命周期钩子。
是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期函数中的this指向是vm或组件实例对象。

常用的生命周期钩子:

mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收手工作】。

关于销毁Vue实例：

销毁后借助Vue开发者工具看不到任何信息。
销毁后自定义事件会失效，但原生DOM事件依然有效。
一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

vue的系统学习|各种基础知识和细节篇

目录