vue 學習小記

vue 中有 data() 、computed、methods、beforeRouteLeave、created等

具體的: 

　　data():定義一些文件中須要用到的變量,data中帶return，是使數據只在當前組件中可用，不會影響其餘組件，不使用return，會讓數據在全局可見，會形成污染

　　computed():用來監控本身定義的變量，該變量不在data裏面聲明，直接在computed裏面定義,而後就能夠在頁面上進行雙向數據綁定展現出結果或者用做其餘處理，

　　　　　　　　它其實就是定義一些須要經過各類計算處理等獲得的數據，data是定義一些初始化的變量

　　methods：裏面是放上下文中用到的函數的，好比，點擊事件中調用一個函數，這個函數就寫在methods裏面

　　beforeRouteLeave:離開路由以前執行的函數。

　　created:在模板渲染成html前調用，即一般初始化某些屬性值，而後再渲染成視圖。在實例建立完成後被當即調用

關於store：

　　Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

　　每個 Vuex 應用的核心就是 store（倉庫）。「store」基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。Vuex 和單純的全局對象有如下兩點不一樣：

1. Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。

2. 你不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣使得咱們能夠方便地跟蹤每個狀態的變化，從而讓咱們可以實現一些工具幫助咱們更好地瞭解咱們的應用。

　　我的理解:

　　　　　　store主要包括了state、getters、mutations、actions、modules

　　　　　　具體的:                                                                        actions 和mutations都是去改變state中的數據，只是，actions中能夠經過調用後端接口異步操做去該變state中的數據，也能夠再actions中調用mutations，進行該變state中的值  

　　　　state, //相似於定義一些初始化的變量

　　　　getters, //能夠對這些變量(state)進行，派生出一些狀態，例如對列表進行過濾並計數(一些篩選)

　　　　mutations, //能夠對state進行一些更改(用來觸發同步操做的方法。)

　　　　actions //能夠對state進行一些更改，和mutations類似，(能夠進行一些異步操做，能夠提交mutations)

 　　　　modules  uex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割：這個地方主要是引用其餘子store

　　　　

　　mutations和actions 均可以在created中調用，如    this.$store.commit('showFooter'); commit=>mutations,用來觸發同步操做的方法。
　　　　　　　　　　　　　　　　　　　　　　　　this.$store.dispatch('getThirdUnitStudent') dispatch =>actions,用來觸發異步操做的方法。

　　state, 能夠在computed中用， 　　　　　　　如  schoolName(){
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　return this.$store.state.info.schoolName
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　},

　　　

 

<template>
<div id="hasopen">
<div id="has" v-if="students.length">
<ul class="list" id="JS-list">
<li v-for="stu in students">
<div class="list_word" v-if="stu.indexCode">{{stu.indexCode}}</div>
<div class="list_li clearfix" v-else>
<img :src="stu.portrait">
<p>{{stu.user_name}}</p>
<i @click="open(stu.user_id,stu.phone_number)" class="icon-duoxuan"></i>
</div>
</li>
</ul>
<br>
<br>
<br>
</div>
<div id="nohas" v-else>
<p>暫無學生</p>
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default { //data
data() { //定義的變量
return { //不使用函數return包裹的數據會在項目的全局可見，會形成變量污染
stuId: 0, //使用return包裹後數據中變量只在當前組件中生效，不會影響其餘組件。
classId: this.$route.params.classid,
willShow: false,
phone: '',
platform_id: JSON.parse(localStorage.getItem('platform_id'))
}
}, //computed
computed: { //用來監控本身定義的變量，該變量不在data裏面聲明，直接在computed裏面定義，
students() { //而後就能夠在頁面上進行雙向數據綁定展現出結果或者用做其餘處理；
let _classId = this.$route.params.classid; //一個函數就返回一個變量，這些返回的變量是在函數中通過各類計算處理後獲得的結果的
let _class = this.$store.state.Class.thirdUnitList[_classId];
let _filters = [];
let _last = '';
if (_class && _class.list instanceof Array) {
_class.list.forEach(_stu => {
let indexCode = _stu.abb.charAt(0).toUpperCase()
if (indexCode !== _last) {
_last = indexCode;
_filters.push({
indexCode
})
}
_filters.push(_stu);
})
}
return _filters;
}
}, //methods
methods: { //裏面是放上下文中用到的函數的，好比，點擊事件中調用一個函數，這個函數就寫在methods裏面
open(stuId) { //他在文件中開業這樣調用{{ 函數名()}}
// this.willShow = true;
this.stuId = stuId;
},
hideMask() {
this.willShow = false;
},
editStudent() {
this.$router.push('/changestudent/' + this.classId + '/' + this.stuId);
},
},
beforeRouteLeave(to, from, next){ //beforeRouteLeave：離開路由以前執行的函數。
layer.closeAll(); //layer.closeAll: 關閉全部的彈框
next();
},


created(){ //created:在模板渲染成html前調用，即一般初始化某些屬性值，而後再渲染成視圖。
try { //在實例建立完成後被當即調用
MobclickAgent.onPageBegin("classes"); //裏面能夠調用一些方法什麼的
} catch (e) {
console.log(e);
}
// this.students();
this.$store.commit('showFooter'); commit=>mutations,用來觸發同步操做的方法。
this.$store.dispatch('getThirdUnitStudent') dispatch =>actions,用來觸發異步操做的方法。

}, };</script><style rel="stylesheet/scss" lang="scss" scoped> @import "../../../assets/scss/common/mixin";</style>