投稿
  1. 首页
  2. html-js-css

Vue前端框架

back • 2022-6-12 • html-js-css • 阅读 26

Vue前端框架,第1张

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可以直接运行在手机端，性能接近原生APP3.可使用组件多
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与XML2.Ajax名称本意是：异步js与XML，但是现在服务器端返回的数据几乎都使用JSON，而抛弃了XML3.Ajax每次打开新的网页时，页面不会整体刷新，而是由js发起一个HTTP异步请求
2.特点 1.节省页面加载时间2.节省了带宽3.减轻客户端和服务器端的负担
Vue

Vue (读音类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架

1.构建用户界面：将数据通过某种方式展示到前端页面2.渐进式：Vue可以自底向上逐层的应用，由浅入深，由简单到复杂（即：如果简单应用只需要引入一个轻量小巧的核心库，复杂应用可以根据需要引入各式各样的Vue插件，从一个轻量小巧的核心库逐渐递进到各式各样的Vue插件库）
简介 1.尤雨溪开发的一款轻量级框架2.2015年正式发布Vue1.0.03.2016年正式发布Vue2.0.04.2020年正式发布Vue3.0.0
特点 1.采用组件化模式，提高代码复用率，且让代码更好维护2.声明式编码，无需直接 *** 作DOM，提高开发效率
//命令式编码
<!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}`
			})
			
			//获取list元素
			let list = document.getElementById('list')
			
			// *** 作DOM修改内容
			list.innerHTML = htmlStr
		</script>
	</body>
</html>

// 声明式编码
<!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.体积小：压缩后33k5.双向数据绑定
扩展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就是./src/App.vue
})

上面的App.vue会被main.js加载

上面代码中的就是第二层模板，可以认为该页面的内容就是在这个位置被渲染出来的
在上面代码中...，该元素与index.html中的是同一个元素
所有的中的内容都会被自动替换，

上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表（0条）

保存