第三方組件庫：element-ui
使用方法：
1.引入樣式
<!-- 引入element-ui樣式 -->
<link rel="stylesheet" type="text/css" >
2.引入vue
<!-- 引入Vue -->
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
3.引入element-ui組件庫
//注意：第三方組件庫执赡，必須在Vue的下面引入
<!-- 引入element-ui組件庫 -->
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
4.找想要的樣式組件
https://iview.github.io/docs/guide/install
5.復制代碼到對應的.vue文件
6.修改對應的數(shù)據(jù)
<div id='app'>
<template>
<!-- 因為template里面只能有一個根元素察郁，官方這里拷過來以后在外面加了一層div標簽包起來 -->
<div>
<el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
</div>
</template>
</div>
<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js'></script>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#app',
data() {
return {
//修改相應的數(shù)據(jù)
num: 1
};
},
computed: {},
watch: {},
methods: {},
created() { },
mounted() { },
})
</script>
第三方組件庫：iview
使用方法：
1.引入樣式
<!-- 引入element-ui樣式 -->
<link rel="stylesheet" >
2.引入vue
<!-- 引入Vue -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
3.引入element-ui組件庫
//注意：第三方組件庫叉谜，必須在Vue的下面引入
<!-- 引入element-ui組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
4.找想要的樣式組件
https://element.eleme.io/#/zh-CN/component/installation
5.復制代碼到對應的.vue文件
6.修改對應的數(shù)據(jù)
<div id='app'>
<template>
<!-- 因為template里面只能有一個根元素，官方這里拷過來以后在外面加了一層div標簽包起來 -->
<div>
<!-- <Input v-model="value" placeholder="請輸入..." style="width: 300px"></Input> -->
<!-- 注意：非 template/render 模式下循未，需使用 i-input -->
<i-input v-model="value" placeholder="請輸入..." style="width: 300px"></Input>
</div>
</template>
</div>
<!-- 引入Vue -->
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<!-- 引入iview -->
<script type="text/javascript" src="http://unpkg.com/view-design/dist/iview.min.js"></script>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#app',
components: {},
data() {
return {
value: ''
};
},
computed: {},
watch: {},
methods: {},
created() { },
mounted() { },
})
</script>
第三方組件庫：Vant
使用方法：
1.引入樣式
<!-- 引入樣式文件 -->
<link rel="stylesheet" />
2.引入vue
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
3.引入vant組件庫
//注意：第三方組件庫，必須在Vue的下面引入
<!-- 引入vant組件庫 -->
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
4.找想要的樣式組件
https://youzan.github.io/vant-weapp/#/home
5.復制代碼到對應的.vue文件
6.修改對應的數(shù)據(jù)
<div id="app">
<van-button type="primary">主要按鈕</van-button>
<van-cell-group>
<van-cell title="單元格" value="內(nèi)容" />
<van-cell title="單元格" value="內(nèi)容" label="描述信息" />
</van-cell-group>
<van-cell-group>
<van-field v-model="value" label="文本" placeholder="請輸入用戶名" />
</van-cell-group>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
value:'123'
}
},
})
</script>
