sync不生效 vue_Vue实战项目-记账器-重要知识点汇总

历时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
245b2c768ba7dd335d352d8aefa0e9be.png

六、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也是模块化

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/533111.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开设计算机课程的必要性,学前教育专业开设计算机音乐制作课程的必要性与可行性...

学前教育专业开设计算机音乐制作课程的必要性与可行性李 萍430061【期刊名称】课程教育研究【年(卷),期】2012(000)020【总页数】1一、学前教育专业开设音乐相关课程的现状二、现代教育的新型特点&#xff0c;计算机音乐及制作的发展概况三、计算机音乐制作在学前教育专业开设的…

fifo页面置换算法设计思路_千万级并发!如何设计一个多级缓存系统?

什么是一个多级缓存系统?它有什么用?我们又如何设计一个多级缓存系统?图片来自 Pexels所谓多级缓存系统&#xff0c;就是指在一个系统的不同的架构层级进行数据缓存&#xff0c;以提升访问效率。我们都知道&#xff0c;一个缓存系统&#xff0c;它面临着许多问题&#xff0c…

广东省计算机学校哪所最好,广东省哪个技校比较好哪里好

湖北省有少数大中专院校在教育事业中&#xff0c;无论是投入还是创办教育学院&#xff0c;都比较好&#xff0c;的话就是至少能赚到三成。至于那些综合性、公益性大的院校&#xff0c;可能要好几千块钱不是问题&#xff0c;毕竟我们是艺术类的&#xff0c;所以毕竟整体上看&…

apple quicktime怎么在ppt中用_PPT情感专题大赏No. 007:一份这就是街舞第三季主题PPT(上集)...

Hello&#xff0c;大家好&#xff0c;这里是千师傅小作坊第35期&#xff0c;我是你们的老朋友千千。熟悉千师傅小作坊的人都知道&#xff0c;千师傅特别喜欢看综艺&#xff0c;尤其是音乐、表演、舞蹈类。作为一个十八线PPT设计师&#xff0c;如果我看到好看的节目视觉设计&…

计算机语言低下限高上限,学习语言有没有上限

学习语言有没有上限科学家普遍认为&#xff0c;语言是人类特有的认知天赋的一部分&#xff0c;所以长期以来&#xff0c;科学家一直在研究疾病和创伤如何削弱语言能力。但是&#xff0c;直到现在&#xff0c;科学家仍不清楚一个人最多能掌握多少种语言。在经过长期沉默后&#…

idea内存溢出解决_各种OOM代码样例及解决方法

针对目前大家对OOM的类型不太熟悉&#xff0c;那么来总结一下各种OOM出现的情况以及解决方法。把各种OOM的情况列出来&#xff0c;然后逐一进行代码编写复现和提供解决方法。1. 堆溢出-java.lang.OutOfMemoryError: Java heap space。2. 栈溢出-java.lang.OutOfMemorryError。3…

win7安装硬盘后无法启动计算机,硬盘装Win7系统电脑后开机提示DISK BOOT FAILURE怎么办【图文】...

很多人都喜欢安装win7系统&#xff0c;而硬盘安装系统的方式也是深受用户们的喜欢&#xff0c;但是最近有用户反映说硬盘安装win7系统之后&#xff0c;在重启计算机的时候屏幕提示DISK BOOT FAILURE,INSERT SYSTEM DISK AND PRESS ENTER&#xff0c;导致无法正常进入系统&#…

导入数据中文乱码_基于Navicat和Kettle的数据迁移完全解读(多图)

需求描述对于数据分析人员来说&#xff0c;工作的基础是数据&#xff0c;没有数据分析就无从谈起&#xff0c;即巧妇难为无米之炊。#数据库# #数据迁移# #Oracle# 然而&#xff0c;数据分析往往在实验环境或者准生产环境中开展&#xff0c;而数据分布在生产环境&#xff0c;因此…

怎样能确保计算机安全,如何确保电脑安全

如何确保电脑安全电脑安全问题层出不穷&#xff0c;如何确保电脑安全呢?下面是小编分享的一些方法&#xff0c;一起来看一下吧。一、关闭默认共享大部分的电脑系统在默认的情况下都是自动开启网络共享设置的&#xff0c;Win7系统也不例外&#xff0c;该功能主要是为了用户能够…

点云平面提取_基于LiDAR点云数据滤波方法

基于LiDAR点云数据滤波方法机载激光雷达所获取的数据被称为“点云(points cloud)”它在三维空间中呈现出随机分布的形状。在点云中&#xff0c;有些点属于真实的地形表面的点&#xff0c;有些点属于人工建筑物塔、输电线、桥等或自然植被如树、灌木、草、其他植物。激光雷达数据…

