Vue 2.x 常用知识点笔记（万字笔记）

Vue 2.x 笔记

常用知识点笔记，有错误欢迎指点哦~ 字数超过了一万字，得细品

---

目录

• Vue 2.x 笔记
• • 1.新建Vue实例
  • 2.阻止生成生产提示
  • 3.模板语法
  • • 3.1 插值语法
    • 3.2 指令语法
    • • 3.2.1 单向数据绑定
      • 3.2.2 双向数据绑定
  • 4.MVVM模型
  • 5.数据代理
  • • 5.1 回顾Object.defineProperty方法
    • 5.2 什么是数据代理
    • 5.3 Vue中的数据代理
  • 6.事件处理
  • • 6.1 事件的基本使用
    • 6.2 事件的修饰符
    • 6.3 键盘事件
  • 7.计算属性
  • 8.监视属性
  • 9.绑定样式
  • 10.条件渲染
  • 11.列表渲染
  • • 11.1 基本列表
    • 11.2 key的原理
    • 11.3 列表过滤
    • 11.4 列表排序
    • 11.5 数据监测原理
  • 12.收集表单数据
  • 13.过滤器(Vue3 已移除)
  • 14.内置指令
  • 15.暂定
  • 16.自定义指令
  • 17.Vue生命周期
  • 18.组件
  • • 18.1 非单文件组件
    • 18.2 组件嵌套
    • 18.3 VueComponent
    • 18.4 一个重要的内置关系
  • 19.创建Vue脚手架
  • • 19.1 模板项目结构
    • 19.2 关于不同版本的Vue
    • 19.3 vue.config.js 配置文件
  • 20.ref 属性
  • 21.props 配置项
  • 22.mixin(混入/混合)配置项
  • 23.plugins.js 插件
  • 24.scoped 样式
  • 25.组件的自定义事件
  • 26.全局事件总线
  • 27.消息订阅
  • 28.nextTick
  • 29.使用CSS3动画库
  • 30.Vue.cli 解决跨域
  • • 方法一：
    • 方法二：
  • 31.插槽
  • 32.Vuex
  • • 32.1 搭建 `vuex` 环境
    • 32.2 基本使用(示例)
    • 32.3 store 中的 getters
    • 32.4 四个map方法的使用
    • 32.5 模块化+命名空间
  • 33.路由
  • • 33.1 基本使用
    • 33.2 几个注意点
  • 34.多级路由(嵌套路由)
  • 35.路由的query参数
  • 36.命名路由
  • 37.路由的params参数
  • 38.路由的props配置
  • 39.router-link的replace属性
  • 40.编程式路由导航
  • 41.缓存路由组件
  • 42.两个新的生命周期钩子
  • 43.路由守卫
  • • 43.1 全局守卫
    • 43.2 独享守卫
    • 43.3 组件内守卫
  • 44.路由器的两种工作模式
  • 45.Vue UI 组件库
  • • 45.1 移动端常用 UI 组件库
    • 45.2 PC 端常用 UI 组件库
• 易错点

---

1.新建Vue实例

// 示例1
new Vue({
    el:'#test',              // element vue的模板
    // data的第一种写法，对象式
    data:{					
        name: 'lhd',
        test:{
            id:1,
            age:19,
        }
    }
})


// 示例2
const vm = new Vue({
    // data的第一种写法，对象式
    data:{					
        name: 'lhd',
        test:{
            id:1,
            age:19,
        }
    }
})
vm.$mount('#test')


// 组件必须用函数式
const vm = new Vue({
// data的第二种写法，函数式
    data:function(){
        return{
            name:'lhd'
        }
    }
})
vm.$mount('#test')

---

2.阻止生成生产提示

如果使用的是开发版Vue，Vue 在启动时会生成生产提示

// 关闭提示，新建 Vue 实例要在此语句下面
Vue.config.productionTip = false

---

3.模板语法

3.1 插值语法

用于标签体内容

语法：{ {你要动态变化的数据}}

