。

Vue由尤雨溪在2014年开发#xff0c;是一个轻量级、灵活的框架#xff0c;被广泛应用于构建单页面应用#xff08;SPAVue

1.1

Vue.js通常称为Vue是一款流行的开源JavaScript框架用于构建用户界面。

Vue由尤雨溪在2014年开发是一个轻量级、灵活的框架被广泛应用于构建单页面应用SPA和动态Web界面。

Vue.js

提供了简洁、灵活的语法和API使得开发者可以轻松构建交互式的用户界面。

数据驱动Vue.js

使用了响应式数据绑定机制使得界面的数据与视图保持同步当数据变化时视图会自动更新。

组件化开发Vue.js

鼓励开发者使用组件化的方式构建界面将界面拆分成多个独立、可复用的组件使得代码更加模块化、易于维护。

易学易用Vue.js

的语法简洁清晰文档完善上手容易适合初学者和有经验的开发者使用。

社区活跃Vue.js

拥有庞大的开发者社区和生态系统有大量的插件和工具可供选择能够满足各种需求。

二初识

src../js/vue.js/script/headbody!--

准备好一个容器

iddemoh1Hello{{name.toUpperCase()}}{{address}}/h1/divscript

typetext/javascript

//el用于指定当前Vue实例为哪个容器服务值通常为css选择器字符串。

data:{

//data中用于存储数据数据供el所指定的容器去使用值我们暂时先写成一个对象。

name:atguigu,address:北京}})/script/body

/html运行结果如图所示

想让Vue工作就必须创建一个Vue实例且要传入一个配置对象demo容器里的代码依然符合html规范只不过混入了一些特殊的Vue语法demo容器里的代码被称为【Vue模板】Vue实例和容器是一

一对应的不能一个容器对应多个实例也不能一个实例对应多个容器真实开发中只有一个Vue实例并且会配合着组件一起使用{{xxx}}中的xxx要写js表达式并且xxx可以读取到data中的所有属性表达式能够进行进一步的计算并且一个表达式会产生一个值可以放在任何一个需要值的地方一旦data中的数据发生改变那么页面中用到该数据的地方也会自动更新

2.2

功能用于解析标签体内容。

写法{{xxx}}xxx是js表达式且可以直接读取到data中的所有属性。

指令语法

功能用于解析标签包括标签属性、标签体内容、绑定事件等。

举例v-bind可以简写为:所以v-bind:hrefxxx

:hrefxxxxxx同样要写js表达式xxxx会作为js表达式被解析并且可以读取到data中的所有属性。

备注Vue中有很多的指令且形式都是

!DOCTYPE

src../js/vue.js/script/headbody!--

准备好一个容器--div

idrooth1插值语法/h1h3你好{{name}}/h3hr/h1指令语法/h1a

v-bind:hrefschool.url.点我去{{school.name}}学习1/aa

:hrefschool.url