全国计算机一级书红色封面,年度最强的网红录取通知书,竟然附赠了一张黑胶唱片...

这两天世超被一张来自中国科学院大学的录取通知书给刷屏了&#xff0c;这份录取通知书里还附赠了一张黑胶光盘。光盘上刻录了一份国科大为新生准备的特别的礼物 —— 一段来自宇宙深处的声音。它们是由国科大师生通过 500 米口径球面射电望远镜( FAST )捕获的 15 颗脉冲星信号&…

动态新增表字段_制作动态的数据透视表(一):定义名称法创建数据透视表

——施瓦辛格&#xff1a;没有跌倒过的人不会成功。我们的日常工作中&#xff0c;会经常遇到一种情况&#xff1a;创建好数据透视表后&#xff0c;有其他被遗漏的数据内容需要重新插入到数据源后&#xff0c;有其他被遗漏的数据内容需要重新插入到数据源中&#xff1b;或者是需…

计算机中除法的函数英文,EXECL中哪一个英文是算除法的?-excle 除法的英文

Excel中除法的函数是哪个?Excel中除有具体的函数&#xff0c;需要使用操作方法才行下&#xff1a;1、创个Excel工作表&#xff0c;填入数值一、数两列&#xff0c;开始进行第三列的除法数值计算。2、将鼠标放到想要求除法数值结果的格内&#xff0c;在Excel工作表上部找到fx选…

计算机公式or,【转载】 odds、OR和RR的计算公式和实际意义

1. OddsOdds 的意思为机率、可能性&#xff0c;是指某事件发生的可能性(概率)与不发生的可能性(概率)之比。假如某药物有疗效的比例为p1&#xff0c;则无效的比为1-p1&#xff0c;则odds的计算公式为&#xff1a;对于如下表所示的四格表&#xff0c;患病组的中暴露的概率(以实测…

mysql日期格式化季度_mysql 按年度、季度、月度、周、日SQL统计查询

一、年度查询查询 本年度的数据SELECT *FROM blog_articleWHERE year( FROM_UNIXTIME( BlogCreateTime ) ) year( curdate( ))二、查询季度数据查询数据附带季度数SELECT ArticleId, quarter( FROM_UNIXTIME( BlogCreateTime ) )FROM blog_article其他的同前面部分&#xff1a…

js 创建keyframe_javascript – 查找特定的CSS @keyframes规则

我想用JavaScript调整CSS中的特定keyframes-rule.这一切都适用于以下代码&#xff1a;CSS&#xff1a;-webkit-keyframes changecolor {0% { color: red; }100% { color: green; }}keyframes changecolor {0% { color: red; }100% { color: green; }}JavaScript的&#xff1a;f…

计算机发展史评课议课稿,评课议课记录范文

2、由分母是1的真分数直接到结论后&#xff0c;把预设时推广到一般规律的环节掉了&#xff0c;致使本节课在思维上不太严密。学生的思维更没有真正地融于规律的理解中去。其实太多的意外&#xff0c;其原因根源在于自己想关注课堂的生成却无机智的应变能力&#xff0c;在学生直…

系统相机裁剪比例_拍照时图片比例怎么选?比构图还要提前一步的摄影攻略要做好...

谈到摄影第一步&#xff0c;很多人都在说构图&#xff0c;但是比构图还要提前一步的&#xff0c;是选择合适的拍摄比例。在拍照时&#xff0c;始终是把要拍的东西装进设备的取景器里面&#xff0c;所以取景器的比例是16:9&#xff0c;还是4:3或者其他&#xff0c;就直接影响了我…

计算机常用主题词,标引主题词的目的是( )。A.反映文件的全部内容B.便于计算机检索和管理C.供归_考题宝...

阅读短文&#xff0c;回答下列各题&#xff1a; Mr&#xff0e;Black was young and able&#xff0e;The boss liked him&#xff0e;Last month he was sent toChina on business&#xff0e;Before hewent back from China&#xff0c;he decided to buy something for Tony…

源码安装mysql_CentOS 7中源码安装MySQL 5.7.16 (亲测成功)

最近在CentOS 7中源码安装MySQL 5.7.16&#xff0c;发现MySQL5.7.6以后的安装方式真的与以前版本的MySQL安装方式大大的不同呀。不自己安装一把&#xff0c;下面这篇文章是通过自己的安装过程总结的一篇安装教程&#xff0c;有需要的朋友们可以参考借鉴&#xff0c;下面来一起看…