【Vue】基础知识要点

参照blibli中的视频教程：【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】教程链接

P10、Vue中的MVVM模型：

P11、Object.defineProperty的使用，定义属性

P12、数据代理

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

P13、vue中的数据代理

vm._data===data

P19、计算属性 computed

代码示例： 

var vm = new Vue({
    el: '#app',
    data: {
        firstName: '',
        lastName: '',
        //data中的fullName去掉
    },
    computed: {//计算属性，需要有返回值
        fullName: function () {
            console.log('ok');//计算属性的求值结果，会被缓存下来，方便下次直接使用，主要当做属性来使用
            return this.firstName + '_' + this.lastName
        },
        // 或者这么写：
        // fullName:{
        //     get(){
        //         return this.firstName + '/' + this.lastName
        //     }
        // }
    },
})

P22、监视属性/侦听属性 watch

代码示例： 

var vm = new Vue({
    el: '#app',
    data: {
        firstName: '',
        lastName: '',
        fullName: ' ',
    },
    watch: {
        //使用这个属性可以监听data中指定数据的变化，然后触发这个watch对应的function函数
        // 写法一(简写方法)：
        // firstName: function (newVal, oldVal) {
        //     console.log("firstName被监视了")
        //     // this.fullName = this.firstName + '_' + this.lastName
        //     //此时的this.firstName可以用newVal代替
        //     this.fullName = newVal + '_' + this.lastName
        // },
        // 写法二：
        firstName: {
            immediate:true,//初始化就让handler调用一下
            handler(newVal, oldVal) {
                console.log("firstName被监视了--handler")
                this.fullName = newVal + '_' + this.lastName
            },
        },
    },
})
// 写法三：
// vm.$watch("firstName", {
//     immediate: true,//初始化就让handler调用一下
//     handler(newVal, oldVal) {
//         console.log("firstName被监视了--handler")
//         this.fullName = newVal + '_' + this.lastName
//     },
// })

P23、深度监视 deep:true

 代码示例：

var vm = new Vue({
    el: '#app',
    data: {
        number: {
            a: 1,
            b: 1
        }
    },
    watch: {
        //监视多级结构中某个属性的变化
        // "number.a":{
        //     handler(newVal, oldVal) {
        //         console.log("a发生了改变")
        //     },
        // },
        //监视多级结构中所有属性的变化
        "number": {
            deep:true,
            handler() {
                console.log("number发生了改变")
            },
        }
    },
})

P25、watch和computed对比

P27、绑定样式

 P28、条件渲染 v-if/v-show

 P30、key

P31、列表过滤 filter

P35、vue.set对象

<div id="app">
    <p>name:{{student.name}}</p>
    <p>sex:{{student.sex}}</p>
    <button @click="addSex">添加sex</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            student: { name: 'qing' },
        },
        methods: {
            addSex() {
                // this.student.sex = "女"//页面不生效
                // Vue.set(this.student, "sex", "女")
                // 或者：
                this.$set(vm.student, "sex", "女")

                // this.$set(this,"leader",'领导')//会报错，因为第一个参数不能是vm，也不能是vm上的根数据对象data
            }
        }
    })
</script>

P36、vue.set数组

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            items: ['a', 'b', 'c']
        }
    })

    vm.items.push('d');
    // vm.items[0] = 'x' // 不是响应性的，此时看数组中的第一个数据没有变化

    // 方法1：Vue.set
    Vue.set(vm.items, 0, 'x')
    //方法2：
    vm.$set(vm.items, 0, 'x')
    //方法3：使用数组自带的splice方法
    vm.items.splice(0, 1, 'x')

// vm.items.splice(2);

</script>

P37、总结vue监视数据

 P38、表单、v-model的三个修饰符：lazy、number、trim

代码示例可见这个文章：https://blog.csdn.net/qq_33237207/article/details/95205683

 P39、过滤器 filter，dayjs使用

<p>{{ message|msgFormat }}</p>
...
// 定义一个vue全局过滤器msgFormat
Vue.filter('msgFormat', function (msg) {
    // return msg.replace('单纯', '邪恶');//只替换第一个
    return msg.replace(/单纯/g, '邪恶');
})

注：过滤器不止能用在插值语法，也能在标签属性中使用：（这种方式不常用）

<h3 :x="msg | mySlice"></h3>

P41、v-html

用 document.cookie 获取当前页面的cookie，但不是所有cookie数据。

P42、v-cloak

P43、v-once

<p v-once>初始化n值是{{n}}</p>

P44、v-pre

<p v-pre>这段内容不用编译</p>

P47、自定义指令 directives

参考另一篇文章：https://blog.csdn.net/qq_33237207/article/details/100661876

P52、生命周期

