提供网站建设费用,北京网站定制流程,加强部门网站建设,大网站的建设重点Vue框架
一、Vue简介
1.什么是 Vue.js
Vue.js#xff08;通常简称为 Vue#xff09;是一套用于构建用户界面的渐进式 JavaScript 框架#xff0c;由前 Google 工程师尤雨溪#xff08;Evan You#xff09;于 2014 年发布。Vue 的核心库专注于视图层#xff0c;采用自底…Vue框架
一、Vue简介
1.什么是 Vue.js
Vue.js通常简称为 Vue是一套用于构建用户界面的渐进式 JavaScript 框架由前 Google 工程师尤雨溪Evan You于 2014 年发布。Vue 的核心库专注于视图层采用自底向上增量开发的设计易于与其他库或已有项目整合。
渐进式框架的含义
可以根据项目需求逐步采用 Vue 的功能可以从简单的页面交互开始逐步扩展到复杂的单页应用(SPA)核心库仅关注视图层路由、状态管理等由配套库提供
2.Vue 的主要特点和优势
响应式数据绑定组件化开发 将 UI 拆分为独立可复用的组件每个组件包含自己的 HTML、CSS 和 JavaScript提高代码复用性和可维护性 虚拟 DOM通过 JavaScript 对象模拟真实 DOM通过 Diff 算法找出最小更新范围比直接操作 DOM 更高效丰富的指令系统单文件组件 (.vue 文件)
3.为什么要选择 Vue
与其他框架对比的优势
特性VueReactAngular学习曲线平缓中等陡峭性能优秀优秀良好灵活性高高中等模板语法HTML 模板JSXHTML 模板数据绑定双向/单向单向双向体积轻量(约 20KB)中等(约 40KB)较大(约 60KB)
适合使用 Vue 的场景 快速原型开发Vue 的简单性使其成为快速构建原型的理想选择中小型 Web 应用轻量级且易于集成渐进式增强现有项目可以逐步引入 Vue 到传统项目中需要高开发效率的团队学习成本低上手快需要灵活架构的项目既可以用作简单工具库也能构建复杂应用 企业级应用支持 TypeScript 支持Vue 3 对 TypeScript 有原生支持丰富的生态系统Vue Router、Vuex/Pinia、Vue CLI、Vite 等良好的工具链Vue DevTools、VSCode 插件等活跃的社区中文文档完善国内使用广泛
4.MVVM模型与双向数据绑定
4.1 MVVM模型解析
MVVMModel-View-ViewModel是一种软件架构模式由三部分组成 Model模型应用程序的数据和业务逻辑View视图用户界面UI的展示层ViewModel视图模型连接View和Model的桥梁
[用户操作] (点击/输入)│▼
[视图 View] (HTML模板)│ ▲│ │ 显示数据▼ │
[视图模型 ViewModel] (Vue实例)│ ▲│ │ 数据变化▼ │
[模型 Model] (JavaScript对象)4.2 双向数据绑定
双向数据绑定是指
数据变化自动更新视图Model → View视图交互自动更新数据View → Model
二、Vue常用指令
1.文本插值 {{ }}
div idappp{{ message }}/p
/divscript
new Vue({el: #app,data: {message: 你好Vue!}
})
/script2. 属性绑定 v-bind
div idappa :hreflink点击跳转/a
/divscript
new Vue({el: #app,data: {link: https://vuejs.org}
})
/script3.条件渲染 v-if/v-show
div iddiv!-- 判断num的值对3取余 余数为0显示div1 余数为1显示div2 余数为2显示div3 --div v-ifnum % 3 0111/divdiv v-else-ifnum % 3 1222/divdiv v-elsenum % 3 2333/divdiv v-showflag我会显示/隐藏/div
/divscriptnew Vue({el:#div,data:{num:1,flag:false}});
/script
/html4.列表渲染 v-for
div idappulli v-foritem in items {{ item }}/li/ulolli v-foritem in student {{ item }}/li/ol
/divscript
new Vue({el: #app,data: {items: [苹果, 香蕉, 橘子],student:{name:张三,age:23}}
})
/script5.事件绑定v-on
div idappbutton clickcount点击 {{ count }} 次/button
/divscript
new Vue({el: #app,data: {count: 0}
})
/script6.表单绑定 v-model
htmlheadmeta charsetutf-8title/titlescript srcjs/vue.js/script/headbodydiv idapp{{username}}input v-modelusername typetext //div/bodyscriptnew Vue ({el:#app,data:{username:哈哈哈},methods:{}})/script
/html7.总结
指令作用简写示例{{ }}文本插值无{{ message }}v-bind属性绑定::hrefurlv-if/v-show条件渲染无v-ifisShowv-for列表渲染无v-foritem in itemsv-on事件绑定clickhandleClickv-model表单绑定无v-modelinputText
三、Vue生命周期与钩子函数
1.生命周期历程
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed2.生命周期钩子函数示例
div idappp{{ message }}/pbutton clickupdateMessage更新消息/buttonbutton clickdestroyApp销毁实例/button
/divscript
new Vue({el: #app,data: {message: Hello Vue!},// 初始化阶段beforeCreate() {console.log(beforeCreate: 实例刚创建data和methods还未初始化)// console.log(this.message) // undefined},created() {console.log(created: 实例创建完成data和methods已初始化)console.log(message:, this.message)// 适合进行异步请求// fetchData().then(...)},// 挂载阶段beforeMount() {console.log(beforeMount: 模板编译完成但还未挂载到页面)// console.log(document.querySelector(p).innerHTML) // 原始内容},mounted() {console.log(mounted: 实例已挂载到DOM)console.log(DOM内容:, document.querySelector(p).innerHTML)// 可以访问DOM元素适合进行DOM操作},// 更新阶段beforeUpdate() {console.log(beforeUpdate: 数据更新前虚拟DOM重新渲染之前)console.log(当前DOM内容:, document.querySelector(p).innerHTML)},updated() {console.log(updated: 数据更新完成DOM已重新渲染)console.log(更新后DOM内容:, document.querySelector(p).innerHTML)},// 销毁阶段beforeDestroy() {console.log(beforeDestroy: 实例销毁前)// 清除定时器、取消事件监听等清理工作// clearInterval(this.timer)},destroyed() {console.log(destroyed: 实例已销毁)},methods: {updateMessage() {this.message Updated Message},destroyApp() {this.$destroy()}}
})
/script四、Element
1.什么是 ElementUI
ElementUI 是由饿了么前端团队开发的一套基于 Vue.js 2.0 的桌面端组件库提供丰富的组件帮助开发者快速构建功能强大、风格统一的页面1。它特别适合用于开发后台管理系统、企业级应用等场景。适用场景PC 端中后台系统开发如管理面板、数据可视化平台等。官网地址https://element.eleme.cn/可获取文档、示例及最新动态。
2.核心优势
一致性设计提供统一的视觉风格和交互逻辑确保界面美观且易用。高扩展性支持自定义样式和功能可灵活适配不同项目需求。丰富组件涵盖按钮、表格、表单、导航等 60 常用组件满足各类业务场景。良好兼容性兼容现代浏览器及 IE9需搭配 polyfill。完善文档提供详细的组件说明、示例代码和 API 文档便于快速上手。
3.如何去使用
将资源element-ui 文件夹直接拷贝到项目的 js文件夹下创建页面并在页面引入Element 的css、js文件 和 Vue.js
script srcjs/vue.js/script
script srcjs/element-ui/lib/index.js/script
link relstylesheet hrefjs/element-ui/lib/theme-chalk/index.css创建Vue核心对象
scriptnew Vue({el:#app,data:{},methods:{}})
/script官网复制Element组件代码
引入Element 的css、js文件 和 Vue.js
script srcjs/vue.js/script
script srcjs/element-ui/lib/index.js/script
link relstylesheet hrefjs/element-ui/lib/theme-chalk/index.css创建Vue核心对象
scriptnew Vue({el:#app,data:{},methods:{}})
/script官网复制Element组件代码
