Vue2

1. npm包管理器的基本使用

npm包管理器是基于node的一个工具，它可以安装、卸载插件和库。通常我们会配置cnpm来使用，cnpm是国内的npm镜像，使用cnpm来安装插件或库速度会大大的提升。

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看cnpm版本

cnpm -v

安装插件语法

cnpm install 插件名

卸载插件语法

cnpm uninstall 插件名

2. 模板语法

HTML 中包含了一些 JS 语法代码，语法分为两种，分别为：

插值语法（双大括号表达式）
指令（以 v-开头）

2.1 插值

语法格式：{{ js表达式 }}

功能： 用于解析标签体内容

示例：


	{{msg}}


new Vue({
	el:"#app",
	data:{
		msg:'Hello,Tom'
	}
})

效果：

2.2 指令

功能： 解析标签属性、解析标签体内容、绑定事件

举例：v-bind:href = 'xxxx' ，xxxx 会作为 js 表达式被解析

语法格式： v-开头

示例：


	


new Vue({
	el:"#app",
	data:{
		msg:'Hello,Tom'
	}
})

效果：

2.2.1 常用指令

v-text：以纯文本形式解析标签体内容

v-html：以html格式解析标签体内容

v-cloak：防止插值语法出现花括号

v-once：只能渲染一次

v-bind：动态绑定一些属性

v-pre：v-pre 可以跳过模板渲染，写什么就是什么

v-on：绑定事件

v-if：满足条件才会显示，否则连html结构体都没有

v-elseif:

v-else:

v-show：值为true才会显示内容，否则display:none

v-model：双向绑定数据

2.2.2 缩写

v-bind == : 示例：v-bind:value == :value

v-on == @ 示例：v-on:click="show" == @click

2.3. 自定义指令

2.3.1 局部自定义指令

**示例： **


	当前的n值是：
	放大10倍的n值是：
	


const vm = new Vue({
	el: "#app",
	data: {
		n: 1
	},
	directives: {
		big(element, binding) {
			element.innerText = binding.value * 10;
		},
		fbind: {
			// 指令与元素成功绑定时（一上来）
			bind(element, binding) {
				element.value = binding.value
			},
			// 指令所在元素被插入页面时
			inserted(element, binding) {
				element.focus()
			},
			// 指令所在的模板被重新解析时调用
			update(element, binding) {
				element.value = binding.value
				console.log('update');
			}
		}
	}
})

效果：

2.3.2 全局自定义指令


	当前的n值是：
	


Vue.directive('fbind', {
	// 指令与元素成功绑定时（一上来）
	bind(element, binding) {
		element.value = binding.value
	},
	// 指令所在元素被插入页面时
	inserted(element, binding) {
		element.focus()
	},
	// 指令所在的模板被重新解析时调用
	update(element, binding) {
		element.value = binding.value
		console.log('update');
	}
})

const vm = new Vue({
	el: "#app",
	data: {
		n: 1
	}
})

效果：

3. 数据绑定

3.1 单项数据绑定

语法格式： v-bind:属性名或 :属性名

特点： 数据只能从data流向页面

示例：


    


new Vue({
	el:"#app",
	data:{
		msg:'Hello,Tom'
	}
})

说明： input的value会随着msg的改变而改变，但不会随着input的value值的改变而改变。

3.2 双向数据绑定

语法格式： v-model="属性名"

特点： 数据能从data流向页面，也能从页面流向data

示例：


    


new Vue({
	el:"#app",
	data:{
		msg:'Hello,Tom'
	}
})

说明： input的value会随着msg的改变而改变，也会随着input的value值的改变而改变，所以说是双向绑定。且用于表单中。

4. 事件处理

4.1 绑定监听

语法格式： v-on:事件名='方法名' 或 @事件名='方法名'

举例： v-on:click='show' 或 @click='show'

示例：


    


new Vue({
	el:"#app",
	methods:{
		Show(){
			alert('我是弹窗')
		}
	}
})

效果：

4.2 事件修饰符

作用： 可以给事件加一些特殊行为，比如阻止冒泡

**语法格式： ** @click.prevent='Show'

