![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 89
廊坊吴彦祖
你怎么对待生活,生活就怎么对待你
展开
-
vue自定义指令:指定文字高亮
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令原创 2023-12-04 22:25:27 · 1516 阅读 · 0 评论 -
VuePress + Github Pages 搭建博客网站
VuePress + Github Pages 搭建博客网站,VuePress 是基于 Vue 的静态网站生成器,GitHub Pages 是通过 GitHub 托管和发布的公共网页原创 2022-09-04 21:50:14 · 533 阅读 · 1 评论 -
vue图片裁剪插件:vue-img-cutter
vue图片裁剪插件:vue-img-cuttervue-img-cutter 是一个简单易用的 vue 图片裁剪插件,支持旋转、缩放、平移,固定比例,固定尺寸,远程图片裁剪,只需要很少的代码就可以实现裁剪功能,也可以通过调整参数以适应你自己的业务需求Github:https://github.com/acccccccb/vue-img-cutter特点:兼容IE9+,MSEdge,Chrome,Firefox两种展现形式,行内或弹窗可旋转、缩放图片任意比例、大小裁剪固定比例、大小裁剪支持原创 2020-12-28 16:53:08 · 6803 阅读 · 10 评论 -
vue3.0 Composition API上手体验
vue3.0对比vue2.0优势框架内部醉了大量性能优化,包括:虚拟dom,编译模板,Proxy的新数据监听,更小的打包文件等新的组合式API(即composition-api),更适合大型的项目的编写方式对Typescript支持更好,去除了繁琐的this操作,更强大的类型推导TypescriptTypescript是javascript类型的超集,它可以编译成纯的javascriptTypescript可以再任何浏览器、任何计算机和任何操作系统上运行,并且是开源的Typescript原创 2020-12-25 13:45:00 · 685 阅读 · 1 评论 -
vue可响应式的数组方法
vue可响应式的数组方法由于 js 的限制,vue 不能检测以下数组的变动:利用索引直接设置一个数组项时,例如:this.items[indexOfItem] = newValue修改数组的长度时,例如:this.items.length = newLength全局方法 Vue.set() 利用索引为数组添加响应式元素:Vue.set(Array, index, newValue) 或者 this.$set(Array, index, newValue)vue 将被侦听的数组的变异方法(原创 2020-12-07 10:51:25 · 988 阅读 · 0 评论 -
vue插件开发:vuex模块化懒加载插件
vue插件开发:vuex模块化懒加载插件vue 插件插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制,一般有下面几种:添加全局方法或者 property。如:vue-custom-element添加全局资源:指令/过滤器/过渡等。如 vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-原创 2020-12-03 11:24:57 · 490 阅读 · 1 评论 -
Vue.extend实现全局Toast提示组件和Dialog对话框组件封装
Vue.extend实现Alert和Toast组件封装Vue.extend() 使用Vue.extend 属于 Vue 的全局 API,相比常用的 Vue.component 写法,使用 Vue.extend 步骤更加繁琐一些,但是在一些独立组件开发场景中,Vue.extend + $mount 这对组合使一些动态渲染或者使用 js 全局调用的组件变得更加灵活Vue.extend() 方法返回一个组件构造器,通过组件构造器创建组件实例,该实例的参数是一个包含组件选项的对象,用来在实例上扩展属性和方法原创 2020-11-13 21:05:38 · 1167 阅读 · 0 评论 -
vuecli项目构建SSR服务端渲染
通过vuecli项目构建ssr服务端渲染服务端渲染(SSR)Vue.js 是构建客户端应用程序的框架,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。我们也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行为什么使用 服务端渲染(SSR)更好的 SEO:传统的 spa 页面数原创 2020-10-28 10:54:36 · 1357 阅读 · 5 评论 -
vuex在刷新页面时保持数据不变(vuex状态持久化)
vuex在刷新页面时保持数据不变created(){ //在页面加载时读取sessionStorage里的状态信息 this.$store.state.userInfo = window.sessionStorage.getItem("userInfo") //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { window.sessionStora原创 2020-06-09 16:19:53 · 3891 阅读 · 2 评论 -
Vue项目优化: 使用vue-lazyload插件实现图片懒加载
Vue项目优化: 使用vue-lazyload插件实现图片懒加载vue-lazyloadvue-lazyload插件用于 vue 项目中图片的懒加载npm地址:https://www.npmjs.com/package/vue-lazyloadvue-lazyload安装通过npm安装npm install vue-lazyload --save-dev通过CDN引入使用<script src="https://unpkg.com/vue-lazyload/vue-lazyload原创 2020-06-08 15:25:03 · 466 阅读 · 0 评论 -
Vue生命周期钩子函数
Vue生命周期函数beforeCreate实例被创建之前,此时实例还没有被创建,无法获取data,不能使用watch监听created此时实例已经创建,可以获取data,调用watch监听,但是页面还是空白beforeMount页面挂载前,页面依然是空白,此时render函数首次被调用mounted页面挂载了,此时页面已经有内容,可以访问到dombeforeUpdate数据更...原创 2020-02-24 13:28:02 · 259 阅读 · 0 评论 -
Vue组件之间的传值
vue组件之间的传值vue组件之间的传值大致分为三种:父组件给子组件传值,子组件给父组件传值,兄弟组件之间传值此文介绍vue组件之间简单的数据传递,如果数据过于复杂,建议使用vue的状态管理模式 vuex父组件给子组件传值父组件通过props给子组件传值props 就是父组件给子组件标签上定义的属性,用来接收父组件传递的数据,props 的值可以是字符串数组,也可以是各自的名称和类型,用...原创 2020-01-17 11:20:43 · 423 阅读 · 0 评论 -
Vue路由跳转方式
Vue路由跳转方式声明式导航<router-link :to="...">不带参数:<!-- 通过name --><router-link :to="{name: ‘home’}"><!-- 通过path --><router-link :to="{path: ‘/home’}">携带参数:query 传参(类似ge...原创 2019-12-26 16:53:40 · 356 阅读 · 0 评论 -
Vue Cli3项目的打包优化
Vue Cli3项目的打包优化使用vue cli3创建一个项目,在项目根目录下创建配置文件vue.config.jsvue.config.js 是一个可选的审查或修改全局的 CLI 配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载vue.config.js:module.exports = { ...原创 2019-12-24 17:24:27 · 396 阅读 · 0 评论 -
Vue项目打包后部署到express服务器
vue项目打包后部署到express服务器Express是基于Node.js平台,快速,开放,极简的Web开发框架,如果前端需要服务器部署自己的项目,可以使用express首先在vue项目安装 expressnpm install express -save然后根目录下新建app.js文件const express = require('express')const path = ...原创 2019-12-01 00:05:03 · 2326 阅读 · 0 评论 -
Vue项目使用clipboard.js实现文字复制,剪切功能
Vue项目使用clipboard.js实现文字复制,剪切功能clipboard.js是一个不依赖flash或者其他框架,将文本复制到剪贴板的插件,不需要过多繁杂的配置或者下载很多脚本文件.安装:在vue项目中通过npm工具安装npm install clipboard --save在需要使用的组件中引入import Clipboard from 'clipboard'Html:...原创 2019-12-01 00:15:30 · 546 阅读 · 0 评论 -
Vue项目seo: 使用vue-meta-info动态生成meta标签
Vue项目seo: 使用vue-meta-info动态生成mata标签众所周知,vue这种单页面的项目是不利于seo的,但是在实际项目中,像一些交互网站,不可避免会考虑一些seo问题。即使是vue这种项目,我们还是可以通过一些其他技术解决seo问题的。例如vue项目中的meta标签,可以通过 vue-meta-info 动态生成“关键字”和“页面描述”,来优化页面的seo使用此插件可以配合 ...原创 2019-12-10 16:57:45 · 2011 阅读 · 0 评论