Vue
文章平均质量分 62
懂懂kkw
持续精进
展开
-
Vuex的使用, 看完就懂了
1. 什么是vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式.你可以简单理解为, 这是一个全局状态下的data, 任何组件可以访问这里面的数据.两个特点:Vuex 的状态存储是响应式的.不能直接改变store里面的数据状态, 通过提交(commit) mutation来改变数据.2. 一个简单的vuex定义 store/index.js 文件import Vue from 'Vue'import Vuex from 'Vuex'Vue.us原创 2020-07-22 18:04:24 · 593 阅读 · 0 评论 -
vue.js源码练习
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu...原创 2020-03-25 01:36:37 · 229 阅读 · 0 评论 -
vue模拟触发另一个按钮点击事件
vue.js1,给另一个按钮添加ref<el-button size="small" type="primary" ref="import">导入</el-button>2,事件触发this.$refs.import.$el.click()jQuery $("#a").click(function(){ $("#b").trigger('click')...原创 2019-12-04 10:59:31 · 26382 阅读 · 2 评论 -
vue中封装webSocket
在vue项目中,每个组件里使用webSocket比较简单,但是webSocket的使用是在整个项目中的时候呢,我们就需要封装成一个公共的文件;1.新建一个 socket.js 文件var websock = null;var global_callback = null;var serverPort = '5000'; //webSocket连接端口function...转载 2019-02-28 16:04:59 · 8374 阅读 · 0 评论 -
vue 显示微信title
1. 安装插件 (vue-wechat-title)yarn add vue-wechat-title --dev2. main.js 引入使用import VueWechatTitle from 'vue-wechat-title'; Vue.use(VueWechatTitle);3. router.js 加入title { ...原创 2019-03-01 14:08:48 · 637 阅读 · 0 评论 -
vue 中 axios 全局配置
在请求接口的时候做全局处理, 便于管理和维护axios 全局配置 base.jsimport axios from "axios";import qs from "qs";import router from "@/router";import { EventUtil} from '@/common';const instance = axios.create({...原创 2019-05-09 16:57:46 · 820 阅读 · 0 评论 -
vue中使用定时器setTimeout、setInterval的一些坑
1、在vue中,有两套定时器,一套是浏览器API,window对象上的;另一套就是vue/nodejs封装的,需要引入 (之前一直不知道,一直清不掉计时器,坑惨了)import { setInterval, clearInterval } from 'timers'如果只引入setInterval ,而没有引入 clearInterval 是清不掉计时器的...最新的vue-cli...原创 2019-05-10 11:51:58 · 6291 阅读 · 0 评论 -
vue filters 保留两位小数
export function keepTwo(value) { // 截取当前数据到小数点后三位 const tempVal = Number(value).toFixed(3) if (tempVal === 'NaN') { return '0.00' } const realVal = tempVal.substring(0, tempVal.length -...原创 2019-08-26 18:02:08 · 3517 阅读 · 1 评论 -
vue 组件通信传多个值
子组件 // 保存 save() { this.$emit('saveConditions', this.condition1, this.condition2) }父组件@saveConditions="saveConditions"// 接收saveConditions(val1, val2) { console.log(ar...原创 2019-09-17 11:42:53 · 697 阅读 · 0 评论 -
vue通过axios调用本地自定义数据
1. 自定义数据放置位置自定义数据放在根目录的public文件里, 可根据自己的需求分类管理.json文件的格式{ "data": { "text": "个人数据", "conditions": [ { "label": "姓名", "name": "name", "text": "张三" ...原创 2019-10-11 10:21:36 · 724 阅读 · 0 评论 -
vue.config.js 配置 svg
1. 安装svg的loadernpm install svg-sprite-loader --save-dev yarn add svg-sprite-loader2. 根目录新建vue.config.jsvue.config.js 配置如下 (ps : 这是自己工作时的配置, 每个人的需求不同,按需配置即可)const path = require('path')...原创 2019-01-23 16:33:25 · 4578 阅读 · 0 评论 -
vue 路由跳转四种方式 (带参数)
1. router-link1. 不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。2.带参数...原创 2019-01-09 19:29:39 · 121797 阅读 · 17 评论 -
vue 跳转外部链接(百度等)
直接在方法里面写window.location.href = 'http://www.baidu.com'; ps : 一定要注意, 要加上 http:// , 不然跳转还是当前域名下原创 2019-01-24 11:57:02 · 41393 阅读 · 9 评论 -
二、Vue(发送AJAX请求、Vue生命周期、计算属性、属性和方法、自定义指令、过渡(动画))
一、 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护 参考:GitHub上搜索axios,查看API文档 2. 使原创 2018-02-07 01:51:45 · 2919 阅读 · 0 评论 -
三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
一、 组件component 1. 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码 组件是自定义元素(对象) 2. 定义组件的方式 方式1:先创建组件构造器,然后由组件构造器创建组件 方式2:直接创建组件<!DOCTYPE html><html lang="en">...原创 2018-02-08 00:18:44 · 869 阅读 · 0 评论 -
自己写一个简易版的vue
vue原理图1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2018-09-05 10:22:44 · 2072 阅读 · 0 评论 -
document.createDocumentFragment
JS性能优化之创建文档碎片(document.createDocumentFragment)讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么。 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法。代码如下: for(var i=0;i<...转载 2018-08-03 16:40:55 · 745 阅读 · 0 评论 -
js中的Object.defineProperty()和defineProperties()
ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性。ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。Object的defineProperty和defineProperties这两个方法...转载 2018-08-03 15:09:37 · 268 阅读 · 0 评论 -
Vuex简单入门
一、简介官网介绍:Vuex是一个专为Vue开发的应用程序的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单理解:就是定义一个全局对象,然后在全局对象里面取数据,操作数据.可以这么理解但是有一点点不同. (就是引入一个jquery,到哪里$一下就可以了)Vuex状态管理跟使用传统全局变量的不同之处:1.Vuex...原创 2018-09-10 15:47:09 · 413 阅读 · 0 评论 -
vue-devtools的安装与使用(转)
一.在github上下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools二.解压到本地的某盘三.用你的npm中进入该文件夹下四.依次输:1:npm install (如果在这部报错的话,就改用cnpm install。 cnpm需要安装 安装地址)2:npm run build (这一步一定不要忘了,没...转载 2018-09-07 15:57:57 · 129 阅读 · 0 评论 -
vue 活动倒计时组件
1. 这是倒计时封装好的组件 这里我们命名 countdown.vue<template> <div> <p v-if="msTime.show"> <span v-if="tipShow" class="no-bg">{{tipText}}:</span> &原创 2018-12-05 11:48:44 · 3934 阅读 · 1 评论 -
vscode 识别vue文件
"files.associations": { "*.vue": "vue", "*.wpy": "vue" },setting 的 json 里面配置, 意思是以这两个文件后缀结尾的都定义成vue 文件原创 2019-01-04 14:35:06 · 15407 阅读 · 3 评论 -
一、 Vue.js简介
一、 Vue.js简介 1. Vue.js是什么 **Vue.js**也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 + 是一个构建用户界面的框架 + 是一个轻量级MVVM(Model-View-ViewModel)框架,和angular、react类似,其实就是所谓的数据双向绑定 + 数据驱动+组件化的原创 2018-02-07 01:38:55 · 2290 阅读 · 0 评论