Vue框架详解与Element
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
- 与其他框架对比的优势
| 特性 | Vue | React | Angular |
|---|---|---|---|
| 学习曲线 | 平缓 | 中等 | 陡峭 |
| 性能 | 优秀 | 优秀 | 良好 |
| 灵活性 | 高 | 高 | 中等 |
| 模板语法 | HTML 模板 | JSX | HTML 模板 |
| 数据绑定 | 双向/单向 | 单向 | 双向 |
| 体积 | 轻量(约 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模型解析
- MVVM（Model-View-ViewModel）是一种软件架构模式，由三部分组成：
- Model（模型）：应用程序的数据和业务逻辑
- View（视图）：用户界面（UI）的展示层
- ViewModel（视图模型）：连接View和Model的桥梁
[用户操作] (点击/输入)│▼
[视图 View] (HTML模板)│ ▲│ │ 显示数据▼ │
[视图模型 ViewModel] (Vue实例)│ ▲│ │ 数据变化▼ │
[模型 Model] (JavaScript对象)
4.2 双向数据绑定
双向数据绑定是指：
- 数据变化自动更新视图（Model → View）
- 视图交互自动更新数据（View → Model）
二、Vue常用指令
1.文本插值 {{ }}
<div id="app"><p>{{ message }}</p>
</div><script>
new Vue({el: '#app',data: {message: '你好Vue!'}
})
</script>
2. 属性绑定 v-bind
<div id="app"><a :href="link">点击跳转</a>
</div><script>
new Vue({el: '#app',data: {link: 'https://vuejs.org'}
})
</script>
3.条件渲染 v-if/v-show
<div id="div"><!-- 判断num的值，对3取余 余数为0显示div1 余数为1显示div2 余数为2显示div3 --><div v-if="num % 3 == 0">111</div><div v-else-if="num % 3 == 1">222</div><div v-else="num % 3 == 2">333</div><div v-show="flag">我会显示/隐藏</div>
</div><script>new Vue({el:"#div",data:{num:1,flag:false}});
</script>
</html>
4.列表渲染 v-for
<div id="app"><ul><li v-for="item in items" >{{ item }}</li></ul><ol><li v-for="item in student" >{{ item }}</li></ol>
</div><script>
new Vue({el: '#app',data: {items: ['苹果', '香蕉', '橘子'],student:{name:"张三",age:23}}
})
</script>
5.事件绑定v-on
<div id="app"><button @click="count++">点击 {{ count }} 次</button>
</div><script>
new Vue({el: '#app',data: {count: 0}
})
</script>
6.表单绑定 v-model
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app">{{username}}<input v-model="username" type="text" /></div></body><script>new Vue ({el:"#app",data:{username:"哈哈哈"},methods:{}})</script>
</html>
7.总结
| 指令 | 作用 | 简写 | 示例 |
|---|---|---|---|
{{ }} | 文本插值 | 无 | {{ message }} |
v-bind | 属性绑定 | : | :href="url" |
v-if/v-show | 条件渲染 | 无 | v-if="isShow" |
v-for | 列表渲染 | 无 | v-for="item in items" |
v-on | 事件绑定 | @ | @click="handleClick" |
v-model | 表单绑定 | 无 | v-model="inputText" |
三、Vue生命周期与钩子函数
1.生命周期历程
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed
2.生命周期钩子函数示例
<div id="app"><p>{{ message }}</p><button @click="updateMessage">更新消息</button><button @click="destroyApp">销毁实例</button>
</div><script>
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 src="js/vue.js"></script>
<script src="js/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
- 创建Vue核心对象
<script>new Vue({el:"#app",data:{},methods:{}})
</script>
- 官网复制Element组件代码
引入Element 的css、js文件 和 Vue.js
<script src="js/vue.js"></script>
<script src="js/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">
- 创建Vue核心对象
<script>new Vue({el:"#app",data:{},methods:{}})
</script>
- 官网复制Element组件代码
