Vue
1.前端三要素
- HTML（结构）
- CSS（表现）
- JavaScript（行为）：弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页行为
CSS预处理器
简介：
定义了一种新的语言，用于进行CSS的编码工作，进行Web界面样式设计，再通过编译器转化成正常的CSS文件，以供项目使用。
常用的CSS预处理器：
- SASS：基于Ruby，荣国服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高
- LESS：基于Node JS，通过客户端处理，使用简单。功能比SASS简单，效率比SASS低，可满足一般需求。
JavaScript框架
jQuery库
优点在于简化了DOM操作，缺点是DOM操作太频繁，影响性能。
Angular库
特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript，对前端程序有不太友好。
React库
Facebook出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真实DOM操作，在内存中虚拟DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言。
Vue
一套渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化）和React（虚拟DOM）的优点。
Axios
前端通信框架，因为Vue的边界很明确，就是为了处理DOM，所以并不具有通信能力，此时就需要额外使用一个通信框架与服务器交互，当然也可以直接选择使用jQuery提供你的AJAX通信功能
2.JavaScript构建工具
- Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
- WebPack：模块打包器，主要作用是打包、压缩、合并及按序加载
3.前端所需后端计数
NodeJS框架及项目管理工具如下：
- Express：Node JS框架
- Koa：Express简化版
- NPM：项目综合管理工具，类似于Maven
- YARN：NPM的替代方案，类似Maven和Gradle的关系
4.UI框架
常用
- Ant-Design：阿里巴巴出品，基于React的UI框架
- ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
- Bootstrap：Twitter推出的一种用于前端开发的开源工具包
- AmazeUI：一款HTML5跨屏前端框架
- Layui：轻量级框架
iView
一个强大的基于Vue的框架，基础组件比elementui的组件更丰富，主要服务于PC界面的中后台产品。使用单文件的Vue组件化开发模式，基于npm + webpack + babel开发，支持ES6高质量、功能丰富友好的API，自由灵活地使用空间
特点：移动端支持较多
ElementUI
基本涵盖后端所需的所有组件，文档讲解详细，主要用于PC端开发，是质量比较高的Vue UI组件古
特点：桌面端支持多
ICE
以React为主，对Vue的支持不太完善
CubeUI
轻量灵活，拓展性强，方便二次开发
Flutter
Google出品，特点是快速构建原生APP应用程序，如果做混合应用该框架必选
5.MVVM模式
介绍
MVVM是一种软件架构设计模式，是一种简化用户界面的实践驱动编程方式。
MVVM源于经典的MVC。MVVM的核心是View Model层，负责转换Model中数据对象来让数据更加容易管理和使用，其作用如下：
- 该层向上与视图层进行双向数据绑定
- 向下与Model层通过接口请求进行数据交互
MVVM已经相当成熟了，当下流行的MVVM框架由Vue.js，Angularjs等。
为什么要使用MVVM
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：
- 低耦合：试图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候
- 可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑
- 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
- 可测试：测试可以针对ViewModel来写。
MVVM的组成部分
View：
View是视图层，也就是用户界面。前端主要由HTML和CSS构建，各大MVVM框架如：Vue.js，AngularJS，EJS等都有自己用来构建用户界面的内置模板语言。
Model：
Model是指数据模型，泛指后端进行的各种业务逻辑处理和数据操纵，主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则。
ViewModel：
ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的Model数据进行转换处理，做二次封装，以生成符合View层使用预期的试图数据模型。
需要注意的是ViewModel所封装出来的数据模型包括视图的状态和行为两部分，而Model层的数据模型是只包含状态的。
- 比如页面这一块展示什么，那一块展示什么这些都属于视图状态
- 页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）
双向绑定：ViewModel可以完整去描述View层，View层的内容也会实时展示在ViewModel层中。
View层展现的不是Model层的数据，而是viewModel的数据，由ViewModel负责与Model层交互，这就完全耦合了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。
MVVM模式的实现者
- Model：模型层，在这里表示JavaScript对象
- View：视图层，在这里表示DOM(HTML操作的元素)
- ViewModel：连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者。
- ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
- ViewModel能够监听到视图的变化，并能够通知数据发生改变
因此Vue.js就是一个MVVM的实现者，他的核心就是实现了DOM监听与数据绑定
Vue的优势
- 轻量级，体积比Angular和React小
- 移动优先，更加适合移动端
- 容易上手
- 吸收了Angular（模块化）和React（虚拟DOM）的长处，并拥有自己独特的功能
- 开源，社区的活跃度高
上手案例
//创建一个Vue实例
<script type = "text/javascript">
var vm = new vue({
el:'#vue', //绑定元素的ID
data:{
message:'hello vue!' //数据对象中有一个名为message的属性
};
})
</script>
将数据绑定到页面元素（视图层）
<div id = "vue">
{{message}}
</div>
6.基础语法
v-bind
v-bind可以简写为冒号（：）
v-if系列
- v-if
- v-else-if
- v-else
<body>
<div id="app">
<h1 v-if="type === 'A'">A</h1>
<h1 v-else-if="type === 'B'">B</h1>
<h1 v-else="type === 'C'">C</h1>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
type:'A'
}
})
</script>
</body>
v-for
主要用于读取数组元素，如items是一个数组元素迭代的别名
<div id = 'app'>
<li v-for="item in items">
{{item.message}}
</li>
</div>
v-on
用于监听事件，v-on可以简写为@，比如v-on:click可以简写为@click，用法：@click=“函数名(methods)”
v-model
与v-bind不同的是，它是双向绑定的，当数据发生变化的时候，视图会发生变化，当视图发生变化的时候，数据也会发生变化。
在用v-model处理表单、之类的元素时，可以实时更新，并且对一些极端场景进行一些特殊处理。
7.组件
组件就是可服用的Vue实例，有点像自定义标签。
组件之间一般也会存在各种关系。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5HrCx8a9-1633504457821)(C:\Users\86135\AppData\Roaming\Typora\typora-user-images\image-20210929145455844.png)]
说明：
- Vue.component()：注册组件
- my-component-li:自定义组件的姓名
- template：组件的模板
如果需要传递参数到组件的话，就需要使props属性了！
8.属性计算computed
计算属性的重点突出在属性两个字上，计算指的是函数，属性可以理解为缓存
methods和computed的区别
说明：
- methods：定义方法，调用方法使用方法名（），需要带括号
- computed：定义计算属性，调用属性，不需要带括号，一般是对data中的数据进行一定处理之后返回到view中
- 两者不能重名
结论：
调用方法时，每次都需要进行计算，每次都会产生开销，如果这个结果不是经常变化的，就可以考虑缓存起来。计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销
9.插槽slot
在Vue中使用元素，作为承载分发内容的出口，作者称其为查早，可以应用在组合组件的场景中；
比如准备制作一个待办事项组件（todo），该组件由代办标题（todo-title）和代办内容（todo-items）组成，但这三个组件又是相互独立的。
第一步：定义一个待办事项的组件，留出插槽slot
<todo></todo>
<script type="text/javascript">
//定义一个待办事项的组件
Vue.component('todo',{
template:'<div>\
<slot name ="todo-title"></slot>\
<ui>\
<slot name="todo-items"></slot>\
</ui>\
</div>'
});
</script>
第二步：定义一个名为todo-title的待办标题组件和todo-items的待办内容组件
Vue.component('todo-title',{
props:['title'],
template:'<div>
{{title}}
</div>'
});
Vue.component('todo-items',{
props:['item','index'],
template:'<li>
{{index + 1}}.{{item}}
</li>'
});
第三步：实例化Vue并初始化数据
new Vue({
el : '#APP',
data:{
todoItems:['A','B','C']
}
})
第四步：将这些值通过插槽插入
<div id="app"> <todo> <todo-title slot="todo-title" title="...."></todo-title> <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index"></todo-items> </todo></div>
10.自定义事件
数据项在Vue的实例中，但删除操作要在组件中完成。为了删除操作更好进行，涉及到参数传递和事件分发，Vue为我们提供了自定义事件的功能很好地帮助我们解决了这个问题；使用this.$emit(‘自定义事件名’，参数)
在vue实例中，增加了methods对象并定义了一个名为removeTodoItems的方法
new vue({ el:'#app', deta{ todoItems:['A','B','C'] }, methods:{ //该方法可以被模板中自定义事件出发 removeTodoItems：function(index){ this.todoItems.splice(index,1); } }})
修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法中
<todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index" v-on:remove="removeTodoItems(index)"></todo-items>
11.Axios
简介
Axios是一个开源的，可以在浏览器端和NodeJS的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下：
- 从浏览器创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API[JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
优势
由于Vue.JS是一个视图层框架，并且坐着严格遵守关注度分离原则，所以Vue.js并不包含AJAX的通信功能，为了解决通信问题，作者单独开发了名为vue-resource的插件，不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery，因为DOM操作太频繁！
案例
-
创建一个JSON文件，放在项目的根目录下
-
测试代码
-
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head><meta charset="UTF-8"> <title>title</title> <!--v-cloak 解决闪烁问题--> <style> [v-cloak] { display: none; }</style> </head> <body> <div id="vue" v-cloak> <div>名称：{{info.name}}</div> <div>地址：{{info.address.country}}-{{info.address.city}}- {{info.address.street}}</div> <div>链接：<a :href="info.url" target="_blank">{{info.url}}</a> </div> </div> <!--引入 JS 文件--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#vue', data(){ return { info: { name: null, address: { country: null, city: null, street: null }, url: null } },mounted() { //钩子函数 axios .get('data.json') .then(response => (this.info = response.data)); } }); </script> </body></html>- 在这里使用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
- 使用 axios 框架的 get 方法请求 AJAX 并自动将数据封装进了 Vue 实例的数据对象中
- 我们在data中的数据结构必须要和 Ajax 响应回来的数据格式匹配！
- 在 Vue 的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册 JS 方法，可以让我们
- 用自己注册的 JS 方法控制整个大局，在这些事件响应方法中的 this 直接指向的是 Vue 的实例。
Vue的生命周期函数
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UbS1wJ1q-1633504457824)(C:\Users\86135\Desktop\files\vue\资料（含课件）\02_原理图\生命周期.png)]
12.认识路由
Vue.js路由允许我们通过不同的URL访问不同的内容通过Vue.js可以实现多视图的单页Web应用
-
创建router文件夹
-
npm下载资源
npm install vuenpm install vue-router -
新建一个lib目录，将资源复制出来
-
创建一个路由.html
-
引入vue-router.min.js
-
编写html
<div id = "app"> <h1>Hello APP</h1> <p> <router-link to="/">首页</router-link> <router-link to="/student">会员管理</router-link> </p> <router-view></router-view></div> -
编写js
<script> //1.定义路由组件 const welcome = { template:'<div>欢迎</div>' } const Student = { template:'<div>student list</div>' } //2.定义路由 //每个路由应该映射一共组件 const routes=[ { path:'/',redirect:'/welcome' }, { path:'/welcome', component:welcome }, { path:'/student', component:student }, ] //3.创建router实例，然后传'router'配置 const router = new VueRouter({ routes:routes }) //4.创建和挂在根实例 //从而让整个应用都有路由功能 new Vue({ el:'#app', router })</script>
13.Vue-Cli
脚手架
主要的功能:
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
安装vue-cli
cnpm install vue-cli -gvue list
创建第一个vue-cli的应用程序
-
新建一个文件夹vue-cli
-
创建一个基于webpack模板的vue应用程序
vue init webpack myvue
说明：
- Project name:项目名称，默认 回车 即可
- Project description:项目藐视，默认 回车 即可
- Author:项目作者，默认 回车 即可
- Install vue-router:是否安装vue-router，选择n不安装(后期需要再手动添加)
- Use ESlint to lint your code：是否使用ESLint做代码检查
- Set up unit tests：单元测试相关
- Setup e2e test2 with Nightwatch：单元测试相关
- Should we run npm install for you after the project has been created：创建完成后直接初始化
npm installnpm run dev
执行完成后，目录多了很多依赖
Vue-cli目录结构
- build和config：WebPack配置文件
- node_modules：用于存放npm install安装的依赖文件
- src：静态资源文件
- .babelrc：Babel配置文件，主要作用是将ES6转化为ES5
- .editorconfig：编译器配置
- eslintignore：需要忽略的语法检查配置文件
- .gitgnore：git忽略的配置文件
- .postcssrc.js：css相关配置文件，其中内部的module.exports是NodeJS模块化语法
- index.html：模板也，实际开发不使用
- package.json：项目的配置文件
- name：项目名称
- version：项目版本
- description：项目描述
- author：项目作者
- scripts：封装常用命令
- dependencies：生产环境依赖
- devDependencies：开发环境依赖
src目录
源码目录
main.js
项目的入口文件
import Vue from 'vue' //ES6写法,会被转换成require("vue")import APP from 'APP' //意思同上，但是制定了查找路径，./为当前目录Vue.config.productionTip = false //关闭浏览器控制台关于环境的相关提示new Vue({ //实例化vue el:'#app' //查找index.html中id为app的元素 components:{APP} //引入组件 template:'APP/' //模板});
14.路由模式
hash
路径中带#符号，如：http://localhost/#/login
history
路径中不带#符号，如：http://localhost/login
需要修改路由配置，代码如下：
export default new Router({ mode:'history', routes: ]});
处理404创建一个名为NotFound.vue的视图组件，代码如下：
<template> <div> 页面不存在，请重试！ </div></template><script> export default { name: "NotFount" }</script>
修改路由配置，代码如下：
import NotFound from '../components/NotFound'{ path:'*', component:NotFound}
Element-ui
-
创建文件夹element-ui
-
npm安装依赖
npm install vuenpm i element-ui -s -
新建一个lib目录，导入库
-
创建ui.html，引入js和css文件
<!-- import CSS --> <link rel="stylesheet" href="./lib/element-ui/lib/theme-chalk/index.css"> <script src="./lib/vue.min.js"></script> <script src="./lib/element-ui/lib/index.js"></script> -
编写页面
-
编写js
-
运行测试效果
13万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
