营销型网站建设php源码,长沙建设网站哪家好,滕州网站优化,佛山品牌网站建设报价目录 前言
一、vue的介绍
1. Vue.js是什么#xff1f;
2. 库和框架的区别
3.基本概念和用法#xff1a;
二、MVVM的介绍
1. 什么是MVVM#xff1f;
2. MVVM的组成部分
3. MVVM的工作流程
4. MVVM的优势
5. MVVM的应用场景
三、vue实例
1.模板语法#xff1a;
…目录 前言
一、vue的介绍
1. Vue.js是什么
2. 库和框架的区别
3.基本概念和用法
二、MVVM的介绍
1. 什么是MVVM
2. MVVM的组成部分
3. MVVM的工作流程
4. MVVM的优势
5. MVVM的应用场景
三、vue实例
1.模板语法
2.双向数据绑定
3.虚拟dom实例
四、vue生命周期钩子
总结 前言 Vue.js是一款流行的JavaScript框架它的核心库专注于视图层使得开发者能够轻松地构建交互式Web界面。Vue的生命周期是指Vue实例从创建到销毁的整个过程它包含了一系列的钩子函数可以让我们在不同的阶段执行相应的操作。下面是一篇关于Vue入门及生命周期详解的文章希望对你有所帮助。
一、vue的介绍
1. Vue.js是什么 Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 官网https://cn.vuejs.org/ Vue作者尤雨溪/中国无锡
2. 库和框架的区别 2.1 库(Library)本质上是一些函数的集合。每次调用函数实现一个特定的功能接着把控制权交给使用者 代表jQuery jQuery这个库的核心DOM操作即封装DOM操作简化DOM操作 2.2 框架(Framework)是一套完整的解决方案使用框架的时候需要把你的代码放到框架合适的地方框架会在合适的时机调用你的代码 代表vue 框架规定了自己的编程方式是一套完整的解决方案 使用框架的时候由框架控制一切我们只需要按照规则写代码 框架的侵入性很高(从头到尾)
3.基本概念和用法
Vue实例Vue应用的入口通过实例化Vue类来创建一个Vue实例。可以在实例中定义数据、方法、计算属性等。模板语法Vue使用一种类似HTML的模板语法可以将数据绑定到视图上。通过双大括号{{}}可以插入变量使用指令v-可以实现条件渲染、循环等功能。组件化Vue允许将页面拆分成多个组件每个组件都有自己的数据和视图。通过组件的嵌套和通信可以构建复杂的应用。
二、MVVM的介绍
1. 什么是MVVM MVVM是Model-View-ViewModel的缩写它是一种软件架构模式用于将用户界面的逻辑与数据的处理分离。在MVVM中界面的逻辑被放置在ViewModel中而数据的处理则由Model负责。View负责展示数据并与ViewModel进行交互。
2. MVVM的组成部分 ModelModel代表数据层负责处理数据的获取、存储和操作。它可以是数据库、网络请求、本地文件等数据源。 ViewView代表用户界面负责展示数据和接收用户的输入。它可以是一个页面、一个控件或者一个组件。 ViewModelViewModel是View和Model之间的桥梁负责处理界面的逻辑和数据的转换。它从Model中获取数据并将数据转换为View可以展示的格式。ViewModel还负责处理用户的输入并将输入传递给Model进行处理。
3. MVVM的工作流程 用户与View进行交互例如点击按钮或输入文本。 View将用户的交互事件传递给ViewModel。 ViewModel接收到用户的交互事件后根据需要从Model中获取数据。 ViewModel将获取到的数据进行处理和转换然后将处理后的数据传递给View。 View接收到ViewModel传递的数据后将数据展示给用户。 如果用户再次进行交互重复上述步骤。
4. MVVM的优势 分离关注点MVVM将界面的逻辑与数据的处理分离使得代码更加清晰和可维护。 可测试性由于界面的逻辑被放置在ViewModel中可以更容易地对ViewModel进行单元测试。 可复用性ViewModel可以独立于具体的界面进行开发可以在不同的界面中复用。 响应式编程MVVM框架通常支持响应式编程可以实现数据的自动更新和绑定。
5. MVVM的应用场景
MVVM适用于需要处理大量数据和复杂交互的应用场景特别是前端开发和移动应用开发。它可以帮助开发者更好地组织代码提高开发效率和代码质量。 注1虽然没有完全遵循MVVM模型Vue的设计无疑受到了它的启发。 注2学习Vue要转化思想“不要在想着怎么操作DOM而是想着如何操作数据”
三、vue实例
1.模板语法
Vue使用基于HTML的模板语法允许你将数据绑定到DOM元素。使用双大括号{{}}进行数据绑定使用v-指令如v-model进行属性绑定。
!DOCTYPE html
htmlheadmeta charsetutf-8!-- 导入工具 --script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scripttitle/title/headbody!-- 定义vue所管理的边界有且只有一个根节点 --div idapp{{msg}}/divscript typetext/javascript// 构建vue实例并绑定边界new Vue({el: #app,data(){return {msg: Hello Vue!你 biao哥哥 又来咯}}})/script/body
/html2.双向数据绑定
边界中的变量和vue实例中的变量定义
!DOCTYPE html
htmlheadmeta charsetutf-8!-- 导入工具 --script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scripttitle/title/headbody!-- 定义vue所管理的边界有且只有一个根节点 --div idapp{{msg}}input typetext v-modelmsg //divscript typetext/javascript// 构建vue实例并绑定边界new Vue({el: #app,data(){return {msg: Hello Vue!你 biao哥哥 又来咯}},})/script/body
/html3.虚拟dom实例
!DOCTYPE html
htmlheadmeta charsetutf-8!-- 导入工具 --script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scripttitle/title/headbody!-- 定义vue所管理的边界有且只有一个根节点 --div idapp{{msg}}input typetext v-modelmsg /button typebutton clicktan()发送/button/divscript typetext/javascript// 构建vue实例并绑定边界new Vue({el: #app,data(){return {msg: Hello Vue!你 biao哥哥 又来咯}},methods:{tan(){alert(this.msg)}}})/script/body
/htmlv-model是Vue中非常重要的一个指令用于在表单控件元素和Vue实例之间创建双向数据绑定。当用户输入表单控件的值时v-model会自动更新Vue实例中的值当Vue实例中的数据发生变化时v-model也会自动更新表单控件的值。 value是v-model指令绑定的表单控件元素的value属性。它表示表单控件当前显示的值也是Vue实例中通过v-model指令绑定的数据。 click是Vue中的事件监听器指令用于在元素上添加点击事件处理函数。当用户点击该元素时Vue实例中绑定了click事件的函数就会被执行。 四、vue生命周期钩子
Vue的生命周期可以分为创建、更新和销毁三个阶段每个阶段都有对应的钩子函数。下面是Vue的生命周期钩子函数及其对应的阶段
beforeCreate在实例初始化之后数据观测和事件配置之前调用。created在实例创建完成后调用此时已经完成了数据观测和事件配置。beforeMount在挂载开始之前调用此时模板已经编译完成但尚未挂载到DOM上。mounted在挂载完成后调用此时实例已经挂载到DOM上。beforeUpdate在数据更新之前调用可以在此时修改数据。updated在数据更新之后调用DOM已经重新渲染。beforeDestroy在实例销毁之前调用可以在此时进行一些清理工作。destroyed在实例销毁之后调用此时实例中的所有东西都已经被销毁。 除了这些常用的生命周期钩子函数Vue还提供了一些其他的钩子函数如activated和deactivated用于处理keep-alive组件的激活和停用。
生命周期示例图 示例
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlescript srchttps://cdn.bootcss.com/vue/2.6.10/vue.js/script/headbodydiv idd1divnumber:{{number}}/divdiv{{detail()}}/divinput typetext v-modelnumber //divscriptvar data {number:999,msg:null};var vm new Vue({el:#d1,data:data,methods:{detail:function(){return 使用方法来插值this.msg;}},beforeCreate:function(){console.log(beforeCreate:刚刚new Vue()之后这个时候数据还没有挂载呢只是一个空壳) console.log(this.msg)//undefinedconsole.log(document.getElementsByClassName(myp)[0])//undefined},created:function(){console.log(created:这个时候已经可以使用到数据也可以更改数据,在这里更改数据不会触发updated函数)this.msg!!!console.log(在这里可以在渲染前倒数第二次更改数据的机会不会触发其他的钩子函数一般可以在这里做初始数据的获取)console.log(接下来开始找实例或者组件对应的模板编译模板为虚拟dom放入到render函数中准备渲染)},beforeMount:function(){console.log(beforeMount虚拟dom已经创建完成马上就要渲染,在这里也可以更改数据不会触发updated)this.msgconsole.log(在这里可以在渲染前最后一次更改数据的机会不会触发其他的钩子函数一般可以在这里做初始数据的获取)console.log(document.getElementsByClassName(myp)[0])//undefinedconsole.log(接下来开始render渲染出真实dom)},// render:function(createElement){// console.log(render)// return createElement(div,hahaha)// },mounted:function(){ console.log(mounted此时组件已经出现在页面中数据、真实dom都已经处理好了,事件都已经挂载好了)console.log(document.getElementsByClassName(myp)[0])console.log(可以在这里操作真实dom等事情...)// this.$options.timer setInterval(function () {// console.log(setInterval)// this.msg! // }.bind(this),500)},beforeUpdate:function(){//这里不能更改数据否则会陷入死循环console.log(beforeUpdate:重新渲染之前触发)console.log(然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染) },updated:function(){//这里不能更改数据否则会陷入死循环console.log(updated:数据已经更改完成dom也重新render完成)},beforeDestroy:function(){console.log(beforeDestory:销毁前执行$destroy方法被调用的时候就会执行,一般在这里善后:清除计时器、清除非指令绑定的事件等等...)// clearInterval(this.$options.timer)},destroyed:function(){console.log(destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳这里也可以善后)}});/script/body
/html总结
Vue.js是一款非常强大且易于上手的JavaScript框架通过数据驱动视图的方式使得我们可以更加高效地构建用户界面。同时了解Vue的生命周期也是非常重要的它可以帮助我们在不同的阶段执行相应的操作。希望这篇文章对你有所帮助祝你在学习Vue.js的过程中取得进步
