這篇文章主要介紹“vue常用的組件有哪些”,在日常操作中,相信很多人在vue常用的組件有哪些問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”vue常用的組件有哪些”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)與策劃設(shè)計(jì),武山網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:武山等地區(qū)。武山做網(wǎng)站價(jià)格咨詢:18982081108
本文操作環(huán)境:windows7系統(tǒng)、vue2.5.17版,DELL G3電腦。
vue常用組件有哪些?
本文所有組件示例都基于vuecli2。其中大部分組件,使用了vue.use()方法。
這里解釋一下為什么使用vue.use()。因?yàn)?,?dāng)插件是一個(gè)方法的時(shí)候,
我們只需要把該方法定義到vue的prototype上就可以使用:
import axios from 'axios' Vue.prototype.axios = axios
但是如果插件是一個(gè)對(duì)象,我們就需要通過(guò)vue.use()來(lái)引入該對(duì)象:
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router)
ok,那么我們先從vue全家桶那幾個(gè)核心組件開始介紹。
龍哥有很多小伙伴在學(xué)習(xí)vue到了route這一步就放棄了。因?yàn)橐忉宺oute是非常困難的,route的存在證明我們做的是一個(gè)SPA單頁(yè)應(yīng)用,而不是一大堆靜態(tài)html頁(yè)面。
那么到底什么是route呢?我們拋開服務(wù)端。換個(gè)說(shuō)法,你知道什么是響應(yīng)式吧。響應(yīng)式布局,通過(guò)媒體查詢出對(duì)方的手機(jī)型號(hào)和屏幕的分辨率, 為其切換展示的樣式。
route你可以理解它就是url的“媒體查詢”。通過(guò)在url輸入不同的路徑,可以響應(yīng)不同的vue頁(yè)面。
首先,我們打開vuecli中的main.js文件,可以發(fā)現(xiàn)route在這里被引入并且配置到vue上了。
//第一步引入route,form后面是你的route文件地址 import router from './router' //加載route new Vue({ el: '#app', render: h => h(App), //h=createElement 即渲染app中所有節(jié)點(diǎn) router, //route是在這一步裝載到vue中的 store, components: { App }, template: '<App/>', })
我們順藤摸瓜找到這個(gè)route的index.js配置文件,就可以發(fā)現(xiàn)里面都是為訪問(wèn)url做的配置。
import Vue from 'vue' import Router from 'vue-router' import index from '@/components/index' Vue.use(Router) export default new Router({ mode: 'history', routes: [{ path: '/', name: 'index', component: index }] })
如果你嫌麻煩你可以直接在這個(gè)routes中多復(fù)制幾個(gè)path這一段,然后把路徑修改成你自己的。
這里需要注意的是,route還涉及到了子路由和路由拆分的功能,這里不做過(guò)多闡述,請(qǐng)關(guān)注龍哥那篇關(guān)于vue-route的詳細(xì)教程,這里只做介紹。
還記得jquery中的這個(gè)方法嗎?
$.ajax()
它實(shí)際上是對(duì)javascript中原生ajax方法的一個(gè)封裝。
axios也是,只不過(guò)它作用于vue中。它的引入方法跟route不太一樣,因?yàn)樗鼉H僅是一套方法,所以我們直接定義到vue的prototype上即可。
首先,我們通過(guò)npm進(jìn)行安裝:
npm install axios -s-d
然后打開main.js:
import axios from 'axios' Vue.prototype.axios = axios
調(diào)用的時(shí)候,你可以寫在methods或者mounted等生命周期中。
let that = this; this.axios({ method: 'get',//請(qǐng)求方式 url: 'URL',//請(qǐng)求地址 params: { id: this.$route.query.id//發(fā)送的參數(shù) } }).then(function(response) { //請(qǐng)求成功后獲得的內(nèi)容進(jìn)行哪些操作 that.title = response.data.result[0].title })
另外,你還可以通過(guò)axios在打包時(shí)區(qū)分線上和線下環(huán)境
//配置axios區(qū)別線上和測(cè)試環(huán)境 if (location.hostname === 'localhost') { axios.defaults.baseURL = process.env.API_PATH_TEST; //配置本地webSocketIO地址 Vue.use(new VueSocketIO({ debug: false, connection: 'localhost', })) } else if (location.hostname === 'www.dangyunlong.com') { //配置線上webSocketIO地址 Vue.use(new VueSocketIO({ debug: false, connection: 'www.dangyunlong.com', })) axios.defaults.baseURL = process.env.API_PATH_PROD }
首先使用npm進(jìn)行安裝:
npm i vuex --save
在使用vuex的時(shí)候,我們需要在src目錄下新建一個(gè)store文件夾,然后在里面創(chuàng)建我們的狀態(tài)樹js。
并且在main.js中引入它
//加載vue store import store from './store' new Vue({ el: '#app', render: h => h(App), router, store, components: { App }, template: '<App/>' })
從這里我們不難看出,vuex是基于store的。并且,vuex還是單一狀態(tài)樹。那么store狀態(tài)樹又怎么來(lái)配置呢?
打開store中的這個(gè)index.js
export default new Vuex.Store({ state: { name: "dangyunlong", age: 30, index: {} //首頁(yè)信息 }, getters:{ //getters 相當(dāng)于是vuex的計(jì)算屬性,主要作用是對(duì)state中的值進(jìn)行處理 jia(state,num){ return state.age + 1; }, jian(state,num){ return state.age - 1; } }, mutations: { //vuex用于修改state中數(shù)據(jù)的方法 gaiming(state, name) { state.name = name }, getIndex(state, indexData) { state.index = indexData } }, actions:{ //actions 用于異步執(zhí)行vuex mutations中的方法 它不會(huì)直接修改state而是作用于mutations //actions 中的方法可以接收一個(gè)context參數(shù),這里的context就指vuex increment (context) { setTimeout(function(){ //調(diào)用方式跟在.vue中一樣 context.commit('gaiming',"abc") //1秒后調(diào)用mutations中的gaiming方法,名字已經(jīng)修改了 console.log(context.state.name); }, 1000) } }, modules: { // 子狀態(tài)樹 a: model1 } });
我們可以發(fā)現(xiàn)store其實(shí)主要就是依靠這5個(gè)參數(shù)在發(fā)會(huì)作用:
參數(shù)名稱 | 作用 |
---|---|
state | 數(shù)據(jù) |
getters | 相當(dāng)于vuex的計(jì)算屬性,主要用于對(duì)值進(jìn)行計(jì)算處理 |
mutations | 用于修改vuex值的方法 |
actions | 用于異步調(diào)用mutations中的方法 |
modules | 當(dāng)你準(zhǔn)備把狀態(tài)樹分為多個(gè)模塊的時(shí)候,modules用于儲(chǔ)存子狀態(tài)樹 |
子狀態(tài)樹的寫法也完全一樣:
const model1 = { state: { name: "longge", age:31 }, getters:{ }, mutations: { }, actions:{ } }; export default model1;
vuex有一個(gè)鮮為人知的輔助方法:mapState
computed:mapState({ ageadd (state) { return state.count + this.localCount } }),
有很多同學(xué)不知道這個(gè)函數(shù)是干啥用的,龍哥用最簡(jiǎn)單的方法來(lái)介紹一下,這里涉及到了computed這個(gè)比較常用的vue屬性,這個(gè)東西就是前面提到的計(jì)算屬性,它主要是在不改變?cè)贾档那闆r下對(duì)值做一些處理。
如果,你一個(gè)一個(gè)通過(guò)
this.$store.state.xx
的當(dāng)時(shí)去調(diào)用store的值放到這個(gè)計(jì)算屬性里面,你不是老得寫這個(gè)this.$store嗎。于是vuex官方就提供了一個(gè)讓你可以省略前面這一段的方法。你可以通過(guò)這個(gè)方式一次獲得所有store中的state中的數(shù)據(jù),然后傳入state直接用就行了。
這里面還有一個(gè)混入寫法...mapState。各位觀眾老爺請(qǐng)到龍哥vuex詳細(xì)教程中找一下,這里就不過(guò)多介紹了。
依然使用npm進(jìn)行安裝,當(dāng)然如果你有cnpm就更好了:
cnpm install element-ui -s-d
element作為你必須掌握的ui庫(kù),它和iview的區(qū)別再于用戶量更大,研發(fā)團(tuán)隊(duì)人員更多,發(fā)現(xiàn)錯(cuò)誤的機(jī)率更高,在組件支持項(xiàng)中也超過(guò)iview。更屌的是element還支持Sketch和Axure,讓產(chǎn)品經(jīng)理和設(shè)計(jì)師也能從容參與到開發(fā)中來(lái)。所以element成為了本文首選。
引入element ui的方式也非常簡(jiǎn)單,通過(guò)npm安裝后,打開main.js
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
調(diào)用的時(shí)候也非常簡(jiǎn)單:
<el-menu default-active="1" class="el-menu-vertical-demo"> <el-submenu index="1"> <template slot="title"> <img src=""> <span></span> </template> <el-menu-item-group> <template slot="title"></template> <el-menu-item index="1-1"></el-menu-item> <el-menu-item index="1-2"></el-menu-item> <el-menu-item index="1-3"></el-menu-item> </el-menu-item-group> </el-submenu> </el-menu>
直接把這種el開頭的標(biāo)簽插入到你的.vue文件中即可。
element支持的組件非常多,你可以查看這里,里面的組件代碼已經(jīng)寫的非常清楚了,直接復(fù)制粘貼到你的.vue中即可。
你可能會(huì)問(wèn)了,輪播圖組件多了去了,為什么就介紹swiper呢?因?yàn)辇埜邕^(guò)去在制作非spa頁(yè)面的時(shí)候,對(duì)swiper可以說(shuō)是情有獨(dú)鐘,無(wú)論是兼容性還是在移動(dòng)/非移動(dòng)端,swiper的表現(xiàn)都可圈可點(diǎn)。官方提供完整的api手冊(cè),讓擴(kuò)展修改也非常得心應(yīng)手。
使用cnpm安裝
cnpm install swiper -S -d
安裝完畢以后,我們需要把swiper封裝成一個(gè)組件。這個(gè)是非常簡(jiǎn)單的,新建一個(gè)swiper.vue即可。
<template> <p> <p class="swiper-container"> <p class="swiper-wrapper"> <p class="swiper-slide">Slide 1</p> <p class="swiper-slide">Slide 2</p> <p class="swiper-slide">Slide 3</p> </p> </p> </p> </template> <script> import Swiper from "swiper"; export default{ name:"swiper", mounted(){ var mySwiper = new Swiper ('.swiper-container', { }) } } </script> <style> @import 'swiper/css/swiper.css'; .swiper-container { width: 600px; height: 300px; } </style>
因?yàn)槭蔷植康?,我們甚至都不需要再main中去引入它。用的時(shí)候直接定義到components上即可。
components: { swiper },
然后把標(biāo)簽寫到你的項(xiàng)目中:
<swiper></swiper>
vue-echarts是echarts的一個(gè)封裝,它和百度echarts的區(qū)別在于,它是基于vue的一個(gè)對(duì)象..操作上更加的簡(jiǎn)單,如果你僅僅是為了展示圖表,建議你使用vue-echarts。但是如果你的項(xiàng)目中含有對(duì)echarts的深度定制,例如改變了原始圖表的展示方式或者點(diǎn)擊事件和較為復(fù)雜的邏輯,還是建議你使用百度echarts。
安裝方式跟其他vue組件一樣:
npm install echarts vue-echarts
然后打開main.js輸入
import ECharts from 'vue-echarts'; import 'echarts/lib/chart/line'; Vue.component('chart', ECharts);
這樣vue-echarts就變成了一個(gè)全局組件,我們直接在頁(yè)面中調(diào)用即可。
<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
另外在data中添加一個(gè)配置文件的變量,再mounted生命周期中注入內(nèi)容即可。
export default { name: 'index', data() { return { orgOptions: {}, } }, mounted: function() { //echarts this.orgOptions = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', smooth: true }] } }, }
其中具體圖表設(shè)置請(qǐng)查看這里。
你可以下載其中的例子然后打開http://localhost:8080/demo查看。
vue-video-player是一個(gè)視頻播放解決方案,功能非常全。
使用cnpm命令安裝,可以加快安裝速度。
cnpm install vue-video-player -S -d
然后老規(guī)矩打開main.js填入以下內(nèi)容:
import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css') Vue.use(VideoPlayer)
然后在我們要使用的頁(yè)面上:
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player>
最后增加一個(gè)配置變量:
playerOptions : { playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 autoplay: false, //如果true,瀏覽器準(zhǔn)備好時(shí)開始回放。 muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻。 loop: false, // 導(dǎo)致視頻一結(jié)束就重新開始。 preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)。auto瀏覽器選擇最佳行為,立即開始加載視頻(如果瀏覽器支持) language: 'zh-CN', aspectRatio: '16:9', // 將播放器置于流暢模式,并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號(hào)分隔的兩個(gè)數(shù)字(例如"16:9"或"4:3") fluid: true, // 當(dāng)true時(shí),Video.js player將擁有流體大小。換句話說(shuō),它將按比例縮放以適應(yīng)其容器。 sources: [{ type: "",//這里的種類支持很多種:基本視頻格式、直播、流媒體等,具體可以參看git網(wǎng)址項(xiàng)目 src: "" //url地址 }], poster: "../../static/images/test.jpg", //你的封面地址 // width: document.documentElement.clientWidth, //播放器寬度 notSupportedMessage: '此視頻暫無(wú)法播放,請(qǐng)稍后再試', //允許覆蓋Video.js無(wú)法播放媒體源時(shí)顯示的默認(rèn)信息。 controlBar: { timepider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true //全屏按鈕 } }
每次要切換視頻的時(shí)候,修改src即可。
有的時(shí)候,我們會(huì)遇到一個(gè)需求,就是把小圖放大或者多個(gè)圖片方大后輪播的情況,這個(gè)時(shí)候用element ui中自帶的組件已經(jīng)沒辦法滿足我們的使用了。這里推薦一個(gè)相冊(cè)插件:vue-photo-preview。
安裝:
cnpm install vue-photo-preview -S -d
添加main.js中
//加載圖片查看工具 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' var options={ fullscreenEl:false //關(guān)閉全屏按鈕 } Vue.use(preview,options)
使用方法非常簡(jiǎn)單,只要再img中添加兩個(gè)屬性即可。
//在img標(biāo)簽添加preview屬性 preview值相同即表示為同一組 <img src="xxx.jpg" preview="0" preview-text="描述文字"> //分組 <img src="xxx.jpg" preview="1" preview-text="描述文字"><img src="xxx.jpg" preview="1" preview-text="描述文字"><img src="xxx.jpg" preview="2" preview-text="描述文字"><img src="xxx.jpg" preview="2" preview-text="描述文字">
前端進(jìn)行she256,md5和base64非常的簡(jiǎn)單,只需要下載一套算法即可:
cnpm install js-md5 -S -d cnpm install js-sha256 -S -d cnpm install js-base64 -S -d
然后把下載好的算法全部定義到vue到prototype上:
//3種加密方式 import md5 from 'js-md5'; Vue.prototype.$md5 = md5; import sha256 from 'js-sha256'; Vue.prototype.$sha256 = sha256; import base64 from 'js-base64'; Vue.prototype.$base64 = base64;
使用方法:
console.log("md5加密方式:"+this.$md5('holle')); console.log("sha256加密方式:"+this.$sha256('holle')); console.log("base加密方式:"+this.$sha256('holle'));
大部分時(shí)候,我們可能需要根據(jù)設(shè)計(jì)圖做一個(gè)靜態(tài)頁(yè)面,因?yàn)槲覀儾恢篮枚嗟胤教钌蠑?shù)據(jù)以后是什么樣子的。這個(gè)時(shí)候我們肯定不能等著后端開發(fā)人員的接口開發(fā)完了再去填數(shù)據(jù),這樣效率太低了。
這里推薦使用mockjs。mock是一個(gè)可以攔截http請(qǐng)求生成一個(gè)微數(shù)據(jù)短的插件,讓我們不用等著后端人員就可以自己先填入一部分?jǐn)?shù)據(jù)。
使用cnpm命令安裝,可以加快安裝速度。
cnpm install mockjs --save-dev
使用上是非常方便的,因?yàn)閙ock會(huì)自動(dòng)攔截http請(qǐng)求。
首先,我們?cè)賡rc中創(chuàng)建一個(gè)mock文件夾,并且再里面創(chuàng)建index.js:
//引入mockjs const Mock = require('mockjs') //響應(yīng)模擬數(shù)據(jù) Mock.mock('http://api.com', { "user|5-100": [{ 'name': '@cname', //中文名稱 'age|1-100': 100, //100以內(nèi)隨機(jī)整數(shù) 'birthday': '@date("yyyy-MM-dd")', //日期 'city': '@city(true)' //中國(guó)城市 }] });
你可以理解這個(gè)mock就是你的數(shù)據(jù)端,這里面配置的url,就是你獲取虛擬數(shù)據(jù)要使用到的url。
然后打開main.js把這個(gè)js給引用上。
require('./mock/index')
最后我們?cè)俳M件中請(qǐng)求這個(gè)地址即可獲得數(shù)據(jù):
//mock this.axios({ method: 'get', url: 'http://api.com' }).then(function(response) { console.log(response); })
spa有一個(gè)非常大的問(wèn)題就是,它實(shí)際上沒有那么多頁(yè)面,我們所有的頁(yè)面邏輯關(guān)系都是通過(guò)route完成的。
可是,這樣就誕生了一個(gè)問(wèn)題,頁(yè)面的title部分并沒有切換掉。我們就需要?jiǎng)討B(tài)的去處理這個(gè)titile了。這里推薦使用vue-meta-info來(lái)解決這個(gè)問(wèn)題,說(shuō)實(shí)話,我曾經(jīng)一度認(rèn)為這個(gè)東西是一個(gè)核心組件。因?yàn)槟愕膖itle不切換的話,總感覺好像少點(diǎn)什么一樣。
安裝:
cnpm i vue-meta-info -S -d
main.js中
import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)
使用方法
metaInfo: { title: '生活隨記—黨云龍個(gè)人博客', meta: [{ name: '黨云龍個(gè)人博客', content: '黨云龍,web前端開發(fā),vue,vuecli,webpack,canvas,html5,css3' }] }
vue-lazyload的作用就是:當(dāng)你滾動(dòng)條還沒有滾動(dòng)到這一片區(qū)域的時(shí)候,就不加載一片區(qū)域中的圖片,會(huì)用loading中的gif圖去代替。
使用npm安裝方式:
npm install vue-lazyload --save
然后在main.js中加入
//圖片懶加載 ---------------------------------------- import VueLazyload from 'vue-lazyload'; //初始化 Vue.use(VueLazyload, { preLoad: 1.3, //loading: ‘../static/loading.gif', loading: require('./assets/loading.gif'), attempt: 1 })
注意,loading的圖片在static和assets中路徑的寫法稍微有點(diǎn)區(qū)別。
在圖片上傳的時(shí)候,我們肯定不能直接把一張大圖給傳上去,這里我們需要限制一下大小。然后,可能更好的方法就是,進(jìn)行壓縮。
這里推薦使用lrz插件。
安裝:
cnpm install lrz -S -d
然后再main中加載lrz:
import lrz from 'lrz'
使用的時(shí)候:
<template> <p> <p @click.stop="addPic" ref="upload" class="btn"> <input type="file" accept="image/*" @change="onFileChange" style="display: none" multiple />chooseImg </p> <p v-if="!isNaN(before)">壓縮前:{{before|number}}kb</p> <p v-if="!isNaN(after)">壓縮后:{{after|number}}kb</p> </p> </template>
import lrz from "lrz"; export default { data() { return { imgUrl: [], before: NaN, after: NaN }; }, methods: { onFileChange(e) { // 獲取文件對(duì)象 var file = e.target.files[0]; // 壓縮前文件大小 this.before = file.size / 1024; this.imgUrl = URL.createObjectURL(file, { quality: 0 }); lrz(this.imgUrl).then(rst => { // 壓縮后文件大小 this.after = rst.fileLen / 1024; }); } } }
到此,關(guān)于“vue常用的組件有哪些”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
分享名稱:vue常用的組件有哪些
文章源于:http://aaarwkj.com/article38/pjcopp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、微信公眾號(hào)、移動(dòng)網(wǎng)站建設(shè)、外貿(mào)建站、靜態(tài)網(wǎng)站、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)