vue

创建vm对象

let vm=new Vue({
  el: 根,	// 根元素
  data: {	// 数据
    txt: ''	
  },
  methods: {fn()}	// 事件
  computed: {fn()}	// 计算
  watch: {}			// 监听
});

视图层(HTML)写相应代码

1. 输出 {{txt}}
2. 双向数据绑定 v-model
3. 属性绑定

v-bind:属性名="数据"	/	:属性名="数据"

:style="json"
:class="arr"

4. 事件

v-on:xxx="函数"	/	@xxx="函数"
事件修饰符 -> @事件.xxx

5. 循环

v-for="val,key in 数组"
v-for="val,key in json"

:key='数据的ID'		用来提高性能

6. v-show display
7. v-if 删除
8. 计算 computed
9. 监听 watch
10. 路由 router
    - 由hash完成的
    - router-link就是个a
    - router-view占位符
    - 一个组件(component)也是一个完整的vm

vue-cli

初始化项目

vue init webpack xxx

运行

npm run start	// 根目录下

父子组件

父->子 :xxx=“数据” 子级.$attrs.xxx
子->父 函数
vuex

vuex 组件间通信

异步操作

axios

vue的ajax库

// main.js中引用
import axios from 'xxx'
Vue.prototype.ajax = axios;

// 组件中使用
(await this.ajax('数据地址')).data;

fetch

原生JS，是对ajax的官方封装

vuex

状态统一管理

1. state——状态
   全局唯一
   module
2. getter
   获取状态
3. mutation
   修改状态操作
4. action
   提交mutation

// 创建
const store=new Vuex.Store({
  strict: true,
  state: {},
  mutations: {},
  actions: {},
  getters: {}
});
// 注册
  Vue.use(Vuex);
  let vm=new Vue({
    ...
    store
    ...
  });

// 组件里——用
  this.$store.dispatch('action名字', 参数);

// 组件dispatch -> action commit -> mutation state.xx -> state

.vue模板

<template lang="html"></template>

<script>
export default {
	data() {	// 数据
		return {}
	},
	components: {},	// 声明组件
	mounted() {},	// 页面完成后执行
	computed: {},	// 数据改变-执行：配合vuex的数据交互
	methods: {		// 逻辑
		dispatch vuex里的action
	},
	watch: {}		// 监听数据变化
	filters: {}		// 函数	/ 使用：{{参数|函数名}}
}
</script>

<style lang="css"></style>

store模板

// vuex模块化——store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
	strict: true,		// 严格模式——只由mutation更改状态
	state: {			// 状态——json数据
		
	},
	mutations: {		// 操作state中数据
		funcName(state, arg) {}
	},
	actions: {			// 响应在用户操作行为导致的状态变化，执行mutation
		funcName({state, commit}, arg) {}		// funcName(store, arg) {}
		// commit('mutations中的函数'[, 参数])
	},
	getters: {			// 计算属性，里面的值变化就重新计算,通过外部调用来执行
		funcName(state) {}
	}
	// 数据交互——getter
	// 其他异步操作——action
});