点我去{{school.name}}学习2/a/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{name:jack,school:{name:尚硅谷,url:http://www.atguigu.com,}}})/script

/html运行效果如图所示

单向数据绑定是指数据只能从数据模型流向视图层而不能从视图层流向数据模型只能从data流向页面。

双向数据绑定是指数据可以在视图和模型之间进行双向的数据传递和同步更新不仅能从data流向页面还可以从页面流向data。

。

双向绑定一般都应用在表单类元素上如input、select等因为其他非表单类元素通常用于展示内容并不具有用户输入交互的特性而对于表单元素具有用户输入交互的特性所以通过

value

//第一种写法data:{name:尚硅谷}})console.log(v)v.$mount(#root)

//第二种写法2.4.2

Vue({el:#root,//data的第一种写法对象式/*

data:{name:尚硅谷}

*///data的第二种写法函数式data(){console.log(,this)

//此处的this是Vue实例对象return{name:尚硅谷}}})目前任何一种写法都可以但是在学习到组件时必须使用函数式定义

2.4.3

实例的生命周期中会触发一系列的钩子函数从创建、挂载到销毁等不同阶段都有相应的钩子函数可供调用。

这些钩子函数是由

Vue

管理的开发者可以在这些钩子函数中编写相应的逻辑来处理各个阶段的操作。

常见的生命周期钩子函数包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

计算属性

提供了计算属性的功能可以将复杂的计算逻辑封装在计算属性中然后通过模板直接引用计算属性实现数据的自动更新。

methods

中监听指定的数据当数据发生变化时执行相应的回调函数。

Watchers

Vue

是一种软件架构模式它将应用程序分为三个主要部分模型Model、视图View和视图模型ViewModel。

MVVM

的核心思想是将用户界面的逻辑与数据分离使代码更易于维护和测试。

M模型(Model)

当用户与视图交互时视图会触发相应的事件例如点击按钮或输入文本。

视图模型监听这些事件并根据用户的操作更新模型中的数据。

模型的数据发生变化时视图模型会自动更新视图使用户界面保持同步。

视图模型还负责将模型中的数据格式化为视图可以理解和显示的形式以及将用户的操作转换为对模型的操作。

这种双向绑定的机制使开发者可以专注于处理数据和用户界面的逻辑而无需手动处理视图和模型之间的同步。

data中所有的属性都会出现在vm身上让vm代理data的数据。

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

Vue

实例上这样做的意义在于提供了一种简单直接的方式来访问和组件的数据。

这种代理的方式使得

Vue

访问和修改这些属性。

这样做不仅简化了数据的操作还使得代码更易读和维护。

例如在组件的方法中可以直接使用

this.myData

实例上有助于更好地组织代码结构。

通过集中管理数据可以更容易地理解和维护组件。

此外将数据代理到

Vue

实例上还使得数据在组件内部和外部都可以方便地访问从而提高了代码的可复用性和可扩展性。

提高性能Vue

能够追踪属性的变化并自动更新视图。

这种响应式系统可以帮助优化性能减少不必要的

DOM

descriptor)obj要新增或修改属性的对象。

prop要新增或修改的属性名。

descriptor属性的描述符对象包含了属性的特性配置如

getter

false。

configurable属性是否可配置例如是否可以使用

delete

{name:张三,sex:男,}Object.defineProperty(person,age,{//

value:18,//

//控制属性是否可以被删除默认值是false//当有人读取person的age属性时get函数(getter)就会被调用且返回值就是age的值get(){console.log(有人读取age属性了)return

number},//当有人修改person的age属性时set函数(setter)就会被调用且会收到修改的具体值set(value){console.log(有人修改了age属性且值是,value)number

value}})//

console.log(Object.keys(person))console.log(person)/script

/body2.6.2

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

typetext/javascript

{y:200}Object.defineProperty(obj2,x,{get(){return

value}})/script/body

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

基本原理

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

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

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

这样当我们通过vm对象访问或修改属性时实际上是在访问或修改data对象中的属性但是通过代理的方式使得访问和修改更加方便同时隐藏了内部的实现细节。

2.7

使用v-on:xxx或xxx绑定事件其中xxx是事件名事件的回调需要配置在methods对象中最终会在vm上methods中配置的函数不要使用箭头函数否则this就不是vm了methods中配置的函数都是被Vue所管理的函数this的指向是vm或组件实例对象clickdemo

clickdemo($event)

src../js/vue.js/script/headbody!--

准备好一个容器--div

v-on:clickshowInfo点我提示信息/button

--button

clickshowInfo1点我提示信息1不传参/buttonbutton

clickshowInfo2($event,66)点我提示信息2传参/button/div/bodyscript

typetext/javascriptVue.config.productionTip

false

Vue({el:#root,data:{name:尚硅谷,},methods:{showInfo1(event){//

console.log(event.target.innerText)//

console.log(this)

//此处的this是vmalert(同学你好)},showInfo2(event,number){console.log(event,number)//

console.log(event.target.innerText)//

console.log(this)

//此处的this是vmalert(同学你好)}}})/script

/html效果如图所示

.stop阻止事件冒泡。

.prevent阻止事件的默认行为。

.capture在捕获阶段触发而不是冒泡阶段。

.self只当事件是从侦听器绑定的元素本身触发时才触发回调。

如果子元素触发事件不会触发回调。

.once事件将只触发一次。

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

!--

once/button通过事件修饰符你可以更灵活地控制事件的行为从而满足不同的需求。

2.7.3

回车enter删除包括删除键和退格键delete退出esc空格space换行tab需配合keydown使用上箭头up下箭头down左箭头left右箭头right

系统修饰键

ctrlCtrl键altAlt键shiftShift键metaMeta键如Command键或Windows键

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

配合keydown使用正常触发事件。

!--

将F1键的键码映射为112这样你就可以在模板中使用keyup.f1来监听F1键的按下事件。

2.8

在Vue中计算属性是一种用于对数据进行处理和计算的特殊属性。

它的值是根据其依赖的数据动态计算而来的当依赖的数据发生变化时计算属性会自动重新求值计算属性最终会出现在vm上直接读取使用即可。

使用时机

当需要对现有数据进行转换、筛选、过滤等操作时可以使用计算属性。

复杂逻辑计算

特点和优势

计算属性会自动追踪其所依赖的数据并在依赖数据发生变化时自动重新求值无需手动管理依赖关系。

缓存机制

计算属性会缓存计算结果只有在依赖数据发生变化时才会重新计算可以有效减少不必要的计算提升性能。

响应式更新

计算属性的值是响应式的当依赖数据发生变化时相关的计算属性会自动更新从而更新相关的视图。

如何使用计算属性

this.message.toUpperCase();},set:

function(value)

value.toLowerCase();}},squaredCount:

get:

在Vue中计算属性的简写方式是一种更加简洁的语法形式适用于只需要定义

get

示例下面是一个示例展示了使用简写方式定义计算属性前后的代码对比

完整方式

this.message.toUpperCase();},},squaredCount:

{get:

this.message.toUpperCase();},squaredCount()

{return

//初始化时调用一下messageconsole.log(message

${old}

中是一种特殊的监视属性变化的方式它允许你深度递归地监视对象内部的变化。

当对象内部的属性发生变化时深度监视会递归地检测这些变化并触发相应的回调函数。

Vue

内部的属性发生变化时监视函数就会被调用。

这种深度监视的方式适用于需要监视对象内部属性变化的场景。

2.9.3

中简化监视对象属性变化定义的语法糖。

它允许你直接将监视对象的属性作为函数来定义而不必再使用对象字面量的方式。

Vue

简写形式适用于简单的监视逻辑当监视逻辑变得复杂时完整形式可能更为合适。

2.10

中定义的方法最好使用普通函数而不是箭头函数。

这是因为普通函数的

this

{console.log(this.message);}},created()

{//

管理的函数因此使用了普通函数的语法。

而定时器的回调函数则是不受

Vue