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>