经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 Vue.js
vue基础中的注意事项,以及一些学习心得

vue基础中的注意事项,以及一些学习心得

vue中你不知道的东西、以及注意事项 v-html 使用 v-html的时候该指令中的值会覆盖绑定标签中原有的值,且使用v-html的时候不要将他设置为给用户提供内容的地方,因为v-html很容易被XSS攻击 v-bind 使用v-bind绑定属性值为布尔值的属性时,如果数据为t...[2020/1/19]

一起学Vue之事件处理

在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正。 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。如下所示: 1 <button v-...[2020/1/19]

vue koa2 mongodb 从零开始做个人博客(二) 登录注册功能后端部分

0.效果演示 插入视频插不进来,就很烦。可以出门右拐去优酷看下(点我!)。  1.后端搭建 1.1项目结构 首先看一下后端的server目录  挨个解释一下 首先dbs文件夹顾名思义,操作数据库的,modules就是操作数据库的mongoose模型。 con...[2020/1/19]

vue中使用WX-JSSDK的两种方法(推荐)

vue中使用WX-JSSDK的两种方法(推荐)

公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题。本人也是第一次开发微信公众号,在网上看了很多篇博客,最终选定了两种方法,并且亲测有效。 一、通过全局,在router.afterEach中定义 1.首先通过yarn add weixin-...[2020/1/18]

vue koa2 nuxt.js 从零开始做个人博客(一) 登录注册功能前端部分

vue koa2 nuxt.js 从零开始做个人博客(一) 登录注册功能前端部分

0.效果演示 插入视频插不进来,就很烦。可以出门右拐去优酷看下(点我!)。  1.准备工作 1.1前端框架 前端使用了基于vue.js的nuxt.js。为什么使用nuxt.js? 首先我做的是博客的项目,所以SSR至关重要。虽然跟本文要讲的登录注册没有什么关系,但是文章如果...[2020/1/18]

vue 查看dist文件里的结构(多种方式)

vue 查看dist文件里的结构(多种方式)

场景:优化打包后的代码,提高性能。 1.方式一:report-json。   1.1 package.json文件里加入以下命令, "report": "vue-cli-service build --report-json"   1.2 然后控制台运行 npm run r...[2020/1/17]

vue下axios拦截器token刷新机制

