Vue前端框架
Web应用分类：
- 1.传统Web页面
- 2.单页应用
1.传统Web页面
1.H5（不等同于HTML5）
一般称之为H5页面（营销页面）
即：在传统的平面海报中增加交互体验和数据存储，用于营销推广和数据信息收集等
2.传统技术特点：
.单击某个链接，按钮或提交表单后，页面整体刷新
3.传统技术缺点：
- 1.每次页面整体刷新，都要导致浏览器重新加载对应的内容
- 2.加载内容繁多，传统页面的css/js多达上百个，每次打开页面都需要发送上百次请求，卡顿现象严重
2.单页应用（Single Page App,SPA）
- 1.整个应用只有一个主页面，其余的“页面”，实际上是一个个的“组件”
- 2.单页应用中的“页面跳转”，实际上是组件的切换，在这个过程中，只会更新局部资源，页面不会整个刷新（正是因为这个原因，当我们的前端代码有更改，重新部署之后，如果用户不主动刷新，就会发现有“资源缓存”）
1.单页应用特点
- 1.页面是局部刷新的，响应速度快，不需要每次加载所有的资源
- 2.前后端分离，前端不受后端的限制
2.单页应用框架
1.Angular
1.特点
- 1.业内第一个SPA框架
- 2.实现了前端的MVC解耦
- 3.双向绑定，Model层的数据变化会直接影响View,反之亦然
2.缺点
不易学习，文档差
2.React
1.特点
- 1.使用js一种语言就可以写前端(H5)+后端
- 2.React Native可以直接运行在手机端，性能接近原生APP
- 3.可使用组件多
2.缺点
- 1.html代码需要写在js文件中，前后端代码写在一起的风格
- 2.多语言混合式编程，代码难以理解，开发和调试
3.Vue
1.特点
- 1.基于MVVM（Model-View-ModelView）的SPA框架
- View：视图
- Model：数据
- ModelView：连接View与Model的纽带
- 2.Vue.js和微信小程序，阿里巴巴的Weex相似
3.Ajax和XML
1.概述
- 1.Ajax（Asynchronous JavaScript And XML）：异步js与XML
- 2.Ajax名称本意是：异步js与XML，但是现在服务器端返回的数据几乎都使用JSON，而抛弃了XML
- 3.Ajax每次打开新的网页时，页面不会整体刷新，而是由js发起一个HTTP异步请求
2.特点
- 1.节省页面加载时间
- 2.节省了带宽
- 3.减轻客户端和服务器端的负担
Vue
Vue (读音类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架
- 1.构建用户界面：将数据通过某种方式展示到前端页面
- 2.渐进式：Vue可以自底向上逐层的应用，由浅入深，由简单到复杂（即：如果简单应用只需要引入一个轻量小巧的核心库，复杂应用可以根据需要引入各式各样的Vue插件，从一个轻量小巧的核心库逐渐递进到各式各样的Vue插件库）
简介
- 1.尤雨溪开发的一款轻量级框架
- 2.2015年正式发布Vue1.0.0
- 3.2016年正式发布Vue2.0.0
- 4.2020年正式发布Vue3.0.0
特点
- 1.采用组件化模式，提高代码复用率，且让代码更好维护
- 2.声明式编码，无需直接操作DOM，提高开发效率
` }) //获取list元素 let list = document.getElementById('list') //操作DOM修改内容 list.innerHTML = htmlStr </script> </body> </html>//命令式编码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>原生JavaScript</title> </head> <body> <ul id="list"></ul> <script type="text/javascript"> // 需要展示的数据 let persons = [ {id: '001',name: '张三', age: 18}, {id: '002',name: '李四', age: 19}, {id: '003',name: '王五', age: 20}, ] //准备html字符串 let htmlStr = '' //遍历数据拼接html字符串 persons.forEach( p => { htmlStr += `${p.id} - ${p.name} - ${p.age}// 声明式编码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="app"> <ul id="list"> <li v-for="p in persons"> {{p.id}} - {{p.name}} - {{p.age}} </li> </ul> </div> <script> new Vue({ el: "#app", // data: function(){ // return { // persons : [ // {id: '001',name: '张三', age: 18}, // {id: '002',name: '李四', age: 19}, // {id: '003',name: '王五', age: 20}, // ] // } // } data: { persons : [ {id: '001',name: '张三', age: 18}, {id: '002',name: '李四', age: 19}, {id: '003',name: '王五', age: 20}, ] } }) </script> </body> </html>
3.使用虚拟DOM+Diff算法，尽可能复用DOM节点
说明：
- 通过Diff算法比较，新数据和旧数据的区别，相同的复用，不同的修改
4.体积小：压缩后33k 5.双向数据绑定
扩展1：Diff算法
- 概念：
Diff算法是一种优化手段，将前后两个模块进行差异化对比，修补（更新）差异的过程叫做patch (打补丁)- 意义：
vue,react框架中都有diff算法
因为操作真实dom的开销很大， 某些时候修改了页面中的某个数据，如果直接渲染到真实DOM中会引起整棵树的重绘，只让我们改变过的数据映射到真实 DOM,做最少的重绘，这就是diff算法要解决的事情- virtual DOM和真实DOM的区别：
virtual DOM是将真实的 DOM 的数据抽取出来，以对象的形式模拟树形结构，diff算法比较的也是virtual DOM 代码理解
1.原生Vue
独立的Vue框架，不与Webpack等框架结合使用
1.安装与部署
1安装方式
1.直接通过
标签引入
- 1.通过src引入本地文件
说明：<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
- 1.引入Vue.js后，Vue会被注册成一个全局变量，通过操作这个函数可以进行后续的操作
- 2.通过src引入在线文件（使用CDN加速）
开发版本生产版本<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>模板库引入(暂时未用到)<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script><script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js' </script>
2.通过NPM命令行工具下载安装
2.引入类型
3.例子
- 1.在head中引入vue.js包
- 2.在body中定义一个
- 3.所有的页面都是展示在这个
中，每次改变不会全局刷新，而是通过Vue.js框架操作代码，对其中内容进行局部刷新DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue测试title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8">script> head> <body> <div id="app"> {{hello}} div> <script> var app = new Vue({ el: "#app", data: { hello: "Hello World! This is my first test" } }) script> body> html>- 4.控制台上出现下列语句即表示成功
3.Webpack+Vue.js开发
1.概述
- 1.大部分Vue.js项目都是在Webpack的框架下进行开发的
- 2.vue-cli直接把Webpack做了集成
NVM(Node Version Manager)
Node版本管理工具
不同Node版本可能出现冲突
需要在同一台机器上同时安装多个版本的Node,NVM可以帮我们解决这个问题
Windows下的NVM官方网址http://nvm.uihtm.com
NPM(Node Package Manager)
只要安装了node，就会捆绑安装该命令，它的作用与Ruby中的bundler以及Java中的maven相同，都是对第三方依赖进行管理
Webpack
随着SPA(Single Page App)单页应用的发展，js/css/png文件特别多，难以管理，文件夹结构也容易混乱
希望项目可以具备压缩css,js，正切处理各种js/css的import,以及相关模板的html文件
Webpack是一个打包工具，可以吧js，css，node，module,coffeescrip,scss/less,图片等都打包在一起
实际开发中，都是统一使用Webpack+Vue.js的方式来做项目,这样才可以做到视图，路由,component等的分离,以及快速打包,部署和项目上线
1.Webpack安装与使用
npm install --save webpack
Webpack自身是支持Vue.js的，所以Webpack与Vue.js已经结合到很难分清楚谁是谁
只需要知道做什么事运行什么命令就行
总体来说只要能安装上Node和Vue.js就可以
安装Vue.js
2.需要同时安装vue和vue-cli这两个node package
npm install vue vue-cli -g
-g表示这个包安装后可以被全局使用
安装后注意配置环境变量
找到vue.cmd的文件路径配置
F:\Node\NodeJs\node_global
运行vue
3.创建一个基于Webpack模板的新项目
vue init webpack my-project
使用Vue都是在Webpack前提下使用的
安装所需要的依赖
cd my-project
cnpm/npm install
启动项目
npm run dev
或 npm start
两则没什么区别，当运行npm run dev时，系统会进入到package.json文件中运行scripts中对应的脚本，可以看到start,对应的也是 npm run dev
在使用vue init webpack myproject后会生成一个崭新的项目，文件结构如上
build：编译用到的脚本
build.js：打包使用，不能修改
check-version.js：检查npm的版本，不能修改
utils.js：不能修改，做一些css/sass等文件的生成
vue-loader.conf.js：非常重要的配置文件，不能修改。内容是用于辅助加载Vue.js用到的css source map等
webpack.base.conf.js
webpack.dev.conf.js
webpack.prod.conf.js都是基本的配置文件，不能修改
config：各种配置
dev.env.js：开发模式下的配置文件，一般不用修改
prod.env.js：生产模式下的配置文件，一般不用修改
index.js：很重要的文件，定义了开发时的端口（默认8080），图片文件夹（默认static），开发模式下的代理服务器
dist：打包后的文件夹
node_modules：node第三方包
node项目所用到的带三方包特别多，也特别大，这个文件是由命令npm install产生的，所有在package.json中定义的第三方包都会被自动下载，保存在该文件夹下
注意，这个文件夹不能放在git中
src：源代码
assets：文件夹用到的图片都可以放到这里
components：用到的视图和组件所在的文件夹（核心）
router：路由
index.js是路由文件，定义了各个页面对应的url
App.vue：
如果说index.html是一级页面模块的话，App.vue就是二级页面模板，所有其他的Vue.js页面都作为该模板的一部分被渲染出来
main.js：没有实际的业务逻辑，但是为了支持整个Vue.js框架，很有必要存在
static：静态文件
index.html：最外层文件
package.json：node项目配置文件
4.Webpack+Vue.js实战
在Vue.js中创建页面需要以下两步
1.新建路由
- 默认的路由文件是src/router/index.js，将其打开后，增加两行
- import SayHello from '@/components/SayHello.vue’表示从当前目录下的components引入SayHello文件，其中@表示当前目录
- 然后定义路由,其中path表示对应的一个url,name表示Vue.js内部使用的名称,component表示对应的.vue页面的名字，即：每当用户访问http://localhost:8080/#/say_hello时，文件就会渲染./components/SayHello.vue文件,name：'SayHello’定义了该路由在Vue.js内部的名称，其中当path为/表示默然访问该页面
2.新建vue页面
代码块中表示的是HTML模板，里面写的是最普通的HTML
表示的是js代码，所有的js代码都写在这里，这里使用的是EMScript
表示所有的CSS/SCSS/SASS文件都写在这里
定义并显示变量
如果要在vue页面中定义一个变量，并显示出现，就需要事先在data中定义
通过对于与原生Vue的区别可以看出之前原生的代码中存在于new Vue({})中的代码，在Webpack框架下，都应该放到export default{}中
let，var，常量与全局变量
声明本地变量，使用let或var
区别：
var：有可能引起变量提升，或者块级作用域问题
let：就是为了解决以上两个问题存在的
所以多用let,少用var
在Webpack下的Vue.js中使用任何变量都需要使用var或let声明变量
常量：
const修饰
全局变量：
直接在index.html中声明即可
例
window.title = ‘我的博客’
导入代码
import用于导入外部代码
import Vue from ‘vue’
由于vue是在package.json中定义的，因此可以直接import … form 包名，否则要加上路径
import SayHello from ‘@/components/SayHello’
在from后面添加@符号，表示是在本地文件系统中引入文件，@代表源代码目录，一般是src,也可以表示当前文件根目录
@出现之前也会使用
import SayHello from ‘…/components/SayHello’
如果大量使用…/…入引起混乱，所以推荐使用@方法
方便其他代码使用自己：export default{…}
每个vue文件的
假设有lib/math.js文件
export function sum(x, y) {
return x + y
}
export var pi = 3.14
lib/math.js文件可以导出两个内容，一个是function sum，另一个是var pi
定义一个新的文件：app.js
import * as math form "lib/math"
alert("2π =" + math.sum(math.pi,math.pi))
上面的代码中，可直接调用math.sum和math.pi方法
或
import {sum, pi} from "lib/math"
alert("2π =" + sum(pi, pi))
可以直接调用sum()和pi
而export default {…}则是暴露出一段没有名字的代码，不像上述有名字而已
在Webpack下的Vue.js，会自动对这些代码进行处理，属于框架内的工作
ES中的简写
<script>
export default {
data () {
return {}
}
}
</script>
实际上是下面的简写形式
<script>
export default {
data：function() {
return {}
}
}
</script>
箭头函数
与coffeescript一样，ES也可以通过箭头表示函数
.then(response => {})
等同于
.then(function(response) {
...
})
这样写的好处是强制定义了作用域，使用=>之后，可以避免很多由作用域产生问题
hash中同名的key,value的简写
let title = 'body'
return {
title: title
}
等同于
let title = 'body'
return {
title
}
分号可以省略
var a = 1;
等同于
var a = 1
Vue.js渲染页面的过程和原理
只有知道页面是如何被渲染出来的，才能更好的理解框架和调试代码
渲染过程
首先需要知道./build/webpack.base.conf.js是webpack打包的主要配置文件
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}
1.js入口文件
其中app: './src/main.js’定义了Vue.js的入口文件
module.exports = {
...
entry: {
app: './src/main.js' //定义了Vue.js的入口文件
},
...
2.渲染过程2：静态的HTML页面（index.html）
每次打开的页面是http://localhost/#/
实际上打开的文件是http://localhost/#/index.html
这里的
index.html文件是最外层的模板
3.渲染过程3：main.js中的Vue定义
src/main.js
new Vue({
el: '#app', // 这里的#app对应index.html中的
router,
components: { App },
template: '上面的App.vue会被main.js加载
上面代码中的就是第二层模板，可以认为该页面的内容就是在这个位置被渲染出来的
在上面代码中，该元素与index.html中的是同一个元素...
所有的中的内容都会被自动替换，