目录
一、什么是VUE.js
二、VUE.js优点
三、VUE安装
四、第一个VUE程序
五、Vue指令
v-text
v-html
v-on
v-model
v-show
v-if
v-bind
v-for
六、VUE实例生命周期
七、Vue-CLI搭建项目
主要的功能
需要的环境
八、组件路由
搭建步骤:
1. 创建 router 目录
2.使用路由
3.在 main.js 中配置路由
4.路由导航守卫
5.路由嵌套
6.路由传参
九、ElementUI
十、网络请求
一、什么是VUE.js
Vue (读音 /vjuː /，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三大主流框架！网址： https://v2.cn.vuejs.org/
二、VUE.js优点
1.体积小 压缩后33K
2.更高的运行效率
用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的DOM 操作计算出来并优化的技术，最后在计算完毕才真正将 DOM 操作提交。
3.双向数据绑定,简化 Dom 操作
通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象,把更多的精力投入到业务逻辑上.MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开
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的系统：
代码解析:
{{ 变量 }} ,插值表达式获取 data 数据
new Vue();创建 Vue 对象(VM 对象)
el:数据挂载的 dom 对象
Vue 会管理 el 选项命中的元素及其内部的后代元素
可以使用其他的选择器，但是建议使用 ID 选择器
可以使用其他的闭合标签，不能使用 HTML 和 BODY
data:{ message:’hello world’} model 数据
Vue 中用到的数据定义在 data 中
data 中可以写复杂类型的数据,如对象,数组
五、Vue指令
指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。
v-text
作用是设置标签的文本内容
默认写法会替换全部内容，使用差值表达式可以替换指定内容
内部支持写表达式
<p v-text="message">非凡英才</p>
<p>{{message}}非凡英才</p>
v-html
作用是设置元素的 innerHTML
内容中有 html 结构会被解析为标签
内部支持写表达式
<p v-html="message">非凡英才</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是通过控制标签的display属性隐藏或显示标签的，效率高，v-if会在隐藏时，删除标签，在显示时重新创建标签，效率低。v-if可以和v-else联合使用，两个必须紧挨着。
v-bind
作用是为元素绑定属性
完整写法是 v-bind：属性名="变量" 一旦为属性添加了v-bind,值就是一个定义在data中的变量了
简写的话可以直接省略 v-bind，只保留：属性名
<img v-bind:src="imgSrc" />
<img :src="imgSrc" />
<img :title="imgTitle" :src="imgSrc" />
data:{
imgSrc:'img/3.jpg'
imgTitle:"这是一张图片"
}
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>
data:{
isActive :true
}
v-for
作用是根据数据生成列表结构
数组经常和 v-for 结合
使用语法是（item，index）in 数据
item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上是响应式的
为循环绑定一个 key 值 :key=”值” 尽可能唯一
<li v-for="item in array">
{{item}}省
</li>
<li v-for="(item,index) in array">
{{index+1}}{{item}}省
</li>
<li v-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 是一个前端 js 运行环境或者说是一个 JS 语言解释器。
npm
npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过60万个JavaScript代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。
使用 HbuilderX 快速搭建一个 vue-cli 项目
创建成功后,在命令行窗口启动项目(ALT+C也可以开启命令行窗口)
启动项目命令：npm run serve
具体命令需要看配置文件中如何定义
启动成功后,会出现访问项目地址:http://127.0.0.1:8080/
在命令行中 ctrl+c 停止服务
八、组件路由
vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
安装
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
九、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');
具体组件使用参考 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');
return config;
})
// 添加响应拦截器
axios.interceptors.response.use((resp) =>{//正常响应拦截
if(resp.data.code==500){
ElementUI.Message({message:resp.data.message,type:"error"})
}
if(resp.data==401){
router.replace("/login");
}
return resp;
});
