【Vue】vue概述
1、简介
- Vue.js(简称Vue)是一款用于构建用户界面的渐进式JavaScript框架。
- 由前Google高级软件工程师尤雨溪(Evan You)于2014年创建,是一个独立且社区驱动的开源项目。
- Vue.js基于标准的HTML、CSS和JavaScript,提供了一个声明式、组件化的编程模型,旨在高效地开发用户界面。
- Vue.js凭借其易用性、灵活性和高性能,在前端开发领域占据了重要的地位,适用于从简单的单页面应用到复杂的大型企业级应用。
2、主要特点
- 响应式数据绑定:Vue.js提供了响应式数据绑定机制,使得数据的变化能够自动反映在视图上,简化了开发过程。
- 组件化:Vue.js鼓励通过小型、独立和可复用的组件构建应用,提高了代码的可维护性和可重用性。
- 指令系统:Vue.js增加了一套特殊的HTML属性,称为“指令”,用于实现DOM元素的绑定和事件的监听等功能。
- 虚拟DOM:Vue.js使用虚拟DOM技术来提高页面的渲染效率,通过最小化DOM操作来优化性能。
- 易于学习和集成:Vue.js的核心库只关注视图层,易于学习和集成到现有项目中。
- 生态系统丰富:Vue.js拥有庞大的社区支持和完善的生态系统,包括官方路由管理器Vue Router、状态管理库Vuex等,为开发者提供了丰富的工具和库。
3、框架结构
3.1核心部分
- 实例(Vue Instance):每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的。实例是Vue应用的入口,包含了应用的数据、模板、挂载元素、方法、生命周期钩子等选项。
- 模板(Template):Vue.js使用基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。模板中的特殊HTML属性(指令)告诉Vue如何渲染DOM。
- 组件(Component):Vue.js鼓励使用组件化的开发模式,将界面拆分成独立、可复用的组件。每个Vue组件都包含自己的模板、逻辑和样式,它们可以是全局注册的,也可以是局部注册的。
- 路由(Vue Router):Vue Router是Vue.js的官方路由管理器,用于构建单页面应用(SPA)。它允许你定义多个路由,每个路由映射一个组件,实现页面的无缝切换。
- 状态管理(Vuex):Vuex是Vue.js的官方状态管理模式,用于在多个组件之间共享状态。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
3.2实例
3.2.1简介
- Vue实例是Vue.js框架中的核心概念,它代表了Vue应用中的一个独立单元,用于管理数据、模板、方法以及与视图相关的逻辑。
- Vue实例通过
new Vue()
构造函数创建。在创建Vue实例时,可以传入一个选项对象,该对象包含了Vue实例所需的各种配置,如挂载元素(el
)、数据(data
)、方法(methods
)、计算属性(computed
)、侦听器(watch
)等。
例如:
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
}
});
3.2.2主要组成部分
- 数据对象(
data
):- 包含Vue应用的状态数据,这些数据将被响应式地绑定到视图上。
- Vue会自动将
data
中的属性转换为getter和setter,从而实现数据的响应式更新。
- 模板(Template):
- Vue实例使用的HTML模板,定义了最终生成的视图结构。
- 模板中可以使用Vue的模板语法来绑定数据、定义事件处理器等。
- 方法(
methods
):- 在Vue实例中可以定义各种方法,用于处理业务逻辑、处理用户事件等。
- 方法中的
this
自动绑定为Vue实例本身。
- 生命周期钩子(Lifecycle Hooks):
- Vue实例具有一系列的生命周期钩子函数,允许我们在不同阶段执行自定义逻辑。
- 常用的生命周期钩子包括
beforeCreate
、created
、beforeMount
、mounted
、beforeUpdate
、updated
、beforeDestroy
、destroyed
等。
- 计算属性(
computed
):- 根据已有的数据计算衍生数据的方式,计算属性的值会根据依赖的数据动态更新。
- 计算属性是基于它们的响应式依赖进行缓存的,只有在相关响应式依赖发生改变时它们才会重新求值。
- 侦听器(
watch
):- Vue实例可以侦听数据的变化,并在数据发生变化时执行相应的逻辑。
- 侦听器适用于执行异步操作或开销较大的操作。
- 事件处理器:
- 在Vue实例中可以绑定处理DOM事件的方法。
- 事件处理器通过
v-on
指令或@
符号绑定到DOM元素上。
- 指令(Directives):
- Vue提供了一些内置指令,如
v-bind
、v-model
、v-if
、v-for
等,用于在模板中插入数据绑定和动态内容。
- Vue提供了一些内置指令,如
- 过滤器(Filters):
- Vue中的过滤器允许我们在模板中对数据进行格式化显示。
- 需要注意的是,在Vue 2.x版本中过滤器仍然可用,但在Vue 3.x版本中已被移除,推荐使用计算属性或方法来实现相同的功能。
4、安装使用流程
Vue.js的安装和使用流程通常包括以下几个步骤:
1、安装Vue CLI:Vue CLI是Vue.js的官方命令行工具,用于快速搭建Vue项目。你可以通过npm(Node包管理器)来全局安装Vue CLI。
npm install -g @vue/cli
2、创建Vue项目:使用Vue CLI创建一个新的Vue项目。在命令行中运行vue create
命令,并跟随提示选择配置选项。
vue create my-vue-project
3、进入项目目录:创建项目后,进入项目文件夹。
cd my-vue-project
4、启动开发服务器:在项目目录中,运行Vue CLI提供的开发服务器命令,启动一个热重载的本地开发服务器。
npm run serve
5、开发应用:在开发服务器运行的情况下,你可以开始编辑你的Vue项目了。主要的工作将在src
文件夹内进行,这里包含了项目的源代码、组件、视图等。
6、构建和部署:当应用开发完成并准备好部署时,可以使用Vue CLI的构建命令来生成生产版本的应用。
npm run build
原文地址:https://blog.csdn.net/wosixiaokeai/article/details/140651669
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!