vue3状态管理工具pinia

  • Post author:
  • Post category:vue

Vue3 vue3状态管理工具pinia 1、安装pinia 2、创建一个store仓库 在store仓库中有三个核心概念:state,getters,action; 3、使用store仓库 4、action异步写法 5、store 的解构使用 6、pinia的持久化插件 vue3状态管理工具pinia 什么是pinia? pinia 是Vue的最新状态管理工具,是Vuex的替代品; 好处: 1、…

继续阅读 vue3状态管理工具pinia

Vue data数据更新或覆盖 并立即渲染页面

  • Post author:
  • Post category:vue

官方文档有更详细的解释以及代码: https://cn.vuejs.org/v2/guide/list.html 声明: 仅此记录实践当中出现的问题及解决办法,有许多错误,望能得到大家的指正!!! 不胜感激 。 如果有遇到跟我相同的问题可以留言,我会及时回复, 虽然我也很菜!!! Vue部分代码:list为渲染到页面的数据 var menuList = new Vue({ el: '#zhongx…

继续阅读 Vue data数据更新或覆盖 并立即渲染页面

vue 仿微信通讯录实现侧边字母快速检索

  • Post author:
  • Post category:vue

预览图 实现步骤 处理后台传来的数据,数据格式化 pySegSort(arr){ if (!String.prototype.localeCompare) return null // let letters = 'abcdefghjklmnopqrstwxyz'.split('') let letters = 'ABCDEFGHJKLMNOPQRSTWXYZ'.split('') let zh …

继续阅读 vue 仿微信通讯录实现侧边字母快速检索

vue watch 的使用方式

  • Post author:
  • Post category:vue

1,通过 watch 监听 data 数据的变化,数据发生变化时,就会打印当前的值 watch: { data(val, value) { console.log(val) console.log(value) } } 2, 通过 watch 监听 list 数据的变化,数据发生变化时,this.number++(使用深度监听) data() { return { list: { 'id': 1,…

继续阅读 vue watch 的使用方式

vue-element+admin中文及npm intsall安装报错解决

  • Post author:
  • Post category:vue

vue-element+admin中文及npm intsall安装报错解决 1、切换中文分支 2、npm install 报错 1、切换中文分支 git clone https://gitee.com/panjiachen/vue-element-admin.git cd vue-element-admin/ git checkout i18n npm install --registry=htt…

继续阅读 vue-element+admin中文及npm intsall安装报错解决

解决引入Vuex报错问题

  • Post author:
  • Post category:vue

当我们在项目中引入Vuex时,出现以下错误 出现这样错误的原因是在创建store实例之前,没有调用Vue.use(Vuex),但这个时候会有人说,已经调用了Vue.use(Vuex),还是会出现这样的错误。究其原因是因为Vue脚手架会解析文件中的所有import语句,然后把所有import语句按照编写代码的顺序全都汇总在最上方,之后才会解析文件中的其它代码,这就会使得Vue.use(Vuex)在s…

继续阅读 解决引入Vuex报错问题

nginx部署vue项目(成功详细版本)

  • Post author:
  • Post category:vue

1.安装 去nginx官网安装稳定版本 nginx news http://nginx.org/ 下载好以后直接解压就行(里面的内容如下图) 2.配置 (1)将打包好的dist文件夹放进html文件夹里面 (2)修改conf目录下的nginx.conf文件 server { listen       8887;#设置监听的端口 server_name  localhost; #charset ko…

继续阅读 nginx部署vue项目(成功详细版本)

Vue3.0 实用小工具

  • Post author:
  • Post category:vue

Vue3 UI库/相关工具/可视化/生态全分享 技术胖整理分享 1.Web UI库 1. ElementUI Plus 一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库 https://element-plus.org/zh-CN/ 2. Ant Design of Vue Ant Design 的 Vue 实现,开发和服务于企业级后台产品 https://www.antd…

继续阅读 Vue3.0 实用小工具

Vue Nginx 跨域部署

  • Post author:
  • Post category:vue

为什么要用nginx跨域部署 Vue项目打包完之后接口请求后端接口数据返回404,这是由于Vue项目打包静态文件之后 proxyTable 代理配置失效,proxyTable是依据webpack实现的。要实现前后端分离项目的线上部署并解决跨域问题一种解决方案是通过nginx配置反向代理实现。 开发环境配置 VUE_APP_API_PROXY_TARGET配置代理的地址。 在vue.config.j…

继续阅读 Vue Nginx 跨域部署

规避使用 vue 的 v-html 指令的方法

  • Post author:
  • Post category:vue

一、引言 前一阵子在写业务的时候,发现公司的代码里,有个场景是这样的:需要用户定义一些活动规则,然后在左边的手机预览图中,实时显示出这些活动规则。 于是,同事用了一个带 v-html 指令的 <textarea> 标签,并且将双向数据绑定之后的变量 str 直接用 v-html="str" 将 str 绑定在 DOM 上,然后用户输入的规则显示在左边的预览图中。 二、思考 但我们在学 …

继续阅读 规避使用 vue 的 v-html 指令的方法