歷時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.com

ts中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也是模塊化

總結

以上是生活随笔為你收集整理的sync不生效 vue_Vue实战项目-记账器-重要知识点汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。