**举例： **

prevent : 阻止事件的默认行为 event.preventDefault()

stop : 停止事件冒泡 event.stopPropagation()

once：事件只能触发一次

capture：使用事件的捕获模式

self：只有event.target是当前操作元素时才触发事件

passive：事件的默认行为立即执行，无需等待事件的回调执行完毕

4.3 按键修饰符

作用： 当按住键盘的某一个指定的按键时才会触发事件

语法格式： @keyup.enter='Show' // 只有按回车时才执行Show方法

编程式绑定键盘按键：（方式一）


    


new Vue({
	el:"#app",
	methods:{
		Show(){
			if(event.key === 'Enter'){
				alert(`你刚刚按了${event.key}键`)
			}
		}
	}
})

编程式绑定键盘按键：（方式二）


    


new Vue({
	el:"#app",
	methods:{
		Show(){
			if(event.keyCode === 13){
				alert('你刚刚按了Enter键')
			}
		}
	}
})

5. 计算属性-computed

介绍： 计算属性是一个有返回值的方法，将复杂的逻辑运算写入计算属性的某个方法中并返回值，调用时只需要写方法名，这就是计算属性.

使用： 计算属性都要写入computed配置中，每一项都是一个有返回值的函数。

**示例： **


    半径为2的圆的面积：{{ cicleArea }}	


new Vue({
	el:"#app",
	computed:{
		cicleArea(){
			return 2**2 * 3.14
		}
	}
})

效果：

6. 数据监视-watch

介绍： 数据监视是为监视数据的变化，当数据发生改变时便触发数据监视，从而发生一些行为，其底层原理是get(),set()。

6.1 普通数据监视

监视数据n，当点击按钮时会打印 "n被修改了" 信息


    


const vm = new Vue({
	el: "#app",
	data: {
		n:1
	},
	watch:{
		n:{
			handler(nweValue,oldValue){
				console.log('n被修改了');
			}
		}
	}
})

6.2 深度数据监视

深度数据监视是为了解决监视对象值得问题


    


const vm = new Vue({
	el: "#app",
	data: {
		n:{
            m:1,
            b:1
		}
	},
	watch:{
		n:{
			deep:true,	//开启深度监视
			immediate:true,	//初始化时让handler调用一下
			// 当n里面的值发生改变时会调用handler函数
			handler(newValue,oldValue){
				console.log('n的值修改了');
			}
		},
	}
})

6.3 Vue.set()

作用： 在目标对象中追加响应式

语法格式： Vue.set(target,key,value)

注：不能在data根数据下添加对香港

示例： 在student对象中添加响应式数据sex

Vue.set(this.student,'sex','男')

vm.$set(vm.student,'sex','男')

7. 过滤器

作用： 过滤器的作用是给数据进行过滤，加工，处理再返回。

使用：


    {{ msg | msgFilter('!') }}


new Vue({
	el: "#app",
	data: {
		msg: "我，爱，你"
	},
	filters: {
		msgFilter(value, param) {
			return value + param
		},
	}
})

总结：过滤器的使用就是在被过滤的数据后面加 | 然后写过滤方法，方法配置在filters中，并且方法要有返回值，过滤器可以有多层过滤，其中后一个过滤器过滤的是前一个数据。

8. 样式绑定

8.1 class绑定

说明：class绑定可动态绑定class样式




	
	

	
	

	
	


