续上一篇文章: ,如果没有看过的可以移步看一下。
本篇文章目录如下:
1. vue 组件的说明和使用
2. vuex 在实际开发中的使用
3. 开发实践总结
在 header 组件内部允许外部使用,需要导出属性,有 2 种导出方法
1. 默认导出(不用命名)
- 1 export
- default {
- 2 data() {
- 3
- return {
- 4 msg:
- 'header'5
- }
- 6
- }
- 7
- }
以上代码实际上会自动生成一个 new vue
在父组件中导入
- 1 import Header from './components/header'
2. 直接在任何变量或者函数前面加上一个关键字
- 1 export const sqrt = Math.sqrt;
在父组件中导入
- 1 import sqrt from './components/header';
引用一个组件
- import Header from './components/header'
在该组件中定义
- 1 export
- default {
- 2 data:
- function() {},
- //data一定要是返回一个函数
- 3 components: {
- 4 comHeader: Header //声明组件
- 5
- }
- 6
- }
在 template 中使用
- 1 2 3 //注意,html不区分大小写,所以需要将 comHeader 写成 com-header
- 4 5
一个 vue 对象通常包括下面几个属性
- 1 data: //vue对象的数据
- 2 methods: //vue对象的方法
- 3 watch: //对象监听的方法
- 4 computed: //计算逻辑放到computed中
- 5 created: //属性已绑定,dom未生成,一般在这里进行ajax处理以及页面初始化处理
通过尤大大这张图,我们很清楚的看到,所有的数据流都是单向的,并且 actions 只能通过分发 mutations 来修改 store 实例的状态
像一些全局信息通用,比如 header 内容的渲染,是否显示,loading 什么时候显示,什么时候隐藏,以及接口 api 的固定值,都写在 store 记录组件的 state。
- 1 const store = new Vuex.Store({
- 2 state: {
- 3 comm: {
- 4 loading: false,
- //是否显示loading
- 5 apiUrl: 'http://www.sherlochao.com:9091/photosharing/',
- //接口base url
- 6 imgUrl: 'http://www.sherlochao.com:9091/filebase',
- //图片base url
- 7 indexConf: {
- 8 isFooter: true,
- // 是否显示底部
- 9 isSearch: true,
- // 是否显示搜索
- 10 isBack: false,
- // 是否显示返回
- 11 isShare: false,
- // 是否显示分享
- 12 title: '' // 标题
- 13
- }
- 14
- }
- 15
- }
- 16
- })
在 mutations 中改变 state 状态
- 1 const store = new Vuex.Store({
- 2 mutations: {
- 3 //loading的显示
- 4 isLoading: (state, status) = >{
- 5 state.comm.loading = status 6
- },
- 7 //修改header的信息
- 8 changeIndexConf: (state, data) = >{
- 9 Object.assign(state.comm.indexConf, data) 10
- }
- 11
- })
e.g 在 header.vue 中 控制是否显示
- 1 export
- default {
- 2 data:
- function() {
- 3
- return {}
- 4
- },
- 5 computed: {
- 6 isShowSearch: function() {
- 7
- return this.$store.state.comm.indexConf.isSearch //获取vuex里面 state 状态值
- 8
- },
- 9 title: function() {
- 10
- return this.$store.state.comm.indexConf.title 11
- },
- 12 isBack: function() {
- 13
- return this.$store.state.comm.indexConf.isBack 14
- }
- 15
- }
- 16
- }
template 代码
- 1 2 3 4 5 span 6 class = "iconfont icon icon-xiangzuojiantou" > 7 {
- {
- title
- }
- }
- 8 9 10
在其他地方控制 header 是否显示, e.g: 详情页面
- 1 export
- default {
- 2 created:
- function() {
- 3 vm.$store.commit('changeIndexConf', {
- 4 isFooter: false,
- 5 isSearch: false,
- 6 isBack: true,
- 7 isShare: true,
- 8 title: '详情页'9
- }) 10
- }
- 11
- }
1. vue-router
由于整个项目 list 组件很多地方公用,并且'我的收藏','搜索结果页面','我的圈子',仅仅只是从 /search/own 到 /search/star
- 1 export
- default {
- 2 watch:
- {
- 3 '$route' (to, from) {
- 4 // 对路由变化作出响应...
- 5
- }
- 6
- }
- 7
- }
2. 判断是否登陆
进入个人信息页面,由于需要判断是否已登陆,此时由 router 进行一个拦截,具体代码如下
- 1 router.beforeEach(function(to, from, next) {
- 2
- var userMsg = localStorage.getItem('userMsg') 3
- if (to.path === '/home') {
- 4
- if (!userMsg) {
- 5 next({
- path: '/login'
- }) 6
- }
- 7
- }
- 8 next() 9
- })
3. 常用 api
1. 点击事件获取当前对象
event.target , this 为 vue 对象 2. 和 jquery 类似获取当前 dom 对象
- 1 ref = "isSubmit"@click = "register"value = "立即注册"class = "button" / >
- 1 this.$refs.isSubmit.removeAttribute('disabled') //使用this.$refs 获取当前dom
其他常见的 api 可移步
如果在阅读中有发现任何错误或者有更好的建议,请联系我,谢谢!
来源: http://www.cnblogs.com/beidan/p/vue.html