Vue-Cli

MVVM

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

VUE

什么是Vue.js

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

Vue.js优点

1.体积小压缩后33K

2.更高的运行效率

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

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

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

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

4.生态丰富、学习成本低

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

Vue安装

方式1:直接用<script>引入

下载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!'
    }
})

输出：Hello Vue!

代码解析:

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

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

el:数据挂载的dom对象

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

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

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

可以使用其他的闭合标签，不能使用HTML和BODYdata:{message:’helloworld’}model数据

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

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

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

模板语法

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

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

插值文本

数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值：

Message:{{msg}}

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

使用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){returnmessage}}

Vue指令

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

v-text

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

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

<p v-text="message+1">你好</p>
<p>{{message+1}}你好</p>

v-html

作用是设置元素的innerHTML

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

内部支持写表达式

<p v-html="message+1">你好</p>

v-on

作用是为元素绑定事件

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

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

<input type="button" value="按钮" v-on:click="test(1,2)"/>
<input type="button" value="按钮" @click="test"/>
​
methods:{
        test(a,b){
          alert(a);
         }
}

v-model

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

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

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

<input type="text" v-model="message"/>
<p>{{message}}</p>
data:{
     message:""
     }

v-show

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

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

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

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

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

<img v-show="isShow" src="img/3.jpg"/>
<img v-show="age>18" src="img/3.jpg"/>
data:{
     isShow:true,
     age:20
}

v-if

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

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

显示状态表达式的值为true，元素存在于dom中，为false，从dom中移除

频繁的切换v-show，反之使用v-if，前者的切换消耗小

v-bind

作用是为元素绑定属性

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

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

<img v-bind:src="imgSrc"/>
<img :src="imgSrc"/>
<img :title="imgTitle" :src="imgSrc"/>
data:{
     imgSrc:'img/3.jpg'
     imgTitle:"这是一张图片"
}

v-for

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

数组经常和v-for结合

使用语法是（item，index）in数据item和index可以结合其他指令一起使用

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

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

<liv-for = "item in array">
    {{item}}省
</li>
<liv-for = "(item,index) in array">
    {{index+1}}{{item}}省
</li>
<liv-for =" (item,index) in objects">
    {index+1}}{{item.name}}{{item.age}}
</li>
​
data:{
     array:['陕西','山西','河南'],
     objects:[
              {name:'admin',age:23},
              {name:'jim',age:22}
              ]
}

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-cli搭建项目

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

主要的功能

统一的目录结构

本地调试

热部署

单元测试

集成打包上线

需要的环境

Node.js

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

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

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

npm

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

使用HbuilderX快速搭建一个vue-cli项目

 

创建成功后,在命令行窗口启动项目

 

具体命令需要看配置文件中如何定义

启动成功后,会出现访问项目地址:http://127.0.0.1:8080/

在命令行中ctrl+c停止服务

组件路由

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

安装

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

注意Vue2.6只能集成vuerouter3.x版本

需要修改版本号在package.json

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

 

npminstallvue-router--save-dev

搭建步骤

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 defaultr out;

2.使用路由

<router-linkto="/index">首页</router-link>
<router-linkto="/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'){如果用户访问的登录页，直接放行
           returnnext();
      }else{
           vartoken=window.sessionStorage.getItem("token");
             if(token==null){
                       returnnext("/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

ElementUI

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

网站：element.eleme.cn

安装ElementUI

npm i element-ui -S

在main.js中写入以下内容：

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

具体组件使用参考API文档

网络请求

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');
      returnconfig;
})
​
//添加响应拦截器
axios.interceptors.response.use((resp)=>{//正常响应拦截
    if(resp.data.code==500{
       ElementUI.Message({message:resp.data.message,type:"error"})
    }
    returnres;
},(error)=>{//请求失败时执行此函数,如404
    if(error.response.data.code==404){
       ElementUI.Message({message:"请求地址有误",type:"error"});
    }
       returnPromise.reject(error);
    });