beforeCreate ：el 和 data 并未初始化，methods 中的方法不可用。
created ：完成了 data 数据的初始化，methods 中的方法也可用，el没有初始化。
beforeMount ：完成了 el 和 data 初始化，页面上的元素内容还是“{{message}}”。
mounted ：完成挂载。

beforeUpdate ：此阶段页面中显示的是旧数据,data中的是最新数据,页面尚未和最新数据同步。
updated ：此时页面和data中的数据保持一致，都是最新的数据。

beforeDestroy ：此时data和methods中的数据都处于可用状态。
destroyed：此时页面销毁完成。

P54-P58、组件

P59、内置关系 prototype

P60、单文件组件

xxx.vue 文件代码框架一般是下面这样：

<template>
  <!-- 组件的结构 -->
  <div></div>
</template>

<script>
// 组件交互相关的代码
export default {
  data() {
    return {
      a: 1,
    };
  },
  methods: {},
};
</script>

<style>
/* 组件的样式 */
</style>

P61、用脚手架搭建项目

npm install -g @vue/cli

vue create my-project

cd my-project

npm run serve

P63、render

P64、修改默认配置

参考官网（https://cli.vuejs.org/zh/config/#vue-config-js）

推荐一个查看md文件的插件【Typora】

举例如下：修改入口js文件和关闭语法检查：

P65、ref

P66、props

 P67、混入 mixins

 

 代码示例：

局部混合：如果组件中data和method和混合冲突了，则用组件中的，但是如果生命周期函数和混合冲突了，则会两个都执行。

全局混合：影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。

P68、自定义插件 Vue.use(plugin)

功能：用于增强插件。如果插件是一个对象，必须提供 install 方法。

代码示例：

 

P69、scoped属性

 style标签中还可以添加 lang 属性，用于指定是“css”、“less”，默认是css，如果设置成less，需要给项目安装“less-loader”包。

<style lang="less">
.hello{
  font-size: 40px;
}
</style>

P70-P79、TodoList

P78、本地存储

P80、自定义事件-绑定

 

P81、自定义事件-解绑

P82、自定义事件-总结

P85、全局事件总线（任意组建中通信）

P87、消息订阅与发布 pubsub

代码示例：

 

 P90、$nextTick

代码示例：(想要在切换成 input 框的同时获取焦点)

 

P91-P95动画

P97、配置代理，解决跨域问题

P104、插槽 <slot></slot>

可以看我的另一个文章：https://blog.csdn.net/qq_33237207/article/details/95966354

注：slot='xxx'具名插槽的方式自 vue 2.6.0 起被废弃，
slot-scope='xxx'作用域插槽的方式也自 vue 2.6.0 起被废弃。

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope。

P105、Vuex

P107、vuex工作原理

P108、搭建vuex

在2022年2月7日，vue3成为了默认版本

 安装vuex 3版本，输入命令【npm i vuex@3】

 

P110、vuex求和案例

 

 

 

P111、store中的getters配置项

P112、mapState、mapGetters

代码示例：computed 中的方法

P113、mapActions、mapMutations

代码示例： methods 中的方法

<!-- 需要传参n过去 -->
<button @click="increment(n)">+</button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">当前求和为奇数再加</button>
<button @click="incrementWait(n)">等一等再加</button>

P116、vuex模块化+命名空间

P117、路由

P118、路由的基本使用

P120、嵌套路由

P121、路由的query参数 $route.query.id

P122、命名路由

P123、路由的params参数 $route.params.id

P124、路由的props配置

P125、<router-link>的replace属性

P126、编程式导航 this.$router.push()、back()

P127、缓存路由组件<keep-alive>

P128、两个新的生命周期函数 activated、deactivated

P130、路由守卫 beforeEach、afterEach

 

P132、路由守卫 beforeEnter

独享守卫只有前置守卫，没有后置守卫

P133、路由器的两种工作模式mode

P134、ui组件

## 下面是vue3的内容---------

P136、vue3 

2020年9月发布的3.0版本。Vue3带来了：性能的提升（打包体积减少、初次渲染和更新快）；源码的升级（使用proxy代替defineProperty实现响应式）；更好的支持ts。

P137、创建工程-使用vue-cli

## 查看@vue/cli版本，确保版本在4.5.0以上

vue --version

## 安装或升级@vue/cli

npm install -g @vue/cli

## 创建
vue create my-project

## 启动
cd my-project
npm run serve

P138、创建工程-使用vite（新一代的前端构建工具）

它是尤雨溪团队出品，启动速度快，编译速度也快。

P139、项目结构分析

入口文件：src/main.js：

注：关闭语法检查跟vue2一样，参照P64，引入一个js配置文件。

import Vue from 'vue'//vue3中这样写就会报错

vue3中可以没有根标签。

P141、setup配置项

代码示例：

P142、ref函数