const vm = new Vue({
	el: '#app',
	data: {
		color: 'yellow',
		colorArray: ['green', 'blue', 'red', 'yellow'],
		colorObj: {
			green: false,
			red: false,
			yellow: true,
			blue: true
		}
	}

8.2 style绑定

说明：style绑定可将对象式样式动态绑定


	


const vm = new Vue({
	el: '#app',
	data: {
		styleObj: {
			backgroundColor: 'red',
			border: '10px dashed #55ff7f',
			borderRadius: '50%',
			width: '200px',
			height: '200px',
			margin: '20px auto'
		}
	}
})

效果：

9. 条件渲染

9.1 v-if

作用： 使用v-if条件渲染指令来控制元素的显示与隐藏。

语法格式： v-if = ’boolean‘

示例：


	Hello,Vue!


const vm = new Vue({
	el: '#app',
	data: {
		isShow: true
	}
})

注：v-if 当值为false时连结构体也没有，所以不适合频繁刷新隐藏的用途

9.2 v-show

作用： 使用v-show条件渲染指令来控制元素的显示与隐藏。

语法格式： v-show = ’boolean‘

示例：


	Hello,Vue!


const vm = new Vue({
	el: '#app',
	data: {
		isShow: true
	}
})

注：v-show控制的是元素的显示与隐藏属性，当值为false时会给元素添加 display:none 属性，且适合频繁的显示隐藏用途。

10. 循环渲染

作用： 使用v-for指令快速批量渲染页面模板内容。

语法格式： v-show = '数组 | 字符串 | 对象'

示例：


	遍历数组
	
		{{p.name}}---{{p.age}}
	


const vm = new Vue({
	el: "#app",
	data: {
		persons:[
			{id:1001,name:'张三',age:16},
			{id:1002,name:'李四',age:17},
			{id:1003,name:'王二',age:19},
		]
	}
})

注：v-for不仅能遍历数组也能遍历字符串和对象，需要注意的是，使用v-for渲染时要给所渲染标签添加:key属性

11. Vue生命周期

11.1 生命周期图

11.2 常用的生命周期方法

1.   mounted(): 发送 ajax 请求, 启动定时器等异步任务。

beforeDestory(): 做收尾工作, 如: 清除定时器。

11.3 销毁Vue实例

const vm = new Vue({
	el: "#app",
	beforeDestory(){
		this.$destory();
	}
})

12. Vue组件化编程

模块：

理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
为什么: js 文件很多很复杂
作用: 复用 js, 简化 js 的编写, 提高 js 运行效率

**组件： **

理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)
为什么: 一个界面的功能很复杂
作用: 复用编码, 简化项目编码, 提高运行效率

**模块化： **当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

**组件化： **当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。

12.1 单文件组件

12.1.1 一个.vue 文件的组成(3 个部分)

1. 模板页面

2. JS模块对象

3. 样式

12.2 基本使用

1. 引入组件

import 组件名 from '路径/组件名'

2. 映射成标签

export default{
	components:{组件名}
}

3. 使用组件标签

<组件名>

13. Vue-CLI

13.1 安装Vue-CLI

安装Vue-CLI

npm install -g @vue/cli

验证是否安装成功

vue --version

升级Vue-CLI

npm update -g @vue/cli

13.2 使用Vue-CLI创建项目

方式一

vue create '项目名'

方式二：使用可视化界面创建

vue ui

启动项目

npm run serve

打包项目

npm run build

13.3 模板项目结构

├── node_modules

├── public

│ ├── favicon.ico: 页签图标

│ └── index.html: 主页面

├── src

│ ├── assets: 存放静态资源

│ │ └── logo.png

│ │── component: 存放组件

│ │ └── HelloWorld.vue

│ │── App.vue: 汇总所有组件

│ │── main.js: 入口文件

├── .gitignore: git 版本管制忽略的配置

├── babel.config.js: babel 的配置文件

├── package.json: 应用包配置文件

├── README.md: 应用描述文件

├── package-lock.json ：包版本控制文件

13.4 render函数

作用： 向页面中渲染内容

new Vue({
	el: "#app",
	render: h => h(APP)
})

13.5 ref属性

作用： 加在HTML标签上可以代替id用来获取DOM元素，加在组件标签上可以获取组件实例对象。

语法格式： ref = 'name'

示例：

13.6 props配置

作用： 父组件向子组件传值。

示例：

父组件

注：属性前面加：时，值可以是js表达式

子组件

13.6.1 props配置方式

方式一：简单声明接收

props:['name','age']

方式二：接收的同时对数据类型进行限制

props:[
	name: String,
	age: Number
]

方式三：接收的同时对数据类型进行限制、开启严格模式、默认值

props:[
	name: {
		type: String,	//name的类型是字符串
		required: true	//必须要传的
	},
	age: {
		type: Number,
		default: 99		//默认值
	}
]

注：接收到的数据不能修改，props是只读的，如果进行了修改就会发生警告，如要修改请将props的值赋值到data中，然后修改data中的数据。

且不能用key变量作为传值变量，因为key已经被Vue征用了。

13.6.2 props子组件向父组件传值

父组件：APP

子组件：Student

13.7 插件

插件的作用： 增强Vue

定义一个插件：

export default{
	install(Vue){
		//获取Vue缔造者，可以使用Vue干一些事情，比如定义组件……
	}
}

引入并使用插件：

//引入插件
import plugin from './plugin'
//使用插件
Vue.use(plugin)

注：一般开发中使用npm下载安装插件，然后在main.js中引入并使用插件。

13.8 本地存储

13.8.1 localStorage

作用： 将数据存储到磁盘中，浏览器关闭数据仍然会有。

添加数据

localStorage.setItem('msg','Hello')

删除数据

localStorage.removeItem('msg')

清除所有数据

localStorage.clear()

修改数据

localStorage.setItem('msg','法外狂徒张三')

查询数据

localStorage.getItem('msg')

13.8.2 sessionStorage

作用： 将数据存储到内存中，浏览器关闭数据消失。

添加数据

sessionStorage.setItem('msg','Hello')

删除数据

sessionStorage.removeItem('msg')

清除所有数据

sessionStorage.clear()

修改数据

sessionStorage.setItem('msg','法外狂徒张三')

查询数据

sessionStorage.getItem('msg')

14. 自定义事件

介绍： 通过自定义事件可以实现子给父传数据。

14.1 绑定事件

方式一

方式二

给组件绑定原生事件

注：当给组件绑定原生事件时需要加上native修饰符，这样Vue模板解析的时候就知道是原生事件了。

14.2 触发事件

App组件：绑定事件

Student组件：触发事件

14.3 解绑事件

15. 全局事件总线

15.1 安装全局事件总线

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
	render: h => h(App),
	// 安装全局事件总线
	created() {
		Vue.prototype.$bus = this
	}
}).$mount('#app')

