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"
  1. 事件
v-on:xxx="函数"	/	@xxx="函数"
事件修饰符 -> @事件.xxx
  1. 循环
v-for="val,key in 数组"
v-for="val,key in json"

:key='数据的ID'		用来提高性能
  1. v-show display
  2. v-if 删除
  3. 计算 computed
  4. 监听 watch
  5. 路由 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
});
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值