Vue..

MVVM

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

Vue概述

是一套用于构建用户界面的渐进式框架.

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

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

优点

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搭建

1. 导入vue.js文件

2. 需要在每个html中导入

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

Hello word

• 需要创建一个Vue对象并设置 el 属性和 data 属性

• {{ 变量 }} ：通过插值表达式的方法获取数据

• el : 数据挂载的 dom 对象

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

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

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

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

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

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

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

Vue的模板语法

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-text

• 设置标签的文本内容
• 默认写法会替换全部内容，使用差值表达式可以替换指定内容

<div id="app">
    <span>{{message+666}}123</span>
    <span v-text="message+666">123</span>
    <span v-text="user.name+777">123</span>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            user: {
                name: '<b>fjz<b>',
                age: 20
            },
        }
    });
</script>

v-html

• 作用是设置元素的 innerHTML
• 内容中有 html 结构会被解析为标签
• 内部支持写表达式

<div id="app">
    <span v-html="user.name+666">999</span>
    <span v-html="city"></span>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            user: {
                name: '<b>fjz<b>',
                age: 20
            },
            city: ['西安市', '汉中市']
        }
    });
</script>

v-on

• 作用是为元素绑定事件
• 事件名不需要写 on 指令可以简写为@
• 绑定的方法定义在 methods 属性中,可以传入自定义参数

<div id="app">
    <input type="button" value="按钮1" v-on:click="test1('aaa')" />
    <input type="button" value="按钮2" @dblclick="test2()" />
</div>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        methods:{
            test1(str){
                alert(str)
            },
            test2(){
                alert("22222222")
            }
        }
    });
</script>

v-model

• 作用是便捷的设置和获取表单元素的值
• 绑定的数据会和表单元素值相关联
• 绑定的数据<---->表单元素的值 双向数据绑定

<div id="app">
    <input type="text" v-model="user.name" />
    <p>{{user.name}}</p>
    <input type="button" value="测试" v-on:click="test()" />
</div>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            message:'hello',
            user:{name:'fjz',age:20},
            city:['西安市','汉中市']
        },
        methods:{
            test(){
                this.user.name=9999
            }
        }
    });
</script>

v-show

• 作用是根据真假切换元素的显示状态
• 原理是修改元素的 display，实现显示隐藏
• 指令后面的内容，最终都会解析为布尔值
• 值为 true 元素显示，值为 false 元素隐藏
• 数据改变之后，对应元素的显示状态会同步更新

<div id="app">
			<input type="button" value="按钮1" v-show="isshow" /> <!-- 显示-->
			<input type="button" value="按钮2" v-show="age>50" /> <!-- 不显示 -->
		</div>
		<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				isshow:true,
				age:20
			},
		});
		
		</script>

v-if

• 作用是根据表达式的真假切换元素的显示状态
• 本质是通过操纵 dom 元素来切换
• 显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除
• 频繁的切换 v-show，反之使用 v-if，前者的切换消耗小

v-bind

• 作用是为元素绑定属性
• 完整写法是 v-bind：属性名
• 简写的话可以直接省略 v-bind，只保留：属性名

<div id="app">
    <p v-bind:align="align">111</p>
    <p :align="align">{{user.name}}</p>
    <input type="button" value="测试" v-on:click="test()" />
</div>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            user:{name:'fjz',age:20},
            align:'center'
        },
        methods:{
            test(){
                this.align='right'
            }
        }
    });
</script>

v-for

• 作用是根据数据生成列表结构
• 数组经常和 v-for 结合
• 使用语法是（item，index）in 数据
• item 和 index 可以结合其他指令一起使用
• 数组长度的更新会同步到页面上是响应式的
• 为循环绑定一个 key 值 :key=”值” 尽可能唯一

<div id="app">
    <table border="1">
        <tr v-for="(city,index) in citys">
            <td>{{index+1}}</td>
            <td>{{city}}</td>
        </tr>
    </table>
    <br>
    <table border="1">
        <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:'#app',
        data:{
            message:'hello',
            users:[{name:'fjz',age:20},{name:'123',age:500}],
            citys:['西安市','汉中市']
        }
    });
</script>

Vue实例生命周期

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

<div id="app">
    <table border="1">
        <tr v-for="(city,index) in citys">
            <td>{{index+1}}</td>
            <td>{{city}}</td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            citys:['西安市','汉中市']
        },
        beforeCreate() {
            console.log("beforeCreated")
        },
        /* 类似于ready事件 */
        created() {
            console.log("created")
        },
        beforeMount() {
            console.log("beforeMount")
        },
        mounted() {
            console.log("mounted")
        }
    });
</script>

