当前位置：首页 > news >正文

vue2学习 -- 核心语法

news 来源：原创 2024/9/22 5:27:28

文章目录

- 前置简介
- 1. 模板语法
- 2. 数据
- - 2.1 数据绑定
  - 2.2 el与data的两种写法
  - 2.3 MVVM模型
  - 2.4 Object.defineProperty
  - 2.5 Vue中的数据代理
- 3. 事件
- - 3.1 事件处理
  - 3.2 事件修饰符
  - 3.3 键盘事件
- 4. 计算属性
- 5. 监视(侦听)属性
- - 5.1 书写形式
  - 5.2 深度监视
  - 5.3 简写形式
  - 5.4 计算属性和监听属性区别
- 6. 绑定样式
- - 6.1 绑定class
  - 6.2 绑定style
- 7. 渲染
- - 7.1 条件渲染
  - 7.2 列表渲染
  - - key的作用
- 8. 监视数据
- - 8.1 vue监视数据的原理_对象
  - 8.2 vue监视数据的原理_数组
- 9. 收集表单数据
- 10. 过滤器
- 11. 指令
- - 11.1 内置指令
  - 11.2 自定义指令
- 自定义插件

前置简介

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

1. 模板语法

首先创建Vue实例：

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

插值语法：

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

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

指令语法：

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

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

2. 数据

2.1 数据绑定

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

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

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

2.2 el与data的两种写法

new Vue时候配置el属性

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

先创建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必须使用函数式，否则会报错。

对象式

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

函数式

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

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

2.3 MVVM模型

M:模型(Model):对应data中的数据
V:视图(View):模板
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中的事件修饰符：

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

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

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

3.3 键盘事件

Vue中常用的按键别名：

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

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

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

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

4. 计算属性

计算属性：

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

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

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

计算属性最终会出现在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:

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

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 深度监视

Vue中的watch默认不监测对象内部值的改变（一层）。
配置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之间的区别：

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

两个重要的小原则：

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

6. 绑定样式

6.1 绑定class

三种写法：

字符串写法

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

数组写法

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

对象写法

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

6.2 绑定style

绑定style有对象和数组两种写法，与绑定class类似，但是用处不多。
在这里插入图片描述

7. 渲染

7.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中则相反

v-show
写法：

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

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

7.2 列表渲染

v-for指令

用于展示列表数据
语法：

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

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

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

key的作用

index作为key

在这里插入图片描述

id作为key

在这里插入图片描述

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

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

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

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

用index作为key可能会引发的间题：
- 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
  会产生没有必要的真实DOM更新=>界面效果没问题，但效率低。
- 如果结构中还包含输入类的DOM:
  会产生错误DOM更新==>界面有问题。
开发中如何选择key?:
- 最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

8. 监视数据

8.1 vue监视数据的原理_对象

在这里插入图片描述
vm实例在将data交给_data前会对其进行加工，不管是基本类型的数据，还是对象类型的数据，每个数据或者属性都会有getter/setter(数据劫持)，一旦调用setter就会触发页面数据的更改。

8.2 vue监视数据的原理_数组

首先来了解一下vue.set()
假设有以下数据：

data: {name:'十个勤天',age:'2',members:[{name:'蒋敦豪',rank:1},{name:'鹭卓',rank:2},{name:'李耕耘',rank:3},{name:'李昊',rank:4},{name:'赵一博',rank:5},{name:'卓沅',rank:6},{name:'赵小童',rank:7},{name:'何浩楠',rank:8},{name:'陈少熙',rank:9},{name:'王一珩',rank:10}]}

在用户交互时，给data中members添加sex:'男'时，如果使用

vm._data.members.sex = '男'

那sex没有getter/setter，也就是无法做到响应式，vue也无法监视到；
但是我们可以使用

vue.set(vm._data.members,'sex','男')

但是vue.set()有个弊端，它只能是data下的对象或数组使用(比如members)，如果是data使用(比如给vm._data添加sex)，就会报错。

同样的，如果直接

vm._data.members[10] = {...}

也是无效的，因为vue将检测不到这个member；但是我们也可以使用

vue.set(vm._data.members,10,{...})

另外，通过vue包裹过的方法对数组进行修改,vue也能检测的到
在这里插入图片描述
总结：
Vue监视数据的原理：

vue会监视data中所有层次的数据。
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。

对象中后追加的属性，Vue默认不做响应式处理
如需给后添加的属性做响应式，请使用如下API:

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

如何监测数组中的数据？

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

调用原生对应的方法对数组进行更新。
重新解析模板，进而更新页面。

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

使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、everse()
Vue.set() 或者 vm.$set()
特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象(_data)添加属性！！！

9. 收集表单数据

若：< input type=“text”/>，则v-model收集的是value值，用户输入的就是value值。
若：< input type=“radio”/>，则v-model收集的是value值，且要给标签配置value值。
若：< input type=“checkbox”/>，
- 没有配置input的value属性，那么收集的就是checked(勾选or未勾选，是布尔值)
- 配置input的value属性：
  1. v-model的初始值是非数组，那么收集的就是checked(勾选or未勾选，是布尔值)
  2. v-model的初始值是数组，那么收集的的就是value组成的数组

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

lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤

10. 过滤器

举个例子 — 实现时间的格式化

<div id="root"><h1>现在的时间：{{time}}</h1><!-- 使用过滤器 --><h1>时间格式化：{{time | fmtTime}}</h1></div><script>new Vue({el: '#root',data: {time: 1722420040605},filters: {fmtTime(val) {return moment(val).format('YY-MM-DD HH:mm:ss');}}})