// 示例：创建 Vue 实例，定义数据name
new Vue({
    el:'#root',      // element
    data:{
        name:lhd
    }
})
// 在 div 标签中插值
<div id='root'> {
  {name}} <div>

3.2 指令语法

用于解析标签属性

3.2.1 单向数据绑定

单向的意思：只能从data流向页面（只能通过修改实例中data的数据改变标签数据）

语法：v-bind:标签属性

v-bind:属性 可以简写成 => :

// 示例：创建 Vue 实例，定义数据url,在 a 标签中插值
// 使用 v-bind： 绑定后，就会把里面的语句当成表达式解析
<a v-bind:href="url">跳转链接</a>     
<a :href="url">跳转链接</a>

3.2.2 双向数据绑定

双向的意思：可以从data流向页面，还可以从页面流向data

语法：v-model:标签属性

v-model:value 可以简写成 => v-model 。 因为默认收集的是value值

注意：v-model 只能应用在表单类元素(输入类元素)上

<input type='text' v-model:value="test">
<input type='text' v-model="test">

---

4.MVVM模型

1.M：模型(Model) ：data 中的数据

2.V：视图(View)：模板代码

3.VM：视图模型(ViewModel)：Vue 实例

data中的所有属性都出现在 vm 身上

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

---

5.数据代理

5.1 回顾Object.defineProperty方法

// 示例1
let a = {
    name:lhd
}
// 加入age数据
Object.defineProperty(a,'age',{
    value:18
    enumerable:true       // 让数据可枚举
    writable:true         // 让数据可修改
    configurable:true	  // 让数据可删除
})
console.log(Object.keys(a))     //用数组输出数据


// 示例2
let number = 18
let a = {
    name:lhd
}
Object.defineProperty(a,'age',{
    // 只要读取a的age属性是，get函数(getter)就会被调用
    get(){
        return number
    },
    // 只要有人修改age属性，set函数就会被调用
    set(value){
        // 把修改的值赋给number
        number = value
    }
})

5.2 什么是数据代理

通过一个对象代理对另一个对象中属性的操作

// 示例
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
    // 访问 obj2.x 可以输出 obj.x 的值
    get(){
        return obj.x
    },
     // 修改 obj2.x 可以修改 obj.x 的值
    set(value){
        obj.x = value
    }
})

5.3 Vue中的数据代理

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

好处：更加方便的操作data中的数据

基本原理：

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

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

在getter/setter内部去操作(读/写)data中对应的属性。

---

6.事件处理

6.1 事件的基本使用

语法：v-on:事件

可简写为 => @

事件的回调需要配置在methods上，最终会出现在 vm 上

注意：methods 中配置的函数不要用箭头函数，不然this就不是 vm 了

// 示例1
<div id='root'>
	<button v-on:click="你要执行的东西">1</button>
	<button @click="你要执行的东西">2</button>

// 示例2 传参。假设点击时执行show()函数
	<button @click="show()">3</button>   // 空时默认传事件对象
	<button @click="show(10,$event)">4</button>   // 空时默认传事件对象
</div>
const vm = new Vue({
    el:'#root',
    methods:{
        show(number,event){
            console.log(number)   // 10
            console.log(event)	  // 事件对象
        }
    }
})

6.2 事件的修饰符

Vue中的事件修饰符，可以连续写

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

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

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

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

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

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

6.3 键盘事件

@keyup 按键按下去抬起来后执行 @keydown 按键按下去就执行

1.Vue中常用的按键别名：

（1）回车 => enter

（2）退出 => esc

（3）空格 => space

（4）换行 => tab (配合@keydown)

（5）上下左右 => up、down、left、right

（6）删除 => delete (捕获 “删除” 和 “退格” 键)

2.Vue未提供别名的按键，可以使用键盘原始的key值去绑定，但要注意转为kebab-case(短横线命名)

例如大小写：CapsLock => caps-lock

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）

（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键

（2）配合keydown使用：正常触发

3.也可以使用keyCode去指定具体的按键（不推荐）

4.Vue.config.keyCodes.自定义键名 = 键码 定制别名

// 示例1 回车输出
<div id="root">
	<input type="text"