Vue单页应用 (用的vue-cli)三 (vue YDUI)

原创 zydty5061 随笔 随手记录 323阅读 2017-06-23 17:21:40 举报

1.直接在页面上引入css和js使用
<!-- 使用px -->
<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.px.css">

<!-- 引入Vue2.x -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="//unpkg.com/vue-ydui/dist/ydui.js"></script>

2.NPM 安装
$ npm install vue-ydui --save

目录结构

vue-ydui / 通过 npm install vue-ydui 下载的目录结构 /

-- dist-- lib.px / 独立单个组件目录(css单位使用px) /-- actionsheet-- badge-- ...
-- lib.rem / 独立单个组件目录(css单位使用rem) /
-- actionsheet
-- badge
-- ...
-- ydui.base.css / 重置基础样式(其未包含任何组件样式) /
-- ydui.px.css / 所有组件样式(使用px) /
-- ydui.rem.css / 所有组件样式(使用rem) /
-- ydui.flexible.js / rem自适应类库 /
-- ydui.js / vue-ydui 核心文件 /
-- LICENSE
-- package.json
-- README.md

全局引入

一般在 webpack 入口文件 main.js 中如下配置:
import Vue from 'vue';

import YDUI from 'vue-ydui';
import 'vue-ydui/dist/ydui.rem.css';
/ 使用px:import 'vue-ydui/dist/ydui.px.css'; /

Vue.use(YDUI);

new Vue({
el: '#app',
render: h => h(App)
});

然后就可以在vue组件里使用了
<yd-button :type='type' @click.native='cl'>primary</yd-button>
data () {
return {
type:'danger'
}
},
methods:{
jump(path){
this.$router.push(path)
},
cl(){
this.type='primary'
}
}
这样点击按钮会改变颜色,估计是因为改变了vue实例的属性值,所有相关绑定标签重新渲染

<yd-button type='primary' @click.native='cl'>primary</yd-button>
如果直接操作dom,setAttribute(‘type’,‘danger’),修改type属性的值,不会重新渲染,不会修改颜色

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复