创建http.js文件,以下是具体代码: 引入安装的axios插件 import axios from ''axios'' import router from ''@/router''; import Vue from ''vue'' const qs = require("qs"...[2020/1/17]

vuejs中父子组件之间通信方法实例详解

本文实例讲述了vuejs中父子组件之间通信方法。分享给大家供大家参考,具体如下: 一、父组件向子组件传递消息 Parent.vue <template> <div cla ="parent"> <v-child :msg="me ag...[2020/1/17]

详解搭建一个vue-cli的移动端H5开发模板

简介 vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板,其中已经搭建好基本的开发框架,可帮助您实现快速开发。 技术栈:vue + vux + axios + le 源码地址:https: github.com/Michael-lzg/vue-mobile ...[2020/1/17]

Vue v-bind动态绑定class实例方法

现在很多网站,都是希望动态切换cla ,更换c 样式。下面我们使用Vue的v-bind绑定cla v-bind动态绑定cla 对象语法绑定(常用) red和size的值为true就在cla 显示red和size,false就不显示。下面有两种写法: <style&...[2020/1/15]

vue 组件销毁并重置的实现

方法1 当数据变更后,通过watch 监听,先去销毁当前的组件,然后再重现渲染。使用 v-if 可以解决这个问题 <template> <third-comp v-if="reFresh"/> </template> &l...[2020/1/14]

vue.js自定义组件实现v-model双向数据绑定的示例代码

vue.js自定义组件实现v-model双向数据绑定的示例代码

我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定。 表单控件上使用v-model <template> <input type="text" v-model="name" /> <input type="...[2020/1/8]

Vuejs中的watch实例详解(监听者)

Vuejs中的watch实例详解(监听者)

最近刚刚追完庆余年,心思还总是在剧情里,然后就觉得在vuejs里watch就是监察院,一个不折不扣的特务机构。在Vue中watch被称为监听者,它随时观察这vue实例中每一个数据的变化,当数据发生改变,做出响应。 通过下面的示例代码来看一下这个监察院是怎么运作的: new Vue(...[2020/1/6]

Vue CLI 3搭建vue+vuex 最全分析

一、介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) CLI 服务:@vue/cli-s...[2020/1/3]

详解Vue的watch中的immediate与watch是什么意思

immediate immediate设为true后,则监听的这个对象会立即输出,也就是说一刷新页面就会在控制台输出,当然此时页面上的数据我们还没来得及手动让其发生变化,所以在控制台输出的newValue为我们在代码中默认设置的值,oldValue输出为“undefined”。如 当我...[2019/12/30]

Vue使用虚拟dom进行渲染view的方法

前提 vue版本:v2.5.17-beta.0 触发render vue在数据更新后会自动触发view的render工作,其依赖于数据驱动;在数据驱动的工作下,每一个vue的data属性都被监听,并且在set触发时,派发事件,通知收集到的依赖,从而触发对应的操作,render工...[2019/12/26]

Vue 路由间跳转和新开窗口的方式(query、params)

路由间跳转配置: query 方式 参数会在url中显示 this.$router.push({ query方式 path: "/a", query: { projectDetails: val }, params 方式 传参...[2019/12/25]

vue项目实现图片上传功能

本文实例为大家分享了vue实现图片上传功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl...[2019/12/24]

vue element-ui实现动态面包屑导航

vue element-ui动态面包屑导航,供大家参考,具体内容如下 直接上代码 一、template代码 这是单独的组件 <template> <el-breadcrumb separator-cla ="el-icon-arrow-right"&...[2019/12/24]

vue起步

1.vue构造器: var v=new Vue({ ......... }) <div id="d1"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> ...[2019/12/24]

Vue+Node实现的商城用户管理功能示例

本文实例讲述了Vue+Node实现的商城用户管理功能。分享给大家供大家参考,具体如下: 1、用户登陆 前端将用户输入的用户名密码post发送到后端,如果返回status=0,代表登陆成功,将hasLogin置为true,控制页面登陆按钮不显示,并显示返回的用户名nickname ...[2019/12/23]

Vue filter 过滤当前时间 实现实时更新效果

Vue filter 过滤当前时间 实现实时更新效果

过滤器 过滤器是处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改、判断等,把不符合规则的请求在中途拦截或修改。也可以对响应进行过滤,拦截或修改响应。 下面通过代码给大家介绍Vue filter 过滤当前时间 实现实时更新,具体代码如下所示...[2019/12/20]

Vue中使用Lodop插件实现打印功能的简单方法

介绍 需要进行打印功能,Lodop就是实现需求的插件.就是引入对应的js-sdk,使用js调用对应的打印方法,然后就会调出客户端软件(需要用户安装),然后就可以在软件里面打印内容了. 使用方法 最小实现 实现打印必须要执行的3个最基本的方法 LODOP.PR...[2019/12/19]

vue 中 px转vw的用法

下面介绍最简单的用法 1 下载依赖 npm install postc -import postc -loader postc -px-to-viewport --save-dev 2 在项目根目录下新建postc .config.js,配置如下 module.export...[2019/12/19]

一起学Vue之样式绑定

一起学Vue之样式绑定

在前端开发中,设置元素的 cla 列表和内联样式是基本要求。本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正。 概述 Vue操作元素的 cla 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind ...[2019/12/19]

vue组件初始化过程

  之前文章有写到vue构造函数的实例化过程,只是对vue实例做了个粗略的描述,并没有说明vue组件实例化的过程。本文主要对vue组件的实例化过程做一些简要的描述。   组件的实例化与vue构造函数的实例化,大部分是类似的,vue的实例可以当做一个根组件,普通组件的实例化可以当做子组件...[2019/12/18]

Vue基础

Infi-chu: http: www.cnblogs.com/Infi-chu/ 一、什么是Vue1.Vue.js是一个构建数据驱动的Web界面的渐进式框架2.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件3.核心是一个响应的数据绑定系统二、基本使用e...[2019/12/17]

vue.config.js的常用配置

const path = require(''path'') const glob = require(''glob'') const resolve = (dir) => path.join(__dirname, dir) const PAGES_PATH = ''. ...[2019/12/17]

element-ui tooltip修改背景颜色和箭头颜色的实现

本文介绍了element-ui tooltip修改背景颜色和箭头颜色的实现,分享给大家,具体如下: <el-tooltip cla ="item" effect="dark" content="分享" placement="left" popper-cla ="draw_sh...[2019/12/16]

Vue学习笔记Day1安定-

1、vue初时 vue安装三种方式: 1:CDN引入 以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。 Staticfile CDN(国内) : https: cdn.staticfile.org/vue/2.2.2/vue.min.js unpkg...[2019/12/16]

vue中使用elementUI组件手动上传图片功能

Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合。是基于MVVM(Model-View-ViewModel)设计思想。提供MVVM数据双向绑定的库,专注于UI层面 使用elementUI上传图片时遇到跨域问题,所以需...[2019/12/13]

Vue替代marquee标签超出宽度文字横向滚动效果

Vue替代marquee标签超出宽度文字横向滚动效果

一、npm 安装 如果你想安装插件(自己写的) 安装 # install dependencies npm i marquee-components 使用 在main.js引入 import marquee from ''marquee-comp...[2019/12/9]

vue如何使用async、await实现同步请求

这篇文章主要介绍了vue如何使用async、await实现同步请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 以下是vue method的demo: loadTableData : async function() { ...[2019/12/9]

vue新建项目并配置标准路由过程解析

vue新建项目并配置标准路由过程解析

这篇文章主要介绍了vue新建项目并配置标准路由过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 配置路由所有用到的地方总共四步或者说四处 1.index.js(src--router--index.js) imp...[2019/12/9]

vue中实现高德定位功能

一、获取key及在index.htm中引入 首先需要成为高德开发者,申请到适合项目的key.并在index.html中进行引入 <script type="text/javascript" src="https: webapi.amap.com/maps?v=1.4....[2019/12/3]

VUE 动态组件的应用案例分析

本文实例讲述了VUE 动态组件的应用。分享给大家供大家参考,具体如下: 业务场景 我们在开发表单的过程中会遇到这样的问题,我们选择一个控件进行配置,控件有很多中类型,比如文本框,下来框等,这些配置都不同,因此需要不同的配置组件来实现。 较常规的方法是使用v-if 来实现,这样界面看上去...[2019/12/2]

Vuex基本使用的总结--转载

在 Vue 的单页面应用中使用,需要使用Vue.use(Vuex)调用插件。使用非常简单,只需要将其注入到Vue根实例中。 import Vuex from ''vuex'' Vue.use(Vuex) const store = new Vuex.Store({ st...[2019/11/26]

Vue实现按钮级权限方案

Vue实现按钮级权限方案

演示 在年初开发一个中后台管理系统,功能涉及到了各个部门(产品、客服、市场等等),在开始的版本中,我和后端配合使用了花裤衩手摸手系列的权限方案,前期非常nice,但是慢慢的随着功能增多、业务越来越复杂,就变得有些吃力了,因为我们的权限动态性太大了 手摸手系列权限方案是有比较清晰的权限...[2019/11/21]

Vue中常用rules校验规则(实例代码)

在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法。如果错误欢迎指出,后期不断补充更新。 1、是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''...[2019/11/15]

vue实现修改图片后实时更新

1、vue图片上传,使用element UI 上传组件自己写 <el-upload action="string" :http-request="uploadImg" :show-file-list="false"> <el-button v-...[2019/11/14]

Vue SPA 初次进入加载动画实现代码

在app挂载的div同级处写一个加载动画,例如: <body cla ="font-hei"> <div cla ="wrap" id="loader"> <div> <div cla ="mult2rect mult2...[2019/11/14]

Vue 使用Props属性实现父子组件的动态传值详解

如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http: www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> &...[2019/11/14]

vue prop属性传值与传引用示例

vue组件在prop里根据type决定传值还是传引用。 简要如下: 传值:String、Number、Boolean 传引用:Array、Object 若想将数组或对象类型也以值形式传递怎么办呢?如下方式可以实现: component-A 引用component-B...[2019/11/14]

vue使用prop可以渲染但是打印台报错的解决方式

vue使用prop可以渲染但是打印台报错的解决方式

vue属性传递时有时会报下述错误 vue.esm.js?f959:610 [Vue warn]: Error in render: "TypeError: Cannot read property ''RegistrationAuthority'' of undefined" ...[2019/11/14]

vue props对象validator自定义函数实例

validator自定义函数实例 props: { 基础的类型检查 (`null` 匹配任何类型) propA: Number, 多个可能的类型 propB: [String, Number], 必填的字符串 propC: { t...[2019/11/14]

vue router 传参获取不到的解决方式

在当前路由中有一个toArticle方法可以跳转到article页面 methods:{ toArticle:function(index) { this.$router.push({path:''/article'',params:this.blogList[ind...[2019/11/14]

vue项目中锚点定位替代方式

在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转。所以在vue项目中定义一个方法不适用锚点定位: scrollToSection() { let section = document....[2019/11/13]

vue data引入本地图片的两种方式小结

vue data引入本地图片的两种方式小结

我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return ...[2019/11/13]

前端vue-cli项目中使用img图片和background背景图的几种方法

前端中背景图片极其常用,但是很容易出现各种问题. 一种是脚手架本身资源引用方式的问题,如指定静态资源文件夹. 一种是图片资源引入方式,有时候使用绝对或者相对路径会导致错误. c 方法 正常使用background属性即可. 如有问题,应把图片资源放入static静态资源文件...[2019/11/13]

vue 项目打包时样式及背景图片路径找不到的解决方式

问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到; 解决方法: 主要是需要单独为 c 配置 publicPath 。 ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为c 单独配置 public...[2019/11/13]

373
2
记录数:532 页数:1/1112345678910下一页尾页
加载更多