关于Vux的一些事

本人前端菜鸟一枚，刚学习 vux 组件库1个星期，本文仅用于记录自己学习的小结，将自己遇到的问题记录下来，如果有不对的地方，请帮忙留言指正，谢谢。

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、关于获取当前元素可以添加ref属性

猜你喜欢