Vue组件

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

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

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

<body>
    <div id="app">
        <myselfcom></myselfcom>
        <myselfcom></myselfcom>
        <myselfcom></myselfcom>
    </div>

    <!-- 自定义组件    以达到复用目的 -->
    <template id="hiId">
        <h1 @click="test()">一级标题{{msg}}</h1>
    </template>

    <script type="text/javascript">
        /* 注册一个全局组件 */
        Vue.component('myselfcom', { 		//组件名
            template: "#hiId", 				//为组件绑定标签
            data: function() {
                return { 					//为组件中的数据定义
                    count: 0,
                    msg: "123123"
                }
            },
            methods: {
                test() {
                    alert("组件中的事件")
                }
            }
        })
        new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

vue-cli 搭建项目

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

主要功能

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

环境搭建

安装node.js

http://nodejs.cn/download/

配置环境变量

将跟目录配到path中 D:\Program Files\nodejs\

测试

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 的核心深度集成，让构建单页面应用变得易如反掌。

1. 安装

   输入命令： npm install vue-router --save-dev

2. 创建router目录，创建 index.js 文件,在其中配置路由

3. 使用路由

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

4. 在main.js中配置路由

   //导入路由组件，  ./表示跟目录src
   import router from './router/index.js'
   Vue.use(router);
   
   new Vue({
   	render: h => h(App),
   	router
   }).$mount('#app')
   

5. 路由跳转

   //路由跳转  使用vue对象.$router.push("/main")
   _this.$router.push("/main");
   

配置路由导航守卫

router/index.js

import Vue from 'vue';
//导入路由
import router from 'vue-router';

//导入其他页面
import Login from '../views/Login.vue';
import Main from '../views/Main.vue';
import AdminList from '../views/admin/AdminList.vue';
import roleList from '../views/role/RoleList.vue';

Vue.use(router);

//定义路由组件
var rout = new router({
	routes: [{
			path: '/login',
			component: Login
		},
		{
			path: '/main',
			component: Main,
			//路由嵌套
			children: [{
				path: '/adminList',
				component: AdminList
			}, {
				path: '/roleList',
				component: roleList
			}]
		},

	]
});

//路由导航守卫，在每次发生组件路由的时候，会自动出发
rout.beforeEach((to, from, next) => {
	//如果用户访问的登录页， 直接放行
	if (to.path == '/login') {
		return next();
	} else {
		//验证token，拦截没有token的路由
		var token = window.sessionStorage.getItem("token");
		if (token == null) {
			return next("/login");
		} else {
			next();
		}
	}
})

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

网络请求

axios

axios 是一个网络请求库，基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装

作用

1. 从浏览器中创建 XMLHttpRequest并从 node.js 发出 http 请求
2. 支持 Promise API
3. 拦截 请求和响应
4. 转换请求和响应数据
5. 取消请求
6. 自动转换JSON数据

安装

输入指令： npm install axios

配置

在main.js中配置axios

//导入axios  是一个http网络请求库，用来发送ajax请求
import axios from 'axios';
//设置访问后台服务器地址
axios.defaults.baseURL = "http://127.0.0.1:8085/api/";
//将请求库的地址挂载到Vue对象中    $http的请求是自定义的   this.$http/api/login/login
Vue.prototype.$http = axios;

//axios 请求拦截
axios.interceptors.request.use(config => {
	//为请求头对象，添加 Token 验证的 token 字段
	config.headers.token = window.sessionStorage.getItem('token');
	return config;
})
// 添加响应拦截器
axios.interceptors.response.use((res) => {
	if (res.data == 401) {
		window.sessionStorage.clear();
		router.replace("/login");
	} else if (res.data.code == 500) {
		_this.$message({
			message: res.data.msg,
			type: 'error'
		});
	}
	return res;
});

使用ajax请求响应数据

用一个登录登录login()事件示例，因为已经在mian.js作了全局的请求和响应拦截，所有就可以减少判断

login() {
    var _this = this; //存储vue对象
    this.$http.post("/api/login/login", this.form).then(function(res) {
        //密码错误
        if (res.data.code === 201) {
            _this.$message({
                message: res.data.msg,
                type: 'warning'
            });
            return;
        }
        window.sessionStorage.setItem("account", res.data.data.account)
        window.sessionStorage.setItem("token", res.data.data.token)
        //路由跳转
        _this.$router.push("/main");
    })
}

axios 的常用 API

• get：查询数据
• post 添加数据
• put：修改数据
• delete：删除数据

axios 的响应结果

响应结果的主要属性

• data：实际响应回来的数据
• headers：响应头信息
• status：响应状态码
• statusText：响应状态信息