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,下载之后一步步默认安装即可
PS:检查node是否安装成功,并查看版本号:按住电脑的win+R键盘,调出终端控制台,输入命令行:node -v或node --version,如果能出现以下界面,即代码node安装成功。
2、下载安装VScode代码编辑工具
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、点击提交按钮,把输入框的姓名、年龄、性别渲染到下方。