10分钟学会VUE

学习目标：

掌握VUE的基本用法

---

学习内容：

1、 分离架构 2、 MVVM 3、 VUE基础语法 4、 前端组件等

---

学习时间：

2021年12月25日——2021年12月29日

---

学习产出：

1、 技术笔记 1 遍 2、CSDN 技术博客 1 篇

JavaWeb 项目前后端分离架构

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+Tomcat的方式有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多段话服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实基础。

这个步骤是系统架构从猿进化成人的必经之路。

核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。

前后分离的优势

1、可以实现真正的前后端解耦，前端服务器使用nginx/tomcat。前端/WEB 服务器放的是 css，js，图片等等一系列静态资源，前端服务器负责控制页面引 用,跳转,路由

2、发现bug，可以快速定位是谁的问题，不会出现互相踢皮球的现象。页面逻辑，跳转错误，浏览器兼容性问题，脚本错误，页面样式等问题，全部由前端工程师来负责。接口数据出错，数据没有提交成功，应答超时等问题，全部由后端工程师来解决。

3、减少后端服务器的负载压力。除了接口以外的其他所有http请求全部转移到前端服务器上。

4、即使后端服务暂时超时或者宕机了，前端页面也能正常访问，只不过数据有时候出不来而已。

5、也许你也需要有微信相关的轻应用，那样你的借口完全可以共用，如果也有app相关的服务，那么只要通过一些代码的重构，也可以大量复用接口，提升效率。（多端应用）

6、页面显示的东西再多也不怕，因为是异步加载。

7、nginx支持页面热部署。不用重启服务器，前端升级更无缝。

8、增加代码的维护性和易读性（前后端混在一起的代码读起来相当费劲）。

9、提升开发效率，因为可以前后端并行开发，而不是像以前的强依赖。

10、在nginx中部署证书，外网使用https访问，并且只开放443和80端口，其他端口一律关闭（防止黑客端口扫描），内网使用http，性能和安全都有保障。

11、前端大量的组件代码得以复用，组件化，提升开发效率。

MVVM

MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View中由于需要展示内容而涉及的业务逻辑。

什么是 Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架. 与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心 库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三

大主流框架！

网址：https://cn.vuejs.org/

Vue.js 优点

1.体积小 压缩后 33K

2.更高的运行效率

​ 用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。

​ 基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的 DOM 操作计算出来并优化的技术，由于这个 DOM 操作属于预处理操作，并没 有真实的操作 DOM，所以叫做虚拟 DOM.最后在计算完毕才真正将 DOM 操作提交，将 DOM 操作变化反映到 DOM 树上。

3.双向数据绑定,简化 Dom 操作

​ 通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象, 把更多的精力投入到业务逻辑上.

4 生态丰富、学习成本低

​ 市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件！来即用实现快速开发！对初学者友好、入门容易、学习资料多

VUE安装

方式一：直接用

下载 Vue.js 并导入 js 文件

<script src="js/vue.js"></script>

方式 2:命令行工具 (CLI)

安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

第一个VUE程序

1. 导入开发版本的 Vue.js

2. 创建 Vue 实例对象，设置 el 属性和 data 属性

3. 使用简洁的模板语法把数据渲染到页面上

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

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

代码解析:

{{ 变量 }} 模板语法,插值表达式获取数据

new Vue();创建 Vue 对象(VM 对象)

el:数据挂载的 dom 对象

​ Vue 会管理 el 选项命中的元素及其内部的后代元素可以使用其他的选择器，但是建议使用 ID 选择器

​ 可以使用其他的选择器，但是建议使用 ID 选择器，

​ 可以使用其他的闭合标签，不能使用 HTML 和 BODY

data:{ message:’hello world’} model 数据

​ Vue 中用到的数据定义在 data 中

​ data 中可以写复杂类型的数据,如对象,数组

​ 渲染复杂类型数据时，遵守 js 的语法即可

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： < span>Message: {{ msg }}</ span>

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时， 绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }} 
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个 限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 --> 
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

VUE指令

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。

v-text和v-html

v-text作用是设置标签的文本内容

默认写法会替换全部内容，使用差值表达式可以替换指定内容内部支持写表达式

v-html作用是设置元素的 innerHTML

内容中有 html 结构会被解析为标签

内部支持写表达式

	<!-- 
		{{msg}}1111  会显示文本，也会显示后面的文字
	 <p v-text="msg">1111</p>  会用msg替换标签内的内容，但是msg是一个文本的形式
	 <p v-html="msg">1111</p>  会用msg替换标签内的内容，但是msg是一个HTML的格式
	 -->
	<div id="d2">
		{{msg}}1111
		<p v-text="msg">1111</p>
		<p v-html="msg">1111</p>
	</div>
		
	<script type="text/javascript">
		var app = new Vue({
			el: "#d2",
			data: {
				msg:"<b>我是消息</b>"
			}
		})
	</script>

v-on

v-on作用是为元素绑定事件

事件名不需要写 on 指令可以简写为@

