最近幾個月一直在搞公司的網(wǎng)站走芋，最近一周把公司項目的做了移動端適配。露露臉叉寂。
2DE8C0A3-1080-4AA0-B1B7-33A082E70D37.png
54A1B744-3818-4E8F-8039-DFC08B53BC5E.png
4333D89F-A727-4341-8975-4D3BE4018E2F.png
覺得滿滿的成就感萍启。
廢話不多說了，開始正題屏鳍。
vue我說下我的理解勘纯，就是一個在一個html中進行組件化開發(fā)。有點mvvm的意思.
項目開始你要先找main.js文件钓瞭，引入要用的插件驳遵。
import Vue from 'vue';
import iView from 'iview';//iview
import VueRouter from 'vue-router';//路由
import Vuex from 'vuex';
然后當然要引用
Vue.use(VueRouter);
Vue.use(Vuex);
如果你想要封工具類，并且引用
import * as tools from './libs/tools'//引入所有的export
Vue.prototype.$tools = tools
用法 this.$tools.method()
配置路由
import Routers from './router'; //在我們項目中是把路由單獨封了一個js出來
const RouterConfig = {
mode: 'history',
routes: Routers
};
const router = new VueRouter(RouterConfig);
new Vue({
el: '#app',
router: router,//路由
store: store, //vuex
render: h => h(App)
});
看一下我們router.js中的一些用法
import Main from './views/Main/Main.vue';
const routers = [
{
path: '/',
meta: {
title: ''
},
component: (resolve) => require(['./views/index.vue'], resolve)
},
{
path: '/gotopage',
meta: {
title: ''
},
component: (resolve) => require(['./components/GotoPage.vue'], resolve)
},
{//Main
path: '/',
name: 'Main',
title: '',
component: Main,
children: [
{/** 搜索結(jié)果 */
// path: '/result/:address',
path: '/result',
name: 'result',
meta: {
title: ''
},
component: (resolve) => require(['./views/Result/Result.vue'], resolve),
}
]
}
]
export default routers;
這里面包含在了 一般路由的配置和子路由的配置山涡。
寫到這發(fā)現(xiàn)講的有點亂堤结，好久沒搞博客了，最近打算拾起來佳鳖，慢慢來吧霍殴。
既然說到路由了，我就說下路由的傳參和跳轉(zhuǎn)系吩。
this.$router.replace({path:path,query:{key:value}}) //這種是跳轉(zhuǎn)保存之前的鏈接
this.$router.replace({path:path,query:{key:value}}) //這種是直接調(diào)換當前的鏈接
路由傳參分為兩種
一種是query傳參一種是params傳參
兩者的區(qū)別呢
this.$router.replace({path:path,query:{key:value}}) query傳參
this.$router.replace({name:name,params:{key:value}}) params傳參
query要用path來引入，params要用name來引入妒蔚，接收參數(shù)都是類似的穿挨，分別是this.$route.query.key和this.$route.params.key。
特別注意的是這里是this.$route而不是路由跳轉(zhuǎn)的this.$router
那么在路由路徑展示上是下面這個樣子的肴盏。
query locahost:8081/#/login?name=fly&code=2
params locahost:8081/#/login
看出差別了嗎科盛？一個是隱式傳參一個是顯示傳參
說了這么多，居然還沒有說vue的生命周期菜皂，請原諒我先盜兩張圖吧
export default {
beforeCreate () {
console.group('beforeCreate 創(chuàng)建前狀態(tài)===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created () {
console.group('created 創(chuàng)建完畢狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount () {
console.group('beforeMount 掛載前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted () {
console.group('mounted 掛載結(jié)束狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate () {
console.group('beforeUpdate 更新前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated () {
console.group('updated 更新完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy () {
console.group('beforeDestroy 銷毀前狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed () {
console.group('destroyed 銷毀完成狀態(tài)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
}
其實用過之后發(fā)現(xiàn)也就是這樣贞绵，跟ios的生命周期差不多。嘿嘿恍飘。
有個小坑得說下榨崩。
在created方法中是無法獲取dom元素的谴垫。比如document.getElementid('id').啥啥就無法獲取到。
如果要用的話需要到mounted方法中來用母蛛。
原因嘛在這里翩剪。
created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值彩郊，然后再渲染成視圖前弯。
mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后秫逝，再對html的dom節(jié)點進行一些需要的操作
好的恕出，下面開始講下一些常用的方法。
v-show v-if 區(qū)別
v-show 會在app初始化的時候編譯并且渲染违帆，并且在之后一直存在剃根。當切換v-show模塊時，只是簡單的更改css前方。
v-if 當切換v-if模塊時狈醉，Vue.js 有一個局部編譯/卸載過程，因為 v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件惠险。v-if 是真實的條件渲染苗傅，因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。 v-if 是惰性的班巩，如果為false渣慕，則什么也不編譯，不渲染抱慌。 當?shù)谝淮螚l件為真時逊桦，才開始編譯。
當你用的時候你其實可以看下v-if的模塊抑进，如果v-if='false'你發(fā)現(xiàn)找不到他强经，因為他根本就沒有創(chuàng)建.而v-show則可以看到，display:none;
:class
:class="{listpadRight:true,'ShowShaow':isShowShaow}
記住就行啦寺渗，第一個不要加引號匿情，后面的加引號就可以啦。
v-model
用來數(shù)據(jù)綁定的信殊，適用于 input
比如 <Input v-model="passWord" placeholder="輸入驗證碼"></Input>
data(){
return{
passWord:''
}
}
因為vue是組件式開發(fā)炬称，所以每一個vue可以當做一個組件，那么就會引出一塊的東西來涡拘，比如組件怎么用玲躯，父組件怎么調(diào)用子組件方法，子組件怎么調(diào)用父組件方法，傳值啦跷车，等等棘利。
先說下用法
import tokenquote from './TokenQuote' 引入組件
components:{
tokenquote, //引入到當前vue文件的組件中
},
<tokenquote ></tokenquote> 用法其實跟普通的html標簽一樣的。
繼續(xù)往下看哦姓赤，下面是組件之間的傳值方法互吊赡译。
首先是父組件調(diào)用子組件
<tokentranscnt ref="sub"></tokentranscnt> ref來標記子組件
this.$refs.sub.subinit(this.token_address) 可以用從refs中取出sub來調(diào)用自己的組件內(nèi)的方法,subinit方法是tokentranscnt組件內(nèi)的方法，寫在method里面就可以不铆。簡單吧
敲黑板啦蝌焚，下面是子組件調(diào)用父組件的方法
我直接舉例子吧。
<subView v-on:getNodes="getNodes" v-on:ShowIntruduce="ShowIntruduce"></subView > 這是子組件在父組件中寫的形式誓斥，拿v-on綁定父組件中的方法只洒。比如getNodes ShowIntruduce 方法，這些都要在父組件的method里面實現(xiàn)劳坑。
上面的getNodes方法記得如果傳值的話后面不要加（）毕谴，加了的話會收不到值。
那么子組件怎么調(diào)用這些方法呢距芬？看下面
在子組件需要調(diào)用的地方涝开，直接觸發(fā)這個方法。
this.$emit('hideNode',data);
hideNode是父組件v-on綁定的方法 data是傳過去的值框仔。
應(yīng)該挺清楚了吧舀武。。
iview是我們開發(fā)所用的開發(fā)框架离斩。
挑重點講：
iview如何修改框架所帶的默認屬性银舱？
很簡單啦！
<div id = 'body'>
<col></col>
</div>
比如這樣
#body > .ivu-tabs .ivu-tabs-content{
margin-top:12px;
}
我們可以在組件的最外層套上一層我們的標簽跛梗。然后從外面往里面一層一層找索要修改的屬性
記住哈寻馏！是在style中修改，而不是在style scope中修改核偿。再style中修改會全局覆蓋所以我們要在最外面套一層標簽诚欠，這樣就不會引起錯誤了。
image.png
這樣的效果怎么實現(xiàn)呢宪祥？注意是在iview的table中實現(xiàn)的哦Ｄ粜健！蝗羊！
直接上代碼，包含checkbox的選擇框仁锯，
{
ellipsis:true,
title:this.$t('Object'),
key:'',
align: 'center',
width:110,
render:(h,params)=>{
return h('div',{
},[
h('Checkbox',{
props:{
indeterminate:params.row.status == '3',
value:params.row.status=='1',
disabled:params.row.status == '4'
},
style:{
width:'16px',
height:'16px',
float:'left',
'margin-left':'0px'
},
on: {
click:()=>{
event.stopPropagation()
},
'on-change': (data) => {
this.isstopPropagation = true;
if(data == true){
this.data= this.changeStatus(this.data,'1',params.index);
}else{
this.data = this.changeStatus(this.data,'2',params.index);
}
this.spinShow = true;
this.$emit('clickTransObject',data,params.row.to);
}
},
}),
h('poptip',{
props:{
trigger:'hover',
placement:'bottom-start',
width:'308',
height:'88',
confirm:false,
},
style:{
'margin-left':'0px',
}
}, [
h('div',[
h('p',{
style:{
width:'100px',
'font-size':'12px',
color:'#333333',
display:'initial'
}
},this.getObject(params.row.alias_name,params.row.to))
]),
h('div',{
slot:'content',
},[
h('p',{
style:{
width:'60px',
'font-size':'12px',
color:'#000000',
display:'inline'
}
},"address:"),
h('Button',{
props:{
// type:'Ghost',
},
attrs:{
// class:'js-copy',
// 'data-clipboard-text':params.row.to,
},
style:{
width:'52px',
height:'20px',
border: '1px solid #343A45',
'font-size':'12px',
'padding':'0px',
'margin-left':'5px',
display:'inline',
'background-color':'#ffffff'
},
on:{
click:()=>{
this.$tools.copyText(params.row.to)
event.stopPropagation()
this.$Message.config({
content: this.$t('CopyS'),
duration: 5,
top:300,
});
this.$Message.success({
content:this.$t('CopyS')
});
}
}
},this.$t('Copy')),
h('p',{
style:{
width:'290px',
'padding-top':'5px',
'font-size':'12px',
color:'#000000',
}
},params.row.to)
])
])
])
}
},
