歷時3周，記賬器項目終于可以運行了，這次項目是基于Vue開發，用到了typeScript和Scss,下面基于項目做一個階段性的總結，回顧一下項目中用到的知識點。
一.組件
一開始用的是JS對象的寫法：
構造選項：
{
data(){return {}
},
methods: {}
}這次項目用的是類組件和裝飾器（可以用js寫也可以用ts寫）
import Vue from 'vue';import {Component, Prop} from 'vue-property-decorator';@Componentexport default class Tags extends Vue {}二、computed
computed的用處非常多：比如獲取Vuex的數據、獲取計算出來的列表
優點：自動根據所需依賴緩存，減少計算
深入了解computed和watch的區別：
good V：Vue-computed和watch的區別?zhuanlan.zhihu.comts中computed用法：
@Component({components: {Types, Tags, NumberPad, FormItem},computed: {recordList() {return this.$store.state.recordList;},tagList() {return this.$store.state.tagList;}}})
三、watch
裝飾器寫法：
@Watch('tags', {immediate: true})onTagChange(tags) {this.outputTags = tags.filter((item) => item.type === '-');this.inputTags = tags.filter((item) => item.type === '+');}
四、Prop、.sync、v-model
Prop傳值：
//父組件likes="10"//子組件
props: {likes: Number,
}子組件收到后，改變值：
//子組件
<button v-on:click="$emit('changeLikes', 5)">按鈕
</button>//父組件
v-on:changeLikes="likes += $event".sync、v-model都是語法糖
good V：深入了解Vue的修飾符.sync【 vue sync修飾符示例】?zhuanlan.zhihu.com五、插槽slot
項目中的Layout組件就是用的插槽
//Layout.vue 組件
<template><div ><slot></slot></div>
</template>//其他組件引用Layout組件
<template><Layout>我是插槽里面的內容，會替換Layout中的slot</Layout>
</template>具名插槽：
插槽 — Vue.js?cn.vuejs.org
六、svg symbols
svg圖標引入：
1、從Iconfont-阿里巴巴矢量圖標庫中找到需要的圖標，下載為svg模式，存到assets>icon里面
2、在vue.config.js中能夠配置loader：
const path = require('path')module.exports = {publicPath: process.env.NODE_ENV === 'production'? '/mango-bill': '/',lintOnSave: false,chainWebpack: config => {const dir = path.resolve(__dirname, 'src/assets/icons') // 當前目錄config.module.rule('svg-sprite').test(/.svg$/).include.add(dir).end() // 只包含icons目錄.use('svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end() //不需要解析成文件// .use('svgo-loader').loader('svgo-loader')// .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])config.module.rule('svg').exclude.add(dir) // 其他svg loader排除icons目錄}
}3、創建Icon組件
<template><svg class="icon" @click="$emit('click', $event)"><use :xlink:href="'#' + name"></use></svg></template><script lang="ts">const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);try {importAll(require.context('../assets/icons', true, /.svg$/));} catch (error) {console.log(error);}export default {name: 'Icon',props: ['name']};
</script><style scoped lang="scss">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>4、在main.ts中掛載為全局組件
import Icon from '@/components/Icon.vue';Vue.component('Icon', Icon);5、組件中使用
只要寫上svg的名稱就可以使用了
<Icon name="money"></Icon>七、Window.localStorage（一般只能存5~10M）
//存
localStorage.setItem('myCat', 'Tom');//取
let cat = localStorage.getItem('myCat');序列化：即js中的Object轉化為字符串
var str=JSON.stringify(obj); //將JSON對象轉化為JSON字符反序列化：即js中JSON字符串轉化為Object
var obj = JSON.parse(data); //由JSON字符串轉換為JSON對象
八、表驅動編程
例如項目中用到的：":class={key:value,key:value}"
<div :class="{selected: IsSeletedTag(item) >= 0,red:toggle === '-'}"
</div>九、模塊化思想
項目中用到的store就是典型的模塊化，Vuex也是模塊化
。A.反映文件的全部內容B.便于計算機檢索和管理C.供歸_考題寶...)
