Vue项目
1、新建Vue项目:vue init webpack projectName
2、vue-router模块
1、安装vue-router模块:npm install vue-router --save-dev
2、在src文件夹下新建文件夹router继续新建文件index.js
编辑index.js文件
首先引入模块:
import Vue from 'vue';
import VueRouter from 'vue-router';
import home from '../component/home'
import user from '../component/user'
...(引入自己定义的组件)
声明引用:
Vue.use(VueRouter);
在接口通告新建的 router:
exports default new VueRouter({
routes: [
]
})
3、在main.js中编辑
import router from './router'(引入模块)
4、在App组件(组件都可以)中引用
<router-link to="/home">home</router-link>
<router-link to="/user">user</router-link>
<div>
<router-view></router-view>
</div>
2、vuex模块
1、安装vuex模块:npm install vuex --save
2、在src文件夹下创建新文件夹store再创建文件index.js
编辑index.js文件
引入模块:
import Vue from 'vue'
import Vuex from 'vuex'
声明引用:
Vue.use(Vuex)
宣告出口:
export default new Vuex.Store({
})
3、在main.js中编辑
import store from './store/index'(引入模块)
4、在index.js中继续编辑:
1、声明变量(单一状态树)
const state = {
count,
sum...(等等需要在不同组件中使用的变量)
}
在其他组件中引用:
1、先引入store模块:import store from '@/store/index'
2、正常访问变量:$store.state.count
3、通过 computed 的计算属性直接赋值
computed: {
count () {
return this.$store.state.count
},
sum() {
return this.$store.state.sum
}
}
4、借用辅助函数mapState
<script>
import mapState from 'vuex'//引入辅助函数
computed: mapState({//ES6的箭头函数
count: state => state.count,
sum: state => state.sum
}) //或者直接使用mapState辅助函数的字符串数组
computed: mapState(['count', 'sum']) </script>
2、声明控制状态对象的方法:
const mutations = {
add (state, n) {
state.count += n;
}
}
在其他组件中引用:
1、正常访问:$.store.commit('add', '10')
2、通过methods方法控制mutations(参考上面computed,注意:提交方法为:this.$store.commit('add'))
3、借用mapMutations辅助函数
import {mapState, mapMutations} from 'vuex'//引入辅助函数 methods: {
...mapMutations(['add'])
}
最新文章
- animate支持的css属性
- shell---变量自增
- Java8的新特性以及与C#的比较
- 在Webstorm/Phpstorm中设置连接FTP,并快速进行文件比较,上传下载,同步等操作
- 一。常用UIView的属性和方法
- struts2与spring mvc 的比较
- HDU 1598 find the most comfortable road (MST)
- 佛主保佑,永无bug
- Java并发编程--理解ThreadLocal
- day55
- 23个mysql查询语句
- PPLB条码打印
- Ubuntu 16.04 安装 Docker
- hibernate入门-基本配置及简单的crud操作
- 外网访问VMware虚拟机
- Mac Eclipse安装lombok
- 关于springboot aop 俩次调用的问题 aop多次调用
- zabbix 使用问题两个--中文乱码,以及监控ESXi下的虚拟机
- mysqldump命令的安装
- Android呼吸灯效果实现
热门文章
- 假期小结 BIO, NIO, AIO
- Cisco NTP配置
- MySQL 5.7.19 忘记密码 重置密码 配置文件my.ini示例 服务启动后停止 log配置
- file_name[:-4]
- Mac 安装 Jenkins
- Apache重写规则由浅入深剖析.htaccess
- asp.net mvc 3.0 知识点整理 ----- (3).HtmlHelper(Html 辅助方法)介绍
- Qt编写软件运行时间记录(开源)
- C#自定义Winform无边框窗体
- 排序算法--冒泡排序(Bubble Sort)_C#程序实现