[JavaScript知识库]Vue、ElementUI

1.什么是MVVM?

MVVM是Model-View-ViewModel的简写,将View中的状态和行为抽象化.

ViewModel在取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的

业务逻辑.

2.什么是VUE?

Vue就是一套用于构建用户界面的渐进式框架,与其他框架不同的是,Vue被设计为可以自底向上逐渐应用.Vue的核心库只关注图层,不仅容易上手,还便于与第三方库或既有项目整合.

3.Vue的优点

• 体积小

• 高效率

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

• 生态丰富,学习成本低

4.第一个Vue程序

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

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

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

<div id="app">{{message}}<div/>
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})

代码解析:

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

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

el:数据挂载的dom对象

• Vue会管理el选项命中的元素及其内部的后代元素

• 可以使用其他的选择器,但是建议使用ID选择器

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

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

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

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

5.Vue指令

6.Vue实例生命周期

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

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

7.vue-cli搭建项目

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

1.主要功能

• 统一的目录结构

• 本地调试

• 热部署

• 单元测试

• 集成打包上线

2.需要的环境

Node.js:简单的说Node.js就是运行在服务端的JavaScript。如果熟悉JavaScript，那么你将会很容易的学会Node.js。

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

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行的JavaScript的速度非常快，性能非常好。

3.npm

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

1.组件路由

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

1.安装

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

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

npm i vue-router@3.5.3

搭建步骤:

1. 创建 router 目录
创建 index.js 文件,在其中配置路由
import Vue from 'vue';
import router from 'vue-router';
/* 导入路由 */
import login from '../views/login';
/* 导入其他组件 */
import content from '../components/content';
/* 导入其他组件 */
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [
{
path: '/index',
name: 'index',
component: index
},
{
path: '/content',
component: content
}
]
});
//导出路由对象
export default rout;

2.使用路由

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

3.在main.js中配置路由

import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})

4.路由导航守卫

为路由对象，添加 beforeBach 导航守卫
to-将要访问的页面地址,from-从哪个页面访问的,next-放行函数

rout.beforeEach((to,from,next)=>{
if(to.path=='/login'){如果用户访问的登录页，直接放行
return next();
}else{
var token = window.sessionStorage.getItem("token");
if(token==null){
return next("/login");
}else{
next();
}
}
})

5.路由嵌套

{
path: '/main',
component: Main, //路由嵌套 在 main 下面的嵌套子路由
children:[
{
path:"/admin",
component:Admin
}
]

6.路由传参

<router-link :to="{path:'/User',query:{num:id,name:'jim'}}">
用户
</router-link>
目标组件获取地址参数
this.$route.query.num

8.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({
render: h => h(App),
}).$mount('#app');
1.网络请求

axios是 一个HTTP的网络请求库。

安装 npm install axios

在 main.js 中配置 axios
导入 axios
import axios from 'axios';
设置访问后台服务器地址
axios.defaults.baseURL="http://127.0.0.1:9999/api/";
将 axios 挂载到 vue 全局对象中,使用 this 可以直接访问
Vue.prototype.$http=axios;

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

then方法中的回调函数会在请求成功或者失败时触发

通过回调函数的形参可以获取响应的内容，或错误信息

基本语法

this.$http.get(地址?Key=value&key2=val1).then(function(response){ }
this.$http.post("login",{key:"value",key2:"val2"}).then(function(response){ }

axios 的常用 API

get：查询数据
post 添加数据
put：修改数据
delete：删除数据
axios 的响应结果
响应结果的主要属性
data：实际响应回来的数据
headers：响应头信息
status：响应状态码
statusText：响应状态信息
//axios 请求拦截
axios.interceptors.request.use(config =>{
//为请求头对象，添加 Token 验证的 token 字段
config.headers.token = window.sessionStorage.getItem('token');
return config;
})
// 添加响应拦截器
axios.interceptors.response.use((resp) =>{//正常响应拦截
if(resp.data.code==500){
ElementUI.Message({message:resp.data.message,type:"error"})
}
if(resp.data==201){
router.replace("/login");
}
return resp;
});