Vue框架详解与Element

GH小杨

于 2025-06-14 13:14:32 发布

阅读量805

点赞数 22

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/gannimeiwent/article/details/148651483

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组件代码

在这里插入图片描述