绑定的方法定义在 methods 属性中,可以传入自定义参数

	<div id="d3">
		<input type="button" value="按钮1" v-on:click="test1(1,2)" />
		<input type="button" value="按钮2" @click="test2(1,2)" />
		<input type="button" value="按钮3" @dblclick="test3(1,2)" />//双击
	</div>
		
	<script type="text/javascript">
		var app = new Vue({
			el: "#d3",
			methods:{
				test1(a,b){
					alert("我是按钮1"+" : "+a+" : "+b);
				},
				test2(a,b){
					alert("我是按钮2"+" : "+a+" : "+b);
				},
				test3(a,b){
					alert("我是按钮3"+" : "+a+" : "+b);
				}
			}
		})
	</script>

v-model

v-model作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据<---->表单元素的值 双向数据绑定

	<div id="d4">
		账号：<input type="text"  value="" v-model="account" />
		<span v-text="account"></span><br />
		密码：<input type="text"  value="" v-model="password" /><br />
		<input type="button" value="按钮" v-on:click="test()" />
	</div>
	
	<script type="text/javascript">
		var app = new Vue({
			el: "#d4",
			data:{
				account : "",
				password : "111"
			},
			methods:{
				test(){
					this.account = 123456
				},
			}
		})
	</script>

v-show和v-if

v-show作用是根据真假切换元素的显示状态

原理是修改元素的 display，实现显示隐藏

指令后面的内容，最终都会解析为布尔值

值为 true 元素显示，值为 false 元素隐藏

数据改变之后，对应元素的显示状态会同步更新

v-if作用是根据表达式的真假切换元素的显示状态

本质是通过操纵 dom 元素来切换

显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除频繁的切换 v-show，反之使用 v-if，前者的切换消耗小

	<div id="d4">
		<!-- 
		v-show  是将它所在的元素隐藏起来(display)不显示
		v-if    是将它从dom中移除
		所以频繁的切换使用 v-show，反之使用 v-if，前者的切换消耗小
		 -->
		姓名：<input type="text"  value="" v-model="account" v-show="flag" /><br/>
		年龄：<input type="text" value="age1" v-if="age>10" />
			 <input type="text" value="age2" v-else />
		<input type="button" value="按钮1" @click="test()" />
	</div>
		
	<script type="text/javascript">
		var app = new Vue({
			el: "#d4",
			data:{
				account : "111111",
				age: 8,
				flag: false
			},
			methods:{
				test(){
					this.flag = !this.flag;
				},
			}
		})
	</script>

v-bind

作用是为元素绑定属性

完整写法是 v-bind：属性名

简写的话可以直接省略 v-bind，只保留：属性名

	<!-- 
	 v-bind  是对标签内的属性进行修改的
	 v-model 是对表单元素的值进行修改的
	 -->
	<div id="d4">
		<!-- 两种方式都可以 -->
		<p v-bind:align="ali">{{msg}}</p>
		<p :align="ali">{{msg}}</p>
		<input type="button" value="向右对齐" v-on:click="test()" />
	</div>
		
	<script type="text/javascript">
		var app = new Vue({
			el: "#d4",
			data:{
				msg: "我是p标签",
				ali: "center"
			},
			methods:{
				test(){
					this.ali = "right"
				},
			}
		})
	</script>

v-for

v-for作用是根据数据生成列表结构

数组经常和 v-for 结合

使用语法是（item，index）in 数据

item 和 index 可以结合其他指令一起使用

数组长度的更新会同步到页面上是响应式的

为循环绑定一个 key 值 :key=”值” 尽可能唯一

	<div id="d4">
		<table border="1">
			<tr v-for="user in users">
				<td>{{user.name}}</td>
				<td>{{user.age}}</td>
			</tr>
		</table>
		<table border="1">
			<!-- index是数组的索引 -->
			<tr v-for="(user,index) in users">
				<td>{{index+1}}</td>
				<td>{{user.name}}</td>
				<td>{{user.age}}</td>
			</tr>
		</table>
	</div>
		
	<script type="text/javascript">
		var app = new Vue({
			el: "#d4",
			data:{
				users: []
			},
			//创建之前
			beforeCreate: function () { 
				console.log('beforeCreatea'); 
			},
			/* 相当于ready 创建之后 (没有冒号和function也可以) */
			created(){
				console.log('created');
				this.users=[
					{name:"小白",age:20},
					{name:"小黑",age:20},
					{name:"小红",age:20},
					{name:"小兰",age:20},
				]
			},
			beforeMount(){
				console.log('beforeMount');
			},
			mounted:function(){
				console.log('mounted');
			}
		})
	</script>

VUE 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数 据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添 加自己的代码的机会。

beforeCreate: function () {
    console.log('beforeCreatea ’); 
},
created: function () {
    console.log('createda ' ); 
},
beforeMount:function(){ 
    console.log('beforeMounta’); 
},
mounted:function(){ 
    console.log('mounteda’); 
}

VUE 组件

组件是可复用的 vue 实例，说白了就是一组可以重复使用的模板,且带有

一个名 字.

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通

过 Vue.component 全局注册的：

Vue.component('my-component-name', {
    // ... options ... 
})

组件的使用

		<!-- 定义组件 -->
		<template id="temp">
			<h1 v-on:click="test()">我是组件h1标签{{count}} {{msg}}</h1>	
		</template>
		<div id="app">
			<mytemp></mytemp>
			<mytemp></mytemp>	
		</div>
		
		<script type="text/javascript">
			/* 定义组件 */
			Vue.component('mytemp',//组件名
						{
							template:"#temp",
							/* 组件中的数据 */
							data:function(){//data()  也可以
								return{
									count:0,
									msg:"组件消息"
								}
							},
							/* 组件中的方法 */
							methods:{
								test:function(){//test()
									this.count++;
								}
							}
						}
					)
			var app = new Vue({
				el: "#app"
			})
		</script>

vue-cli 搭建项目

vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速；

主要功能

1. 统一的目录结构
2. 本地调试
3. 热部署
4. 单元测试
5. 集成打包上线

需要的环境

Node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。如果你熟悉 Javascript，

那么你将会很容易的学会 Node.js。

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎

V8 引擎执行 Javascript 的速度非常快，性能非常好。

npm

npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是 JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个JavaScript 代码包可供下载，每周下载约 30 亿次。npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。

页面路由

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

安装

vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。

打开命令行工具，进入你的项目目录，输入下面命令。

​ npm install vue-router --save-dev

使用步骤

1. 创建 router 目录

   创建 index.js 文件,在其中配置路由

import Vue from 'vue';
import router from 'vue-router';
/* 导入路由 */
import login from '../view/Login';
import main from '../view/Main';
import demo from '../view/Demo';
import role from '../view/role/Role.vue';
import admin from '../view/admin/Admin.vue';
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
	routes: [{
			path: '/login',
			name: 'login',
			component: login
		},
		{
			path: '/main',
			component: main,//路由嵌套 在main下面的嵌套子路由
			children:[
				{
					path:"/role",
					component:role,
				},
				{
					path:"/admin",
					component:admin,
				}
				
			]
		},
		{
			path: '/demo',
			component: demo,
			
		},
	]
});


//导出路由对象
export default rout;

​ 2.使用路由

<router-link to="/index">首页</router-link> 
<router-link to="/content">内容</router-link> 
<router-view/>

或者使用编程式导航修改url

this.$router.replace("/login");

​ 3.在main.js里配置路由

//导入路由组件 ./ 表示根目录
import router from './router/index.js';
Vue.use(router);

//创建vue对象,将App组件挂载到  index.html <div id="app"></div>
new Vue({
	render: h => h(App),
	router,
}).$mount('#app')

ElementUI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组 件库.

安装ElementUI

​ npm i element-ui -S

main.js里面配置

import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
Vue.use(ElementUI); 
new Vue({ 
    el: '#app', 
    render: h => h(App)
});

功能

在ElementUI里有很多的组件可以提供我们使用，大大简化开发难度。

网络请求

axios 是一个 HTTP 的网络请求库

安装axios

​ npm install axios

在 main.js 中配置 axios

/* 导入axios 是一个http网络请求库 用来发送ajax请求 */
import axios from 'axios';
//配置全局的后端访问地址
axios.defaults.baseURL = "http://127.0.0.1:8088/api/";
//将请求库地址 挂载到vue对象中, $http名字是自定义的, 使用: this.$http/api/loign/loign
Vue.prototype.$http = axios;

请求语法

使用 get 或 post 方法即可发送对应的请求

then 方法中的回调函数会在请求成功或失败时触发通过回调函数的形参可以获取响应内容，或错误信息

this.$http.post("/api/login/login",this.form).then(function(res){
	//代码块
}
                                                   this.$http.delete("/api/admin/deleteAdmin/"+id).then(function() {
    代码块
}

axios 的常用 API

get：查询数据

post 添加数据

put：修改数据

delete：删除数据

axios 的响应结果

响应结果的主要属性

data：实际响应回来的数据

headers：响应头信息

status：响应状态码

statusText：响应状态信息

axios 请求拦截

//axios 请求拦截
axios.interceptors.request.use(config => {
	 //向请求头中添加 字段 token名字是自定义
	config.headers.token = window.sessionStorage.getItem('token');
	return config;
})

添加响应拦截器

// 添加响应拦截器
axios.interceptors.response.use((res) => {
	if (res.data == 401) {//后端验证token失效
	  window.sessionStorage.removeItem("token");
		router.replace("/login");
	}
	if (res.data.code == 500) {
		 this.$message({message:resp.data.msg,type:"warning"});
	}
	return res;
});

Webpack 打包

​ 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器 （module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将 所有这些模块打包成一个或多个 bundle.

​ Webpack 是当下最热门的前端资源模块化管理和打包工具，它可以将许多 松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载

打包

​ npm run build

打包后将 dist 中的文件部署到 tomcat/nginx 服务器运行即可