关于协会网站建设的意见,宜宾建设局网站,北京工程建设公共资源交易平台,河源网站建设1993seo一#xff0c;对Vue的概念
1.1 什么是Vue #xff1f; 一种流行的JavaScript前端框架#xff0c;用于构建交互式的Web应用程序。它以简洁、灵活和高效的特性而受到广泛欢迎。Vue采用了一种响应式的数据绑定机制#xff0c;使得数据的变化能够自动更新相关的DOM元素#x…一对Vue的概念
1.1 什么是Vue 一种流行的JavaScript前端框架用于构建交互式的Web应用程序。它以简洁、灵活和高效的特性而受到广泛欢迎。Vue采用了一种响应式的数据绑定机制使得数据的变化能够自动更新相关的DOM元素同时也提供了一套简洁明了的语法和API使得开发人员能够更轻松地构建和维护复杂的用户界面 总而言之Vue是一种功能强大且易于学习的前端框架适用于开发各种规模的Web应用程序从简单的页面增强到复杂的单页面应用 1.2 使用Vue的好处 简洁易学提供了简洁的API和清晰的文档使得学习和上手变得相对容易。 响应式使用了响应式的数据绑定机制当数据发生变化时自动更新相关的DOM元素减少了手动操作DOM的繁琐。 组件化开发鼓励组件化开发将界面拆分为独立可复用的组件提高了代码的可维护性和可重用性。 生态系统拥有强大的生态系统包括Vue Router、Vuex等插件和工具能够满足不同规模项目的需求。 性能优化通过虚拟DOM和精细的更新策略提高了应用程序的性能并保持了灵活性和开发效率 二Vue的基础入门
2.1 MVVM数据双向绑定 在使用之前我们先来了解一下什么是MVVM简单来说它一种更好的UI模式解决方案MVVM可以通过数据双向绑定让数据自动地双向同步 MVVM M-V-VM 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 加速服务 BootCDN是一个免费的CDN加速服务致力于为Bootstrap、jQuery、React、Vue.js一样优秀的前端开源项目提供稳定、快速的免费CDN加速服务。BootCDN所收录的开源项目主要同步于cdnjs。你可以通过BootCDN提供的链接直接使用这些开源库而无需下载到本地从而加快页面的加载速度 。 三Vue实例
3.1 Vue开发示例
导入相对应的工具在BootCDN供的链接直接使用这些开源库copy即可
script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/script
script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script 注 1. 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的。 2. 需要给vue指定一个内容管理区通常我们也把它叫做边界这意味着我们接下来的改动全部在指定的div内div外部无用。 3. 双花括号叫做插值 1 定义边界 div idBing{{msg}}/div
2 创建Vue实例 bodyscript typetext/javascript new Vue({el:#Bing,data(){return {msg:Hello Bing!}}})/script/body 3.2 Vue的基本语法
vue指令指的是是带有“v-”前缀的特殊属性vue实例的methods用来定义交互事件使用的函数,函数名不限制 ①v-model 在Vue中v-model是一个指令用于在表单控件元素上创建双向数据绑定。它实际上是语法糖等同于v-bind和v-on的结合体 定义边界 !--定义vue管理的边界有且只有一个根节点---div idBing{{msg}}input v-modelmsgbr//div Vue实例 script typetext/javascript !--构建vue实例并绑定边界--new Vue({el:#Bing,data(){return {msg:Bing!}}}) ②v-bindvalue 在Vue中v-bind是一个指令用于将元素的属性与Vue实例的数据进行绑定。其中value是v-bind的一个参数表示要绑定的属性名 ③事件绑定 !--完整写法--
button v-on:事件名函数名/vue表达式点我/button
!--简化写法--
button 事件名函数名/vue表达式点我/button Vue支持html中所有已知事件. 如: click, submit等, 只不过是将之前的on全部换成了 如button中的click !DOCTYPE html
htmlheadmeta charsetutf-8title/title!--导入相对应的工具--script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/script/headbody!--定义vue管理的边界有且只有一个根节点---div idBing!-- {{msg}} --input :valuemsgbr/button clicktan()点击我弹出输入框内容/button/divscript typetext/javascript !--构建vue实例并绑定边界--new Vue({el:#Bing,data(){return {msg:Bing!}},methods:{tan(){alert(this.msg)}}})/script/body
/html 四Vue的生命周期 Vue生命周期钩子是在Vue实例的不同阶段执行的回调函数。这些钩子函数允许我们在特定的生命周期阶段执行自定义逻辑以便在应用程序的不同阶段进行初始化、更新和销毁操作。
以下是Vue的生命周期钩子函数 beforeCreate在实例被创建之前调用此时数据观测和事件配置尚未完成。 created在实例创建完成后调用此时已完成数据观测但尚未挂载到DOM上。 beforeMount在实例挂载到DOM之前调用。 mounted在实例挂载到DOM后调用此时可以访问到DOM元素。 beforeUpdate在数据更新之前调用发生在虚拟DOM重新渲染和打补丁之前。 updated在数据更新之后调用发生在虚拟DOM重新渲染和打补丁之后。 beforeDestroy在实例销毁之前调用此时实例仍然完全可用。 destroyed在实例销毁之后调用此时实例已被销毁所有的事件监听器和子实例也被移除。 Vue生命周期图:
