首先須要知道最基本的東西是：vue
Vue 項目打包：npm run buildios
Vue生成在網頁上看的端口：npm run devnpm
修改端口號的地方在： config文件夾下index.js文件portaxios
改變首頁面在main.js數組
const routes = [{ide
path: '/',函數
component: gnlbpost
}ui
大概在100行this
編輯代碼時的一些經驗和坑
Vue相關經驗
1. 引入本身編寫的標籤須要在當前頁面import標籤名from文件路徑,注入進來以後再下面的
components裏面寫入標籤名 而後在template裏面直接使用
例: import table_top from '../components/table-top'
components: {table_top }, 注意components:{},methods:{} 之間要用逗號隔開
2. 定義變量須要在data () {return { }}裏面定義,定義完一個變量後面要加逗號
例: data () {return {c1: '', c2:'' }}
3. created: function(){ }裏面書寫的是軟件加載完成以前執行的函數
4. mounted: function(){}裏面書寫的是軟件加載完成以後執行的函數
5. methods: {}裏面書寫正常函數 書寫方法:函數名:function(){}, 定義完一個函數後面要加逗號
6. 調用函數或者定義的變量時須要用 this.函數名 或 this.變量名
例: this.get_data(); 或 this.c1
7.axios.post( 接口地址 , 要傳輸的數據) 成功 .then(response => {} 失敗 .catch(function(response) {})
例: axios.post('接口地址', qs.stringify(data))
.then(response => {
//成功回來後作的事情
})
.catch(function(response) {
//失敗回來後作的事情
});
8. 子級模塊操做函數傳給父級模塊,使父級模塊來操做
例: 父級 <revise @on-hide="onHide"></revise>
子級 <button class="btn" v-on:click="$emit('on-hide')">肯定</button>
9.for循環數組直接出id
v-for="(循環出的內容,循環出的ID) in要循環的數組"
例 : v-for="(obj,index) in list"
v-for循環獲得key值
<button v-for=」(gx_item,index) in list」>{{gx_item}}_{{index}}</button>
gx_item是循環list得出來的數據 index就是索引 從零開始
10.watch裏面想監聽一個對象的屬性是 this不能用
解決辦法:在data裏面return上面給this從新賦值 如 : xthis=this , 而後再在watch裏面操做
11.組件父級想要點擊或者傳對象：
例：
父級：<button1 :btn="{key:1,value:'錄入',click:'new_dd_btn'}"></button1>
子級：props:{
btn: {
type: Object,
default:0
},
},
methods:{
btn_click(){
this.$emit(this.btn.click);
}
}
<button @click="btn_click" v-if="btn.key==1">{{btn.value}}</button>
12.父級調用子組件寫內容傳送：
<pan-thumb style="float: left" :image="avatar"> 你的權限:
<span class="pan-info-roles" :key='item' v-for="item in roles">{{item}}</span>
</pan-thumb>
在pan-thumb組件裏面布好外面以後直接在中間加<slot></slot>這樣父組件之間的字和span標籤都會引入進來
13.父組件調用子組件函數：
父組件：<found ref='editUser'></found >
<div @click="add()">+</div>
methods: {
add(){
this.$refs.editUser.query()
},
}
子組件：methods: {
query (){
console.info(‘111’)
},
}
14.阻止事件冒泡：event.cancelBubble = true; 或者： @click.stope=」aa()」
15.input輸入完按enter觸發按鈕：
<input @keyup.enter=」aaa()」></input>
<button @click=」aaa()」>查詢</button>
Vuex相關經驗
1.Vuex就是提供一個倉庫，倉庫裏面放了不少對象。其中state就是數據源存放地，對應於與通常vue對象裏面的data
例: state: {
Datas: [],
All_datas: {}
},
調用: mutations: {
setTexts (state, x) {
state.Datas[‘list’]=111
},
},
2.mutations: {}裏面書寫的函數是不容許阻塞的 須要很順暢的執行完畢 , 函數和函數之間用逗號隔開 調用這裏面的函數:context.commit('函數名',參數)
例: mutations: {
setTexts(state, x) {
state.list = x
},
IncBaoNo(state) {
state.All_settings['bao_NO']++;
state.cur_sminfo=[];
}
調用: context.commit(setTexts, x)
3.actions:{}裏面能夠寫任意函數,調用這裏面的函數:this.$store.dispatch(函數名,參數);
例: setcomstate(context, x) {
函數內容
}
調用: this.$store.dispatch(setcomstate, {val: x_val});
4.getter就是把組件中共有的對state 的操做進行了提取，它就至關於 對state 的computed. 因此它會得到state 做爲第一個參數。
例如: getters: {
smdatas: state => {
return state.Datas.slice(0, 20)
}
}
調用: smdatas: (state,getter) => getter. Smdatas
5.state裏面的屬性 再次操做賦值的時候監聽不到 不能夠操做
解決辦法: 將對象升維 變成頂層的對象
6.在組件裏面修改state的值
this.$store.state.csmx.isAllActive=1
Element 插件經驗
1.點擊跟隨彈一個小窗 點擊事件必須在el以後
<div>
<el-popover
ref="popover"
placement="bottom"
width="144"
trigger="click">
<div style="text-align: center;cursor:pointer;">
<span @click="set_btn()"><el-row>aaa</el-row></span>
<div class="kong_solid"></div>
<el-row>bbb</el-row>
<div class="kong_solid"></div>
<el-row>ccc</el-row>
</div>
</el-popover>
<img v-popover:popover style="width:30px;" src="../assets/setting.png">
</div>
2. <el-col></el-col>不能使用v-for不然會出現警告 解決辦法 外層加一個div循環div
之後若是還碰見問題了 還會繼續更新。。。