vue3.0 加载json的“另类”方法(非ajax)

问题加载json一定要用ajax的方式吗?最近学习vue3.0,在实现一个功能的时候发现一个问题——写代码的时候,需要的json太长、太多,和代码放在一起太混乱。看代码总有翻来翻去,又没有“折叠”功能。那么能不能把json放在一个单独的文件里面保存,然后在加载进来呢?查了半天的资料,发现那叫一个折腾呀,各种各样的配置不说,最后还需要用ajax的方式来加载。这个,这么简单的事情为啥要这么折腾?你看引用组件是不是很方便?一行代码就搞定了。就像下面这样:import nfInput from '@/components/nf-form-item.vue'等等,组件??思路上面提到了组件

vue3.0的 v-model 为啥不好用了?

vue3.0还支不支持v-model了?vue3.0 的beta版出来后就想尝个鲜,顺便实现以下我的想法,于是开整。前面各种折腾就不说了。开始弄自定义组件。自定义了一个input,但是按照vue2.X的方式设置v-model的时候居然不好用了,各种检查代码没问题。只好先改成属性+事件监听的方式,但是这也不方便呀,于是开始各种查资料。新鲜事物资料特别少,查了半天也没弄明白,有说不支持了,有说改写法了,各种尝试还是不好使。又找到一个原版英文资料,似乎要加冒号,但是冒号后面怎么写不知道,好吧是我英文太烂看不懂。直到在B站找到了一个视频,终于解决了问题。vue3.0的v-model的变化vue2

文档驱动 —— 查询组件:使用 vue3.0 的新特性,重构代码

用vue3.0 的新特性,重构了一下代码,这下清晰多了。可读性显著提高。源码https://github.com/naturefwvue/nf-vue3-ant目的简单方便,不用写代码就可以实现各种查询功能把查询相关的功能都做全,不留遗憾功能快捷查询,常用的查询条件个性化查询方案,自己设置自己喜欢的查询条件可以更换各种查询方式,模糊、精确、范围,随你喜欢更多的查询条件,查询条件不够用?那就都加上meta驱动,无需代码,不写代码,梦想成真结构快捷查询如上图,把常用的几个查询条件放在第一行,采用紧凑模式,直接放控件,通过 placeholder 的方式标示控件是哪个字段的

Mysql 中主库跑太快,从库追不上

本文要点:主从常见架构随着日益增长的访问量,单台数据库的应接能力已经捉襟见肘。因此采用主库写数据,从库读数据这种将读写分离开的主从架构便随之衍生了出来。在生产环境中,常见的主从架构有很多种,在这里给大家介绍几种比较常见的架构模式。图片图片主从复制原理了解了主从的基本架构及相关配置后,下面就要进入正题了。对于主从来说,通常的操作是主库用来写入数据,从库用来读取数据。这样的好处是通过将读写压力分散开,避免了所有的请求都打在主库上。同时通过从库进行水平扩展使系统的伸缩性及负载能力也得到了很大的提升。图片但是问题就来了,读从库时的数据要与主库保持一致,那就需要主库的数据在写入后同步到从库中

Mysql 中主库跑太快,从库追不上

本文要点:主从常见架构随着日益增长的访问量,单台数据库的应接能力已经捉襟见肘。因此采用主库写数据,从库读数据这种将读写分离开的主从架构便随之衍生了出来。在生产环境中,常见的主从架构有很多种,在这里给大家介绍几种比较常见的架构模式。图片图片主从复制原理了解了主从的基本架构及相关配置后,下面就要进入正题了。对于主从来说,通常的操作是主库用来写入数据,从库用来读取数据。这样的好处是通过将读写压力分散开,避免了所有的请求都打在主库上。同时通过从库进行水平扩展使系统的伸缩性及负载能力也得到了很大的提升。图片但是问题就来了,读从库时的数据要与主库保持一致,那就需要主库的数据在写入后同步到从库中

vue3.0 的 Composition API 的一种使用方法

网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛。假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面,事件都放在methods 里面,代码少的话还好分辨,如果代码多了,看着就头疼了。现在vue3.0可以按照业务关系分成多个管理类来管理这些代码。比如帖子列表+发帖功能,我们先做一个模板:(简单表示一下,不做美化处理了)论坛列表{{index}}:{{item.title}} {{item.viewCount}} 发个帖子 标题: 内容: 发表帖子上面的模板部分没有啥区别,变化部分在js代码

Vue3(一) CND方式的安装以及简单使用

简介感觉vue3的新特性很舒服,这样才是写软件的感觉嘛。打算用Vue实现自己的一些想法。Vue3还有几个必备库,比如Vue-Router(负责路由导航)、Vuex(状态管理、组件间通信),还有第三方UI库,比如element Plus、Antdv、Vant 等。这里会介绍他们的CND的安装方法,以及简单的使用方式。Vue3 的使用方式使用方式有两大类:CDN package工程化方式开发cnd方式就是在script里面引用js文件(类似于JQuery),然后就可以开鲁了,简单粗暴,适合于新手学习基础知识,或者做点小项目。但是如果想要开发中大型项目的话,就需要使用工程化的开发方式了

Vue3(二)工程化开发方式做项目

工程化的开发方式这是开发中、大型项目的必备技能,网上资料也很多,这里只是一个简单的综合性的介绍。包括vue的全家桶、建立项目的几种方式、UI库的简单使用等。可以和上一篇的cnd方式做项目做一下对比。node.js,npm、cnpm、yarnnode.js执行 npm run serve ,然后就可以在浏览器里面访问了,那么这是怎么做到的呢?这个就要归功于node了。建立项目的时候,会自动创建一个node的服务,这样我们就可以边写代码,边看运行效果了。所以工程化开发,首先要安装一个node。安装方法网上已经有很多了,这里就不搬运了。大家也不用担心,不会用node怎么办。这个是自动化的

Vue3(三)CND + ES6的import + 工程化的目录结构 = 啥?

突发奇想这几天整理了一下vue的几种使用方式,对比之后发现有很多相似之处,那么是不是可以混合使用呢?比如这样:vue的全家桶和UI库,采用传统的方式加载(CND、script)。自己写的js代码,采用ES6的 import 方式加载。目录结构采用vuecli建立的项目的目录结构。入口页面用vite项目的 index.html。不用babel做转义(因为还不会用)。不用webpack(因为总是报错,头痛...)。这种结合会怎么样?我们来看看具体情况。心急的可以先看看在线演示:https://naturefwvue.github.io/nf-vue-cnd/cnd/project

vue3.0beta.1 创建项目

vue3beta.1 创建项目的方法安装node.js略过。网上资料很多,不搬运了。安装 vue-clinpm install -g @vue/cli注意以下命令是错误的!npm install -g vuenpm install -g vue-cli这个和以前的安装命令是不一样的,估计是要和以前的vue-cli做区别。如果安装了以前的版本,建议先卸载npm uninstall -g vue-cli安装成功后,我们即可使用 vue 命令,测试方法:(查看版本)$ vue -V@vue/cli 4.5.4 (目前的版本号,估计还会不断更新)创建 vue 项目:vue create vue