关于使用Vux猜到的坑

VUX是基于WeUI和Vue(2.x)开发的移动端UI组件库，主要用于微信页面。

github地址：https://github.com/airyland/vux；

中文文档：https://vux.li/；

1、如何快速开始搭建一个vux项目，可以使用基于webpack的vux2模板

npm install vue-cli -g

vue init airyland/vux2

npm install --registry=https:  //registry.npm.taobao.org # 或者 cnpm install

npm run dev

2、如何修改vux的默认样式

在src目录下创建styles文件夹，在styles下创建theme.less文件，同时在build文件下webpack.base.conf.js中配置vux-loader。

配置完成后就可以在theme.less中修改默认样式

{
  name: 'less-theme',
  path: 'src/styles/theme.less' // 相对项目根目录路径
}

               

 

3、关于添加@click事件，vux中普通dom元素添加@click事件是能够触发的，而对vux中组件添加click事件需要使用@click.native。vue官方文档解释 .native - 监听组件根元素的原生事件 。

<!-- 测试代码 -->
<template>
  <div>
    <x-button @click="isShow=!isShow" text="来点我呀" type="warn"></x-button>
    <p v-show="!isShow">怎么不点呢</p>
    <p v-show="isShow">让你点就点啊</p>
  </div>
</template>

<script>
  import { XButton } from 'vux'
  export default {
    components: {
      XButton
    },
    data () {
      return {
        isShow: false
      }
    }
  }
</script>

<style scoped> 
</style>

<x-button @click="isShow=!isShow" text="来点我呀" type="warn"></x-button> 　并没有触发单击事件

修改为

<x-button @click.native="isShow=!isShow" text="来点我呀" type="warn"></x-button>

点击后

4、如何获取普通dom元素，因为vux是基于vue开发的组件，并不推荐使用原生js操作dom元素；vue中查找dom元素可以使用ref，例如 <div ref="div"></div>; js中用this.$refs.div获取当前元素。

关于ref的介绍请查看vue官网文档：https://cn.vuejs.org/v2/api/#ref

<template>
  <div style="padding-top: 20px">  
    <div ref="div" @click="printdiv" class="div1">点击获取当前元素</div>
  </div>
</template>

<script>
  import { XButton } from 'vux'
  export default {
    components: {
      XButton
    },
    methods: {
      printdiv () {
        console.log(this.$refs.div)
      }
    }
  }
</script>

<style scoped>
.div1 {
  width: 300px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #f00;
}
</style>

5、关于工具栏tabbar的selected问题，如果直接在Home页面添加selected属性，那么在跳转Demo页面后再次刷新页面，工具栏被选中的会是Home而不是Demo；

<!-- 在Demo页面刷新被选中的依旧是Home页面 -->
<tabbar slot="bottom">
    <tabbar-item selected link="/Home">
        <span slot="label">Home</span>
    </tabbar-item>
    <tabbar-item link="/Demo">
        <span slot="label">Demo</span>
    </tabbar-item>
</tabbar>

解决方法就是通过判断路由动态绑定selected

<!-- HTML -->
<tabbar slot="bottom">
    <tabbar-item :selected="isHome" link="/Home">
        <span slot="label">Home</span>
    </tabbar-item>
    <tabbar-item :selected="isDemo" link="/Demo">
        <span slot="label">Demo</span>
    </tabbar-item>
</tabbar>

//JS 判断工具栏被选中
isHome() {
    return //Home/.test(this.$route.path);
},
isDemo() {
    return //Demos/.test(this.$route.path);
}

 本人前端菜鸟一枚，本文仅用于交流学习，如果有不对的地方，请帮忙留言指正，谢谢。