关于Vue.js的相关内容

flex布局思维导图

Vue.js——概念篇

1、什么是Vue.js

1、Vue.js（读音 /vju/, 类似于 view） 是一套构建用户界面的渐进式框架。 2、Vue 只关注视图层， 采用自底向上增量开发的设计。 3、Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

两个核心：

（1）响应式数据绑定 当数据发生变化的时候，视图自动更新，即双向数据同步，原理利用了ES6中的 Object.definedProperty 中的setter/getter 代理数据，监控对数据的操作。 （2）组合的视图组件 即页面最终映射为一个组件树，采用树形数据结构进行设计，方便维护，重用。

虚拟DOM：

利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM。当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

MVVM

MVVM 是 Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对 View 和 ViewModel 的双向数据绑定，这使得 ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 M：Model（数据层，也就是指数据（前端是js）） V：View ( 也就是指DOM层 或用户界面 ) VM ： ViewModel (处理数据和界面的中间层，也就是指Vue)

MVVM

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

2、简单的实例

3、组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

任何应用都可以抽象为树

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。 在 Vue 中注册组件很简单：

Vue.js的优点

1. 简单易学 

Vue.js 的设计理念和 API 非常简单易懂，学习曲线较为平缓。

2. 高效灵活

Vue.js 采用了虚拟 DOM 技术实现页面渲染，能够快速响应用户操作，并且具有灵活的数据绑定和组件化编程能力。

3. 强大的生态系统

Vue.js 拥有一个庞大的社区，提供了大量的插件、组件库、工具和文档，便于用户开发项目。

4. 双向数据绑定

Vue.js 支持数据的双向绑定，当数据发生改变时，Vue.js 自动更新视图，减少了页面更新的时间和代码量。

5. MVVM 模式

Vue.js 借鉴了 AngularJS 的 MVVM 模式，将数据模型、视图和控制器分离，使得开发者可以更好地组织代码。

6. 组件化开发

Vue.js 支持组件化开发，能够有效提高代码的复用性和可维护性。

7. 面向未来

Vue.js 支持 ES6+ 特性，并与最新的前端技术栈完美地兼容，是一种面向未来的工具库。

　　综上所述，Vue.js 具有简单易学、高效灵活、强大的生态系统、双向数据绑定、MVVM 模式、组件化开发和面向未来等多方面的优点，是开发者进行前端开发的良好选择。

常用指令

概述：

指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。

1、v-text

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

2、v-html

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

3、v-bind

v-bind指令用于实现单向动态数据绑定。

前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。

绑定单个动态类名时：

绑定多个动态类名时：

vue脚手架项目环境配置

1、下载安装node,下载之后一步步默认安装即可

https://d0.ananas.chaoxing.com/download/97e620a3f985bda40327dc2ddf180946?at_=1703950029218&ak_=f847887260dcd913b32fb7f781dfbce5&ad_=817f7fe07e328e29aabfdf624d31bfbc&fn=node-v16.14.2-x64.msi

PS：检查node是否安装成功，并查看版本号:按住电脑的win+R键盘，调出终端控制台，输入命令行：node -v或node --version,如果能出现以下界面，即代码node安装成功。

2、下载安装VScode代码编辑工具

https://d0.ananas.chaoxing.com/download/67ae023b86d612846af6e575a9148db3?at_=1703950029252&ak_=8cfd3237f3df0a91e57d507162b96a12&ad_=bb9bc5b57d65b6b70bc19373741178ef&fn=VSCodeUserSetup-x64-1.63.2.exe

3、vue2项目调试插件，下载vue.js_devtools

卸载命令如下：

//  注意，第一次使用vue脚手架的同学可直接忽略此步骤

           npm uninstall vue-cli -g

1、vue cli 脚手架的安装

//  通过npm全局安装@vue/cli脚手架  @3.10表示下载某个指定版本，如果不写，则下载最新版本

           npm install -g @vue/cli

          

           PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

          //安装淘宝镜像的命令行

          ①  npm install -g cnpm --registry=https://registry.npmmirror.com

          // 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

          ②  cnpm install -g @vue/cli

        

         //PS：如需要卸载vue/cli包，可执行以下命令行

         npm uninstall -g @vue/cli

注意：最近发现很多同学使用npm命令经常容易出现卡死不懂是情况，如出现这种情况，清执行此命令，即可解决：

npm config set registry https://registry.npm.taobao.org

或者，哪个方式快，用哪个

npm config set registry https://registry.npmmirror.com

成功安装界面：

2、vue create 命令创建项目

// helloworld 是项目名，可自行定义          

vue create helloworld

执行 vue create 命令之后，可看到如下所示界面

在这个步骤中，可以使用键盘的↑和↓方向键选择创建项目的方式，default是默认选择项，表示使用默认的方式创建项目；Manually select features选项表示使用手动配置方式创建项目，在这里，我们选择手动的方式创建，手动配置界面如下图所示：

此界面中，可以使用键盘的↑和↓方向键选择创建项目的方式，按住空格键选择某一项，再次按住空格键，取消选择，每个配置项的作用如下表所示：

