Vue学习笔记一(2019)
1.Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。
1 const store = new Vuex.Store({ 2 state: { 3 count: 0 4 }, 5 mutations: { 6 increment (state) { 7 state.count++ 8 } 9 } 10 }) 11 12 store.commit('increment') 13 14 console.log(store.state.count)
api:https://vuex.vuejs.org/zh/guide/getters.html
2.
...mapGetters
...是ES6的扩展运算符,表示不定个数。
应用:
1 const [first, ...rest] = [1, 2, 3, 4, 5]; 2 first // 1 3 rest // [2, 3, 4, 5] 4 const [first, ...rest] = []; 5 first // undefined 6 rest // []: 7 const [first, ...rest] = ["foo"]; 8 first // "foo" 9 rest // []
详参
https://hao5743.github.io/2017/02/17/es6%20%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6%20%E4%B8%89%E4%B8%AA%E7%82%B9%EF%BC%88...%EF%BC%89/
mapGetters
辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
1 mapGetters({ 2 // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` 3 doneCount: 'doneTodosCount' 4 })
3.vue的ref属性
<div class="menu" ref="menuBorder">
就可以将class为menu的dom属性集合,即menuBorder挂载到this.refs上,通过this.refs.menuBorder就可以访问了
类似DOM选择器的效果
示例:
js:
export default { data() { return { menuList: [{ name: '一级目录', children: [ { name: '二级目录', children: [ { name: '三级目录', children: ['内容'] }, { name: '二级目录', children: [{ name: '三级目录', children: ['内容'] }] }, { name: '二级目录', children: [{ name: '三级目录', children: ['内容'] }] }, { name: '二级目录', children: [{ name: '三级目录', children: ['内容'] }] }, { name: '二级目录', children: [{ name: '三级目录', children: ['内容'] }] }, { name: '二级目录', children: [{ name: '三级目录', children: ['内容'] }] } ] },{ name: '二级目录', children: [ { name: '三级目录', children: ['内容'] }, { name: '二级目录', children: [{ name: '三级目录', children: ['内容'] }] }, { name: '二级目录', children: [{ name: '三级目录', children: ['内容'] }] }, { name: '二级目录', children: [{ name: '三级目录', children: ['内容'] }] } ] }], }] }; }, methods:{ moveArrow:function (e) { console.log($(e.target).offset().top) let parentTop=this.$refs.menuBorder.offsetTop; var top = $(e.target).offset().top - parentTop; $('.arrow').css('top', top ); } } };
html:
1 <style src="./example.less" lang="less" scoped></style> 2 <template> 3 <div class="menu"> 4 <div> 5 <div class="side-bar"> 6 </div> 7 <ul class="catalog-list" > 8 <li class="level1" v-for="firstLevel in menuList"> 9 <em class="circle-pointer"></em> 10 <a href="#" class="title-link">{{firstLevel.name}}</a> 11 <ul v-if="firstLevel.children.length>0"> 12 <li class="level2" v-for="secondLevel in firstLevel.children"> 13 <em class="pointer"></em> 14 <a href="#" class="title-link">{{secondLevel.name}}</a> 15 16 <ul v-if="secondLevel.children.length>0"> 17 <li class="level3" 18 @click="moveArrow" 19 v-for="thirdLevel in secondLevel.children"> 20 <a :href="'#item_'+thirdLevel.id" class="title-link">{{thirdLevel.name}}</a> 21 </li> 22 </ul> 23 </li> 24 </ul> 25 </li> 26 <li class="last"> <em class="circle-pointer"></em></li> 27 <a class="arrow" href="javascript:void(0);"></a> 28 </ul> 29 30 </div> 31 32 </div> 33 </template> 34 <script src="./example.js"></script>
效果:
4.
FIGHTING