15.2 在全局事件总线中定义事件

App.vue

15.3 触发全局事件总线中的事件

Student.vue

15.4 $nextTick

作用： 在下一次DOM更新结束后执行指定的回调。

语法： this.$nextTick(回调函数)

16. 动画

16.1 集成第三方动画

安装第三方动画库

cnpm install animate.css

17. 配置代理

module.exports = {
	// 开启代理服务器(方式一)
	// devServer: {
	//   proxy: 'http://localhost:9090'
	// }

	// 开启代理服务器-多个代理(方式二)
	devServer: {
		proxy: {
			'/java': {
				target: 'http://localhost:9090',
				pathRewrite:{'^/java':''},
				//ws: true,	// 用于支持websoket
				changeOrigin: true	// 默认为true
			},
			'/foo': {
				target: ''
			}
		}
	}
}

18. 插槽

介绍：父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用 slot 技术。

18.1 默认插槽

App.vue

Category.vue

效果

18.2 具名插槽

说明： 给插槽起名字，使用的时候加上slot='name'

App.vue

Category.vue

效果

18.3 作用域插槽

App.vue

Category.vue

效果

注意：插槽内容是在父组件中编译后, 再传递给子组件的。

19. Vuex

19.1 Vuex简介

专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

19.2 安装Vuex

npm install vuex

19.3 Vuex工作原理图

vuex

分析：

引入Vuex并挂载在vm上，这样vm和vc都能访问
使用dispatch方法转发到Actions中
由Actions去commit提交调用Mutations
由Mutations去处理数据
数据处理完了Render渲染给组件实例
State是数据存储区，Actions是行为控制区，Mutations是行为执行区

19.4 搭建Vuex环境

安装Vuex

npm install vuex

创建Store实例

./src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
  state:{},
  actions:{},
  mutations:{}
})
export default store

挂载store到vm上

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store: store, //挂载store到vm上
  render: h => h(App),
}).$mount('#app')

19.5 四个map方法

mapState

