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

Vue 2.x 笔记

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

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.自定义键名 = 键码定制别名