vue 2.0与java结合_[Java教程]vue 2.0 开发实践总结之疑难篇

[Java教程]vue 2.0 开发实践总结之疑难篇

0 2016-12-06 20:00:04

续上一篇文章：http://www.cnblogs.com/beidan/p/6129891.html ，如果没有看过的可以移步看一下。

本篇文章目录如下：

1.  vue 组件的说明和使用

2.  vuex在实际开发中的使用

3.  开发实践总结

1.  vue 组件的说明和使用一个组件实质上是一个拥有预定义选项的一个 Vue 实例

在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处理以及页面初始化处理

2. vuex

通过尤大大这张图，我们很清楚的看到，所有的数据流都是单向的，并且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.title11 },12 isBack: function () {13 return this.$store.state.comm.indexConf.isBack14 }15 }16 }

template代码1 2

3

5 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 }

3.开发实践总结

1. vue-router由于整个项目list组件很多地方公用，并且‘我的收藏’，‘搜索结果页面’，‘我的圈子’，仅仅只是从  /search/own 到 /search/star

此时，原来的组件实例会被复用，意味着组件的生命周期钩子不会再被调用

解决方法：  复用组件时，想对路由参数的变化作出响应的话，可以简单地 watch(监测变化)  对象

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

1 this.$refs.isSubmit.removeAttribute('disabled') //使用this.$refs 获取当前dom

其他常见的api  可移步   vue2.0官方文档

如果在阅读中有发现任何错误或者有更好的建议，请联系我，谢谢！

原创文章，转发请注明来源！

本文网址：http://www.shaoqun.com/a/267485.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

VUE

0