开启命名空间后，组件中读取state数据

// 方式一：自己直接读取
this.$store.state.personAbout.list
// 方式二：借助mapState读取
...mapState('personAbout',['list'])

mapGetters

开启命名空间后，组件中读取getters数据

// 方式一：自己直接读取
this.$store.getters['personAbout/list']
// 方式二：借助mapGetters读取
...mapGetters('personAbout',['list'])

mapActions

开启命名空间后，组件中调用dispatch

// 方式一：自己直接调用dispatch
this.$store.dispatch('personAbout/addperson',person)
// 方式二：借助mapActions读取
...mapActions('personAbout',['addperson'])	//数组写法
...mapActions('personAbout',{'addperson'：'addperson'})	//对象写法

mapMutations

开启命名空间后，组件中调用commit

// 方式一：自己直接调用commit
this.$store.commit('personAbout/addperson',person)
// 方式二：借助mapMutations读取
...mapMutations('personAbout',['addperson'])	//数组写法
...mapMutations('personAbout',{'addperson'：'addperson'})	//对象写法

Vuex模块化+namespace

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

let count = {
  //开启命名空间
  namespaced:true,	// 如果为false，那么countAbout将无效
  state: { sum: 0, },
  getters: { },
  actions: {},
  mutations: {}
}

let person = {
  //开启命名空间
  namespaced:true,	// 如果为false，那么personAbout将无效
  state: {},
  mutations: {}
}

export default new Vuex.Store({
  modules: {
    countAbout: count,
    personAbout: person
  }
})

20. 路由

20.1 路由简介

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

20.2 路由的基本使用

20.2.1 安装路由

npm install vue-router

20.2.2 搭建路由环境

./src/router/index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home,
    }
  ]
})

./src/main.js

import Vue from 'vue'
import App from './App.vue'
// 引入router
import router from './router/index.js'

new Vue({
  render: h => h(App),
  router: router
}).$mount('#app')

App.vue

20.2.3 嵌套路由

./src/router/index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

export default new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
      	{
           path: 'message',
           component: Message,
      	}
      ]
    }
  ]
})

App.vue

20.2.4 路由的query

介绍： 通过路由给组件传值。

App.vue

Detail.vue (接收传值)

20.2.5命令路由

./src/router/index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

export default new VueRouter({
  routes: [
    {
      // 路由命名
      name: 'home'
      path: '/home',
      component: Home,
      children: [
      	{
           path: 'message',
           component: Message,
      	}
      ]
    }
  ]
})

App.vue

20.2.6 路由的params

介绍： 通过路由给组件传值。

./src/router/index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

export default new VueRouter({
  routes: [
    {
      // 路由命名
      name: 'home',
      path: '/home',
      component: Home,
      children: [
      	{
           name: 'message',
           path: 'message/:id/:title',
           component: Message,
      	}
      ]
    }
  ]
})

App.vue

注：若使用:to 进行params路由传参，路由的path必须要写占位符，且只能用命名路由。

20.2.7 路由的props

/src/router/index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

export default new VueRouter({
  routes: [
    {
      // 路由命名
      name: 'home',
      path: '/home',
      component: Home,
      children: [
      	{
           name: 'message',
           component: Message,
           // 写法一： 通过props传参		
           props:{ id:1,title:'hello' },
           // 写法二： 通过props传参		
           props:true,//值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给						  //Message组件  /:id/:title
           // 写法三： 值为函数,以props的形式传给Message组件
           props($route) {
              return {
                  id: $route.query.id,
                  title: $route.query.title
              }
           } 
      	}
      ]
    }
  ]
})

App.vue

Detail.vue (接收传值)

20.2.8 router-link的replace属性

介绍： Vue-Router有两种模式，一种是push模式，一种是replace模式，当使用push模式时会留下url记录，当使用replace模式时则不会留下url记录，默认是push.

使用replace模式

20.2.9 编程式路由导航

介绍： 以前我们要跳转路由需要些标签，这种叫声明式路由导航，编程式路由导航无论使用什么标签都可以。

编程式路由导航实例

20.2.10 缓存路由组件

