Vue
文章平均质量分 62
一掬净土
为者常成,行者常至。
展开
-
Vue3快速上手(十七)Vue3之状态管理Pinia
从官网截图里可以直接看到,pinia是一个vuejs的状态(数据)管理工具。功能性同vuex。logo是小菠萝。它是一个集中式状态管理工具。就是将多个组件共用的数据管理起来,重复利用。有点类似缓存的意思。原创 2024-03-22 14:39:12 · 936 阅读 · 0 评论 -
Vue3快速上手(十六)Vue3路由传参大全
Vue3路由传参。原创 2024-03-02 16:21:03 · 4325 阅读 · 1 评论 -
Vue3快速上手(十五)Vue3路由器使用和简单路由切换
路由器:通常指的是我们家里上网用的路由器,通过网络接口,一根网线,链接至电脑,一般我们的电脑就可以上网了,多个网络接口,链接多个电脑,形成一组路由。而路由器就是管理这些路由线路的。Vue里的路由器也是这个意思,通过点击,输入的方式使得浏览器得知发生变化的时候,路由器可以通过当前页面的地址,定位对应的组件,从而显示到指定页面。这里路径和页面组件就是一组一组的路由,而Vue的路由器是用来管理这些路由的。原创 2024-03-02 16:19:59 · 1134 阅读 · 0 评论 -
Vue3快速上手(十四)Hooks用法和真正的Composition组合式API
Hooks,顾名思义,挂钩;钩子的意思。在Vue3里,通过hooks,将不同的功能的数据,方法,计算属性,生命周期函数等,所有和该功能有关联的内容,封装到一个函数中。只需要在使用该功能的地方直接引入即可。多个功能,多个Hooks。这样实际就组成了Vue3中真正的Composition组合式API。原创 2024-02-28 09:14:19 · 843 阅读 · 0 评论 -
Vue3快速上手(十三)Vue3的生命周期
生命嘛,总是和人类比。从出生到死亡的整个过程。vue2的生命周期是分为4个阶段8个函数。原创 2024-02-28 09:10:58 · 373 阅读 · 0 评论 -
Vue3快速上手(十二)props的使用
父组件在调用子组件时,给子组件标签加属性,子组件接收该属性的,并展示对应的值。子组件具体是通过来接收数据的。// 是一个数组,接收多个值。原创 2024-02-27 10:19:51 · 905 阅读 · 0 评论 -
Vue3快速上手(十一)标签里的ref属性
标签里的ref,可以在普通html元素标签上,也可以用在vue组件标签上。用在html元素标签上时,返回的是该html元素的DOM;用在vue组件标签上时,返回的是该子组件(也就是当前vue是父组件)暴露给父组件的对象,暴露哪些,在返回的对象里就包含哪些,不暴露不包含。原创 2024-02-27 10:18:48 · 1641 阅读 · 0 评论 -
Vue3快速上手(十)数据变化监视之侦听器watch和watchEffect
监视ref定义的基本类型的数据,实际是观察.value的变化。// 监视sum的变化, 返回值是一个停止监听函数})页面效果如下:从图上可以看出:1、成功监听了a.value的变化2、监听返回一个函数,是停止函数,可以在特定条件下,调用其来停止监听。stopWatch的输出如下图,其功能性显而易见。监听对象时,监听的是对象地址的变化,如果只是对象属性值的变化,则不会被监听。原创 2024-02-19 14:32:36 · 1833 阅读 · 0 评论 -
Vue3快速上手(九)计算属性computed
vue3里强调尽量让,也就是模版,变得更加简单。所以涉及到转换、计算等操作的,还是建议在标签里进行。如此我们可以用到computed。原创 2024-02-19 14:32:24 · 644 阅读 · 0 评论 -
Vue3快速上手(八) toRefs和toRef的用法
vue3:toRef和toRefs的用法和对比。原创 2024-02-18 18:01:25 · 883 阅读 · 0 评论 -
Vue3快速上手(七) ref和reactive对比
响应式对象类型ref和reactive都是支持的。一般用哪种都是可以的。但是对于属性较多的表单来讲reactive可能要比ref更加适合一些。根据实际情况具体选用即可。原创 2024-02-18 17:56:52 · 788 阅读 · 0 评论 -
Vue3快速上手(六) reactive之对象类型的响应式数据
需要引入reactive才可以使用;reactive包裹的数据即为响应式数据,返回一个Proxy(Object)对象;script标签里,操作reactive包裹的响应式基本类型数据,可以直接给数据对象赋值。reactive 重新分配一个新对象,会失去响应式。需要用 object.assign(oldObj, newObj) 方法整体赋值替换,类似后端BeanUtil方法。当然你也可以一个一个重新赋值。原创 2024-02-14 11:30:00 · 1056 阅读 · 0 评论 -
Vue3快速上手(五)ref之对象类型的响应式数据
需要引入ref才可以使用;ref包裹的数据即为响应式数据,返回一个RefImpl对象实例;但是实例里的value是一个Proxy(Object)对象;这个下篇说Reactive的时候会有解释。script标签里,操作ref包裹的响应式基本类型数据,必须给其value属性赋值,而不能直接给数据对象赋值。先获取value再操作对象属性值。原创 2024-02-14 10:15:00 · 887 阅读 · 0 评论 -
Vue3快速上手(四)ref之基本类型响应式数据
需要引入ref才可以使用;ref包裹的数据即为响应式数据,返回一个RefImpl对象实例;script标签里,操作ref包裹的响应式基本类型数据,必须给其value属性赋值,而不能直接给数据对象赋值。原创 2024-02-13 17:45:08 · 554 阅读 · 0 评论 -
Vue3快速上手(一)使用vite创建项目
Vue3快速上手(一)使用vite创建项目,需要安装node.js,我这边v18.19.0。原创 2024-02-05 22:45:00 · 1263 阅读 · 1 评论 -
Vue3.x 整合WangEditor富文本编辑器示例
之前搞的Vue2.x富文本用的是quill+vue-quill-editor,代码直通:Vue-cli3整合Quill富文本编辑器https://blog.csdn.net/wdy_2099/article/details/102715642但是在Vue3中问题比较多,现改用wangEditor。一、项目结构就是普通的脚手架示例,如下图二、代码:package.json中引入如下依赖: "dependencies": { "element-plus": "^1.0.2-beta.33原创 2021-10-22 21:45:00 · 2274 阅读 · 7 评论 -
Vue Cli3安装初始化一个项目骨架
NPM设置淘宝镜像源,并安装cmpmnpm config set registry https://registry.npm.taobao.orgnpm config get registrynpm install -g cnpm --registry=https://registry.npm.taobao.orgThinkPad@wangdy MINGW64 /e/2020code$...原创 2020-01-17 15:17:39 · 2071 阅读 · 0 评论 -
Vue-cli3整合Quill富文本编辑器
一、背景我们在开发后台管理系统的时候,通常会用到富文本,比如公告啦,新闻啦,各种图文详情啊等。其实vue能整合的富文本有很多,最好的应该是tinymce这款,但是这款在我们使用过程中,发现一个问题就是:同一个页面多个使用的时候,会有回显不正常的问题,图层错乱的问题,具体项目具体可能问题不一样。但是遇到了就记录在这里。所以我们之后就换了一个新的quill editor,感觉还不错,解决了上述问题:...原创 2019-10-24 09:18:55 · 7277 阅读 · 38 评论 -
vue-cli3整合echarts
闲话少絮,步入正题:官网api文档直通https://www.echartsjs.com/zh/api.html#echarts一.下载安装echarts执行以下命令,安装echartsnpm install echarts -S// 打印日志如下:$ npm install echarts -Snpm WARN ajv-keywords@3.2.0 requires a peer...原创 2019-09-17 09:08:52 · 4420 阅读 · 6 评论 -
Vue环境搭建
1)需要安装node.js,这里我们就不具体说了,下载后,一直下一步就可以了。 【附node.js安装:】 http://www.runoob.com/nodejs/nodejs-install-setup.html$ node -vv7.6.01)安装淘宝cnpm npm install -g cnpm –registry=http://registry.npm.taobao.org2)原创 2017-08-09 15:48:33 · 6159 阅读 · 0 评论 -
Vue基本用法
引入对应js-->scripttype="text/javascript"src="lib/vue.js">script>script> window.onload=function(){ var vue= newVue({ el:"#box",//选择器 data:{原创 2017-04-20 13:40:54 · 925 阅读 · 0 评论