江门建站模板搭建,深圳公司做网站,网站建设情况调研报告,免费网站软件制作一、Vue介绍
1.1 什么是Vue #xff1f; Vue是一个渐进式的JavaScript框架#xff0c;用于构建用户界面。渐进式意味着Vue的设计理念是逐步增强应用的功能和复杂性#xff0c;而不是一次性地引入所有功能。这使得开发者可以根据项目需求选择性地使用Vue的不同特…一、Vue介绍
1.1 什么是Vue Vue是一个渐进式的JavaScript框架用于构建用户界面。渐进式意味着Vue的设计理念是逐步增强应用的功能和复杂性而不是一次性地引入所有功能。这使得开发者可以根据项目需求选择性地使用Vue的不同特性和功能。 1.2 Vue的优点
Vue具有许多实际应用的优点以下是其中一些
易学易用Vue具有简单直观的API和清晰的文档使得初学者可以快速上手。它的语法和概念与传统的HTML、CSS和JavaScript非常相似降低了学习曲线。渐进式开发Vue的渐进式特性使得开发者可以根据项目需求选择性地使用Vue的不同特性和功能。这种灵活性使得Vue适用于各种规模和复杂度的项目。响应式数据绑定Vue的响应式数据绑定机制使得数据和视图保持同步当数据发生变化时相关的DOM元素会自动更新。这简化了开发过程减少了手动操作DOM的工作量。组件化开发Vue鼓励开发者将应用拆分为多个可复用的组件每个组件都有自己的模板、逻辑和样式。组件化开发提高了代码的可维护性和复用性同时也使得团队协作更加高效。虚拟DOM和高性能Vue使用虚拟DOM来提高性能。通过比较虚拟DOM的差异Vue只更新需要更新的部分减少了对真实DOM的操作提高了性能。此外Vue还具有异步渲染和组件级别的懒加载等优化策略进一步提升了应用的性能。生态系统和插件支持Vue拥有庞大的生态系统有许多第三方库和插件可供选择。这些库和插件可以帮助开发者解决各种问题提高开发效率。 Vue具有易学易用、灵活性强、性能优越、可维护性高等优点使得它成为构建现代化Web应用的理想选择。作为软件工程师我经常使用Vue来开发前端应用并且不断学习和探索Vue的最新技术和最佳实践以提供高质量的用户界面。 1.3 库与框架的区别 库Library如js中最典型的是jQuery
库是一组可重用的代码集合用于解决特定的问题或提供特定的功能。它通常包含一系列函数、类、方法或工具开发者可以根据需要选择性地使用库中的功能。库的使用方式是主动调用开发者在自己的代码中引入库并根据需要调用库中的函数或方法来完成特定的任务。库通常具有较小的体积只提供特定的功能开发者可以根据自己的需求选择合适的库来构建应用。 2.框架Framework
框架是一种软件架构的基础提供了一整套解决方案和工具用于开发特定类型的应用程序。它定义了应用程序的结构、规范和工作流程开发者需要按照框架的规则进行开发。框架的使用方式是被动调用开发者编写应用程序的代码并将其嵌入到框架中由框架来控制应用程序的执行流程。框架通常具有较大的体积提供了完整的开发环境和一系列的功能模块开发者可以基于框架进行快速开发减少重复性的工作。 二、Vue入门
2.1 MVVM数据双向绑定 在使用之前我们先来了解一下什么是MVVM简单来说它一种更好的UI模式解决方案MVVM可以通过数据双向绑定让数据自动地双向同步
MVVMM-V-VMM model数据模型 V view视图 VMViewModel视图模型把Model和view关联起来就是ViewModelviewModel负责把Model的数据同步到View显示出来还负责把View的修改同步回Model 1) V修改数据 - M 将视图层的数据通过事件将数据提交到后端服务器(前端到后端) $(#btn_login).click(function(){ 通过ajax将页面中的数据通过json格式传递到后端服务器 }); 2) M修改数据- V 将后端数据JSON通过赋值的方式在视图层展现(后端到前端) 通过ajax的方式调用后端的数据接口将回传过来的JSON数据渲染到页面 $(#book_name).val(xxx); 相比之下MVC模式MVVM模型是一种更现代化的架构模式它在MVC模式的基础上引入了一个新的组件视图模型ViewModel。MVVM模式将应用程序分为四个主要组件模型Model、视图View、视图模型ViewModel和数据绑定Data Binding。模型负责处理数据和业务逻辑视图负责展示用户界面视图模型则充当模型和视图之间的中介负责处理视图的状态和行为。数据绑定机制使得视图和视图模型之间的数据同步更加简单和自动化。MVVM模式的优点是将视图和业务逻辑分离使得代码更易于维护和测试并且通过数据绑定机制提供了更好的用户界面交互体验。 2.2 BootCDN加速服务
官方网址BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 CDN的全称是Content Delivery Network即内容分发网络CDN是构建在网络之上的内容分发网络依靠部署在各地的边缘服务器通过中心平台的负载均衡、内容分发、调度等功能模块使用户就近获取所需内容降低网络拥塞提高用户访问响应速度和命中率。
CDN的关键技术主要有内容存储和分发技术。CDN加速主要是加速静态资源如网站上面上传的图片、媒体以及引入的一些Js、css等文件。CDN加速需要依靠各个网络节点例如100台CDN服务器分布在全国范围从上海访问会从最近的节点返回资源这是核心。CDN服务器通过缓存或者主动抓取主服务器的内容来实现资源储备。CDN基本原理将源站内容分发至最接近用户的节点使用户可就近取得所需内容提高用户访问的响应速度和成功率。CDN部署在网络提供商的机房是用户在请求网络服务的时候可以从距离最近的网络提供商机房获取数据。
最大的优势就是可以让用户就近访问资源这样我们就不需要下载所需要的工具或库便捷开发减少项目资源。 使用cdn的坏处 说完好处也要说说坏处了对于不使用cdn的网站来说它崩任他崩我自坐如松。对于少数资源依赖cdn的网站来说可能仅影响体验比如页面显示、js事件等但对于严重依赖cdn的网站来说只能说同归于尽了。。。 三、Vue实例
3.1 Vue开发示例 vue有两种开发方式一种是直接页面开发一种是工程级开发本示例使用的是直接页面开发方式。 注 1. 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的。 2. 需要给vue指定一个内容管理区通常我们也把它叫做边界这意味着我们接下来的改动全部在指定的div内div外部无用。 3. 双花括号叫做插值 !DOCTYPE html
htmlheadmeta charsetutf-8 /titleVue入门/title!-- 1. 导入工具 --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.min.js/script/headbody!-- 2. 定义vue所管理的边界有且只有一个根节点 --div idxwh1{{msg}}/h1/divscript typetext/javascript/* 3. 构建vue实例并绑定边界 */new Vue({el:#xw,data(){return{msg:hello 小威,}}})/script/body
/html
3.2 双向数据绑定 vue指令指的是是带有“v-”前缀的特殊属性vue实例的methods用来定义交互事件使用的函数,函数名不限制 !DOCTYPE html
htmlheadmeta charsetutf-8 /titleVue入门/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/script/headbodydiv idxwh1{{msg}}/h1pinput v-modelmsg /!-- v-on:也可以用替代 --button v-on:clickgetMsg获取输入框内容/button/p/divscript typetext/javascriptnew Vue({el: #xw,data() {return {msg: 123,}},methods: {getMsg() {alert(this.msg);}}})/script/body
/html 注 数据的改变会引起DOM的改变DOM的改变也会引起数据的变化 只有当实例被创建时data中存在的属性才是响应式的 用v-model指令在表单控件元素上创建双向数据绑定 this在methods属性的方法里指向当前Vue实例 console对象可以使用printf风格的占位符。只支持字符%s、整数%d或%i、浮点数%f和对象%o四种 Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$以便与用户定义的属性区分开来 3.3 Vue生命周期钩子 Vue生命周期钩子是在Vue实例的不同阶段执行的回调函数。这些钩子函数允许我们在特定的生命周期阶段执行自定义逻辑以便在应用程序的不同阶段进行初始化、更新和销毁操作。
以下是Vue的生命周期钩子函数
beforeCreate在实例被创建之前调用此时数据观测和事件配置尚未完成。created在实例创建完成后调用此时已完成数据观测但尚未挂载到DOM上。beforeMount在实例挂载到DOM之前调用。mounted在实例挂载到DOM后调用此时可以访问到DOM元素。beforeUpdate在数据更新之前调用发生在虚拟DOM重新渲染和打补丁之前。updated在数据更新之后调用发生在虚拟DOM重新渲染和打补丁之后。beforeDestroy在实例销毁之前调用此时实例仍然完全可用。destroyed在实例销毁之后调用此时实例已被销毁所有的事件监听器和子实例也被移除。 除了这些常用的生命周期钩子函数Vue还提供了一些其他的钩子函数如activated和deactivated用于处理keep-alive组件的激活和停用。 销毁与Java的多线程一样自动回收