keep-alive

20.2.11 两个新的生命名周期钩子

activated 、deactivated

20.2.12 全局前置路由守卫

介绍： 全局前置路由守卫在每一次路由切换之前触发，初始化时触发。可用于访问控制。

router.beforeEach((to, from, next) => {
  // to :目标地址
  // from :当前地址
  // next():放行
})

20.2.13 全局后置路由守卫

介绍： 全局后置路由守卫在每一次路由切换之后触发，初始化触发。可用于访问控制。

router.afterEach((to, from) => {
  // to :目标地址
  // from :当前地址
})

20.2.14 独享路由守卫

介绍： 单个路由的守卫，用在路由对象中。

示例

const router = new VueRouter({
  routes: [
    {
      name: 'guanyu',
      path: '/about',
      component: About,
      beforeEnter: (to, from, next) => {
    	console.log('独享前置路由守卫');
		console.log(to,from,next);
	  },
    },
  ]
})

注：没有独享后置路由守卫

20.2.15 单组件路由守卫

示例：

20.2.16 history模式与hash模式

.src/router/index.js

import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

// 创建一个路由器
const router = new VueRouter({
  mode:'history',	//使history模式
  routes: []
})

export default router

21. ElementUI

21.1 简介

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

21.2 安装

npm install element-ui

21.3 全部导入

main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

21.4 按需导入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

main.js

import Vue from 'vue';
import App from './App.vue';
import { Button, Select } from 'element-ui';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

22. Axios

22.1 简介

易用、简洁且高效的http库。

22.2 安装

npm install axios

22.3 axios API

22.3.1 POST请求

方式一

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

方式二

axios.post("/user/123456",{firstName:'Fred',lastName:'Flintstone'})

22.3.2 Get请求

方式一

// 获取远端图片
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

方式二

axios.get("http://bit.ly/2mTM3nY")
.then(function(response, responseType:'stream'){
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
})

22.4 全局的axios默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

vue

Vue2

1. npm包管理器的基本使用

2. 模板语法

2.1 插值

{{msg}}

2.2 指令

2.2.1 常用指令

2.2.2 缩写

2.3. 自定义指令

2.3.1 局部自定义指令

当前的n值是：

放大10倍的n值是：

2.3.2 全局自定义指令

当前的n值是：

3. 数据绑定

3.1 单项数据绑定

3.2 双向数据绑定

4. 事件处理

4.1 绑定监听

4.2 事件修饰符

4.3 按键修饰符

5. 计算属性-computed

半径为2的圆的面积：{{ cicleArea }}

6. 数据监视-watch

6.1 普通数据监视

6.2 深度数据监视

6.3 Vue.set()

7. 过滤器

{{ msg | msgFilter('!') }}

8. 样式绑定

8.1 class绑定

8.2 style绑定

9. 条件渲染

9.1 v-if

Hello,Vue!

9.2 v-show

Hello,Vue!

10. 循环渲染

遍历数组

11. Vue生命周期

11.1 生命周期图

11.2 常用的生命周期方法

11.3 销毁Vue实例

12. Vue组件化编程

12.1 单文件组件

12.1.1 一个.vue 文件的组成(3 个部分)

12.2 基本使用

13. Vue-CLI

13.1 安装Vue-CLI

13.2 使用Vue-CLI创建项目

13.3 模板项目结构

13.4 render函数

13.5 ref属性

Hello,Vue

13.6 props配置

姓名：{{ name }}

年龄：{{ age }}

13.6.1 props配置方式

13.6.2 props子组件向父组件传值

姓名：{{ name }}

年龄：{{ age }}

13.7 插件

13.8 本地存储

13.8.1 localStorage

13.8.2 sessionStorage

14. 自定义事件

14.1 绑定事件

14.2 触发事件

14.3 解绑事件

15. 全局事件总线

15.1 安装全局事件总线

15.2 在全局事件总线中定义事件

15.3 触发全局事件总线中的事件

15.4 $nextTick

16. 动画

16.1 集成第三方动画

姓名：{{ name }}

年龄：{{ age }}

17. 配置代理

18. 插槽