前端框架和库：Vue.js：Vue.js计算属性与侦听器详解.docxVIP

PAGE1

PAGE1

前端框架和库：Vue.js：Vue.js计算属性与侦听器详解

1前端框架和库：Vue.js：介绍Vue.js基础

1.1Vue.js简介

Vue.js是一个用于构建用户界面的渐进式框架。它被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，易于上手，同时也便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

1.1.1特点

组件化：Vue.js采用组件化开发，可以创建可复用的UI组件。

数据绑定：Vue.js提供了强大的数据绑定功能，使得数据和视图之间的同步变得简单。

虚拟DOM：Vue.js使用虚拟DOM技术，提高DOM操作的效率。

指令系统：Vue.js有一套指令系统，如v-model和v-for，用于处理常见的DOM操作。

响应式系统：Vue.js的响应式系统能够自动追踪数据变化，更新视图。

1.2Vue.js的安装与配置

1.2.1安装Vue.js

可以通过CDN直接在HTML中引入Vue.js，或者使用npm进行安装。

CDN引入

scriptsrc=/npm/vue@2/script

使用npm安装

npminstallvue

1.2.2配置Vue.js项目

使用VueCLI可以快速搭建一个Vue.js项目。

安装VueCLI

npminstall-g@vue/cli

创建项目

vuecreatemy-project

cdmy-project

npmrunserve

1.3Vue实例与数据绑定

1.3.1Vue实例

Vue实例是Vue.js应用的核心，它包含了数据、方法、生命周期钩子等。

创建Vue实例

newVue({

el:#app,

data:{

message:HelloVue.js!

}

})

1.3.2数据绑定

Vue.js提供了多种数据绑定方式，如文本插值、属性绑定、指令绑定等。

文本插值

!--文本插值--

p{{message}}/p

属性绑定

!--属性绑定--

img:src=imageSrc

指令绑定

!--指令绑定--

inputv-model=searchQuery

1.3.3计算属性与侦听器

虽然本节标题要求不详细讲解计算属性与侦听器，但作为Vue.js基础的一部分，简要提及它们的作用。

计算属性

计算属性是基于它们的依赖进行缓存的，只有当依赖发生变化时，计算属性才会重新计算。

侦听器

侦听器可以监听数据的变化，并执行相应的函数。

1.3.4示例：使用计算属性和侦听器

假设我们有一个应用，需要显示用户的全名，并在用户输入名字或姓氏时自动更新全名。

数据和计算属性

newVue({

el:#app,

data:{

firstName:John,

lastName:Doe

},

computed:{

fullName:function(){

returnthis.firstName++this.lastName;

}

}

})

侦听器

newVue({

el:#app,

data:{

firstName:John,

lastName:Doe

},

watch:{

firstName:function(newVal,oldVal){

console.log(Firstnamechangedfrom+oldVal+to+newVal);

},

lastName:function(newVal,oldVal){

console.log(Lastnamechangedfrom+oldVal+to+newVal);

}

}

})

HTML模板

divid=app

inputv-model=firstNameplaceholder=Firstname

inputv-model=lastNameplaceholder=Lastname

pFullname:{{fullName}}/p

/div

在这个例子中，fullName是一个计算属性，它依赖于firstName和lastName。当这两个数据项中的任何一个发生变化时，fullName会自动更新。同时，我们使用了侦听器来监听firstName和lastName的变化，并在控制台中打印出变化的信息。

通过这个简单的例子，我们可