配置项	说明
Babel	JavaScript语法编译器
TypeScript	TypeScript是JavaScript的超集，其包含了并扩展了JavaScript的语法，需要被编译输出为JavaScript才能在浏览器运行
Progressive Web App (PWA) Support	渐进式Web应用程序
Router	vue-router（vue路由）
Vuex	vue的状态管理模式
CSS Pre-processors	CSS预处理器，如less或sass
Linter/Formatter	代码风格检查和格式化（如：ESlint）
Unit Testing	单元测试（unit tests）
E2E Testing	端对端测试

大家根据需求选择相应的配置项，一步步往后创建项目即可。项目创建成功之后，根据界面提示，可以执行如下两个命令行，进入项目目录，启动项目：

cd helloword

npm run serve

接下来，在浏览器输入：http://localhost:8080/  地址，即可看到如下页面

源码：
博客前端：https://github.com/Aimee1608/myblog2.0
管理后台：https://github.com/Aimee1608/myblog2.0-admin
服务端：https://github.com/Aimee1608/myblog2.0-server

项目基于node.js npm 安装vue-cli 脚手架后 的目录结构，如下图，根据项目的需求选择性的安装依赖和插件

搭建博客所安装的插件和依赖，如下图，我使用了 element-ui组件来开发样式，还有vue-resource和vue-router 以及css-loader等样式加载依赖，安装成功后，在webpack.config.js上写上相应的配置

得在上图中的routes完成主路由模块的配置，并且export出来，这里需要注意的是，可以通过component: resolve 来设置懒加载，对于带宽为1M的服务器来说，这点非常重要，不然打开页面需要好几分钟，还需要在webpack.config.js中注释掉 devtool: ‘#eval-source-map’，这个是项目webpack打包的时候设置的参数，使用webpack -p 这个命令打包，即为压缩打包，打包的文件更小，除去不需要的注释

接着是入口文件文件的配置，根据自己的需求，引入对应的模块和路由等文件

运行项目
使用命令窗口，cd到当前目录，使用npm run dev ，就可以打开运行项目，编辑项目保存的同时，页面会自动更新，即为实时监控。

模块化开发
之所以使用vue.js来开发博客项目，其中看中的一点就是模块化开发，就以打开页面的首页为例，如上面的结构介绍图，我分别使用了头部、尾部、右侧、文章列表这四个子模块组成，就如下图所示

子模块的结构和主模块一样，如果子模块中还需嵌套子模块，同上面一样

按照上面的步骤根据自己的需求添加自己的模块，整个博客网站就搭建完成啦，是不是很简单呢！如果需要了解vue.js具体的api 和element-ui组件的用法，可以访问官方网站，都有详细的说明哦！

组件的简介

概述：组件是Vue.js最强大的功能之一，组件可以扩展HTML元素，也可以封装可重用的代码，组件系统让开发人员可以用独立可复用的小组件来构建大型应用。

组件的出现，能够让开发人员以不同的组件，来划分不同的功能模块，将来需要什么样的功能，去调用对应的组件即可。

为什么使用组件

1、方便重复使用

2、减少代码重复冗余

3、便于多人协同开发

4、有助于提高开发效率

5、提升整个项目的可维护性

Tip:通常，代码中一些没有见过的自定义标签，如<my-component>等，就是组件。每一个标签代表一个组件，组件一旦注册成功，就可以复用，可以在很多需要的地方直接使用即可。

举例，比如 element和Vant 就是两个典型的提供了很多内置组件的UI框架。

组件的使用

1、在components 文件夹新建组件页面

2、在需要此组件的页面调用组件

组件之间的通信

组件是是Vue.js中最强大的功能之一。组件实例的作用域是相互独立的，这就意味着不同组件之间的数据是无法共享的。一般组件之间的关系如图所示。

A和B，B和C、B和D都是父子关系，C和D是兄弟关系，A和C、A和D是隔代关系（可能隔多代）。

组件通信时，根据组件之间的关系的不同，有着不同的通信方式。一般通信分为3种情况：父组件向子组件通信、子组件向父组件通信、非父子组件之间的通信。针对不同的场景，需要使用不同的通信方式。

1、父组件向子组件传递数据，需要props属性来实现。

2、子组件向父组件传值，需要用到自定义事件，整个通信的过程为：

        2.1、子组件使用this.$emit('事件名','需要传输的数据')来触发事件，父组件使用$on()来监听子组件的事件。

父组件向子组件通信

通常，父组件的模板中包含子组件，父组件要向子组件传递数据或者参数，子组件在接收到父组件的数据或参数后，会根据数据或参数的不同进行对应的渲染。而这个过程是通过props来实现的。

步骤：

1、调用子组件时，传递数据到子组件当中。

2、子组件接收父组件传进来的值

子组件向父组件通信

父组件向子组件传值通过props实现，反过来子组件向父组件传值需要通过$emit()方法向父组件暴露一个事件，然后父组件在处理这个事件的方法中获取子组件传过来的数据。

主要步骤：

① 在子组件中通过$emit向父组件暴露一个事件。

② 在父组件中处理子组件暴露出来的事件，并接收子组件传过来的值。

案例：

1、自定义一个表单组件，包含三个输入框和一个按钮。

2、点击提交按钮，把输入框的姓名、年龄、性别渲染到下方。