前置简介

1. 采用组件化模式，提高代码复用率、且让代码更好维护。
2. 声明式编码，让编码人员无需直接操作DOM,提高开发效率。
3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

1. 模板语法

首先创建Vue实例：

new Vue({el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通为css选器字符串。data: { //data中用于存储数据，数据供el所指定的容器去使用name: '来根烤肠',url: 'http://www.atguigu.com'}})

1. 插值语法：

• 功能：用于解析标签体内容。
• 写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性。

<h1>hello,{{name}}</h1>

2. 指令语法：

• 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件，···）
• 举例：v-bind:href="xxx"或简写为:href=“xxx”,xxx同样要写js表达式，且可以直接读取到data中的所有属性。
• 备注：Vue中有很多的指令，且形式都是：v-???,此处我们只是拿v-bind举个例子。

<a :href="url">lianjie</a>

2. 数据

2.1 数据绑定

Vue中有两种数据绑定的方式：

1. 单向绑定(v-bind):数据只能从data流向页面。
2. 双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
   备注：
3. 双向绑定一般都应用在表单类元素上（如：input、select等）
4. v-model:value可以简写为v-model,因为v-model默认收集的就是value值。

v-model只能应用在表单类元素（输入类元素）上!

2.2 el与data的两种写法

el

1. new Vue时候配置el属性

new Vue({el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通为css选器字符串。data: { //data中用于存储数据，数据供el所指定的容器去使用name: '来根烤肠',url: 'http://www.atguigu.com'}})

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

const vm = new Vue({// el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通为css选器字符串。data: { //data中用于存储数据，数据供el所指定的容器去使用name: '来根烤肠',url: 'http://www.atguigu.com'}})vm.$mount("#root")

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

1. 对象式

data: { //data中用于存储数据，数据供el所指定的容器去使用name: '来根烤肠',url: 'http://www.atguigu.com'}

2. 函数式

data: fuction(){
//此时的this指向Vue的实例对象return {name: '来根烤肠',url: 'http://www.atguigu.com'}}

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是指向了window对象

2.3 MVVM模型

1. M:模型(Model):对应data中的数据
2. V:视图(View):模板
3. VM:视图模型(ViewModel):Vue实例对象
   
   观察发现：

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

2.4 Object.defineProperty

Object.defineProperty，简单来说就是可以给对象添加属性。

 let person = {name: '张三',sex: '男'}Object.defineProperty(person, 'age', {value: 18,enumerable: true,// 控制属性是否可以枚举，默认值是falsewritable: true,// 控制属性是否可以被修改，默认值是falseconfigurable: true// 控制属性是否可以被刚除，默认值是false})

也可以通过getter/setter函数修改属性。

let number = 18Object.defineProperty(person, 'age', {get: function () {return 18},set: function (value) {number = value}})

2.5 Vue中的数据代理

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

<script type="text/javascript">
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>

Vue中的数据代理：
1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter；在getter/setter内部去操作（读/写）data中对应的属性。

3. 事件

3.1 事件处理

事件的基本使用：
1.使用v-on:xxx或@xxx绑定事件，具中xxx是事件名：
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了：
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象；
5.@click="demo”和@click="demo($event)"效果一致，但后者可以传参：

<button @click="showInfo($event)">显示提示信息</button><script type="text/javascript">const v = new Vue({el: '#root', // el用于指定当前Vue实例为哪个容器服务，值通为css选器字符串。data: { //data中用于存储数据，数据供el所指定的容器去使用name: '来根烤肠',url: 'http://www.atguigu.com'},methods: {showInfo(event) {alert('hi')console.log(this);}}})</script>

event指的是事件对象，一般我们会对事件进行处理。例如：阻止默认事件发生

event.preventDefault() 

3.2 事件修饰符

Vue中的事件修饰符：

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

// prevent:阻止默认事件
<button @click.prevent="showInfo($event)">显示提示信息</button>
// stop:阻止事件冒泡
<button @click.stop="showInfo($event)">显示提示信息</button>
// once:事件只触发一次
<button @click.once="showInfo($event)">显示提示信息</button>

1. • 在事件中获取dom元素：event.target
   • 在事件中获取vm或者组件对象：this
2. 一般情况下，事件执行完毕后才会执行默认行为。比如说，定义一个scroll事件，其中只有一个很大的for循环，只有在循环结束后，页面滚动条才会变化；如果添加passive修饰符

3.3 键盘事件

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

• 回车=>enter
• 删除=>delete(捕获"删除"和"退格键")
• 退出=>esc
• 空格=>space
• 换行=>tab（特殊：必须配合keydown使用）
• 上=>up
• 下=>down
• 左=>left
• 右=>right
  在键盘事件中，e.keyCode表示按下键的编码,e.key表示按下键的名字

<input @keyup.enter="showKey2" placeholder="键盘事件2"> // 按下enter键触发事件

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

<a href="" @keyup.stop.prevent="显示消息" placeholder="键盘事件2"> </a>

4. 计算属性

计算属性：

1. 定义：要用的属性不存在，要通过已有属性计算得来。
2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3. get函数什么时候执行？

• 初次读取时会执行一次。
• 当依赖的数据发生改变时会被再次调用。

4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5. 备注：

• 计算属性最终会出现在vm上，直接读取使用即可。
• 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变

      computed: {fullName: {get() {return this.firstName + '-' + this.lastName},set(value) {let arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}

计算属性简写：确定是只读不改的情况。

computed: {fullName() {return this.firstName + '-' + this.lastName}}

5. 监视(侦听)属性

首先写一个效果

5.1 书写形式

监视属性watch:

1. 当被监视的属性变化时，回调函数自动调用，进行相关操作；
2. 监视的属性必须存在，才能进行监视！！(可以监视普通属性，也可以监视计算属性)
3. 监视的两种写法：

• new Vuel时传入watch配置
• 通过vm.$watch监视

$第一种写法$

const vm = new Vue{
...,
watch: {isHot: {immediate: true,handler(newValue, oldValue) {console.log('newValue', newValue);console.log('oldValue', oldValue);}}}
}

$第二种写法$

vm.$watch('isHot', {immediate: true,handler(newValue, oldValue) {console.log('newValue', newValue);console.log('oldValue', oldValue);}})

5.2 深度监视

1. Vue中的watch默认不监测对象内部值的改变（一层）。
2. 配置deep:true可以监测对象内部值改变（多层）。

备注：

• Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
• 使用watch时根据数据的具体结构，决定是否采用深度监视。

5.3 简写形式

watch: {isHot(newValue, oldValue) {console.log('newValue', newValue);console.log('oldValue', oldValue);}}
// 或者
vm.$watch('isHot', function (newValue, oldValue) {console.log('newValue', newValue);console.log('oldValue', oldValue);})

5.4 计算属性和监听属性区别

当遇到异步任务时：


setTimeout并不是vue所管理的函数，所以可以使用箭头函数；setTimeout由js引擎调，也就是它的this指向window。

computed和watch之间的区别：

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

两个重要的小原则：

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

6. 绑定样式

6.1 绑定class

三种写法：

1. 字符串写法

<!-- 字符串写法，适用于：样式的类名不确定，需要动态指定-->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>

2. 数组写法

<!-- 数组写法，适用于：要绑定的样式个数不确定、名字也不确定-->
<div class="basic" :class="classArr">{{name}}</div>

3. 对象写法

<!-- 对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
<div class="basic" :class="classobj">{{name}}</div>

6.2 绑定style

绑定style有对象和数组两种写法，与绑定class类似，但是用处不多。

7. 渲染

7.1 条件渲染

条件渲染：

1. v-if
   写法：

<div v-if="表达式"></div>
<div v-else-if="表达式"></div>
<div v-else="表达式"></div>

适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：

• v-if可以和：v-else-if、v-else一起使用，但要求结构不能被“打断”;
• 只有v-if 可以使用template;
• vue2中v-if的优先级高于v-show,vue3中则相反

2. v-show
   写法：

<div v-show="表达式"></div>

适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏
3. 备注：
使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到。

7.2 列表渲染

v-for指令

1. 用于展示列表数据
2. 语法：

<li v-for="(item,index) in xxx" :key="yyy">xxx</li>

3. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
   使用列表渲染一个对象时，

<ul><li v-for="(value,key) in car">{{key}} - {{value}}</li>
</ul>
<script>
...
person:{name:'钱多多',age:20}
...
</script>

( 1 ) key的作用

1. index作为key

2. id作为key

没有设置key时，vue会默认将index设置为key。

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

1. 虚拟DOM中key的作用：
   key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
   随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

• 旧虚拟DOM中找到了与新虚拟DOM相同的key
  • 若虚拟DOM中内容没变，直接使用之前的真实DOM！
  • 若虚拟DOM中内容变了，则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
• 旧虚拟DOM中未找到与新虚拟DOM相同的key
  • 创建新的真实DOM,随后渲染到到页面。

3. 用index作为key可能会引发的间题：

   • 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
     会产生没有必要的真实DOM更新=>界面效果没问题，但效率低。
   • 如果结构中还包含输入类的DOM:
     会产生错误DOM更新==>界面有问题。

4. 开发中如何选择key?:

   • 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
   • 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

( 2 ) 列表过滤

8.

自定义插件