vue
vue开发
水痕01
暂停更新博客
展开
-
使用docker-compose部署一个前端项目
1、在项目的根目录下创建一个。2、根目录下创建一个。3、根目录下创建一个。4、根目录下创建一个。原创 2022-08-01 11:11:28 · 1869 阅读 · 0 评论 -
keep-alive在vue中的使用
一、keep-alive缓存状态数据1、关于在组件中的使用,参考文档,文档地址2、在路由中的使用<template> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view v-slot="{C原创 2021-09-02 09:32:05 · 230 阅读 · 0 评论 -
vue项目中引入高德地图
1、最终的效果图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7tDhdbva-1629082364076)(images/image-20210816080301246.png)]2、高德地图上注册自己账号并且创建属于自己的key3、在vue中安装依赖包npm install @amap/amap-jsapi-loader4、在main.js中引入import AMapLoader from '@amap/amap-jsapi-loader'..原创 2021-08-16 10:53:45 · 1495 阅读 · 0 评论 -
关于uni-app的cloud的使用
uni-app的cloud其实就是整合了阿里和腾讯云的serverless云开发,本文就不去具体介绍云开发的过程,仅仅是简单的记录下在uni-app中使用自带的cloud开发的过程一、环境搭建1、使用HBuilder创建一个项目并且启动云开发2、创建的项目点击mainfest.json中是否有AppId(注意要先登录)3、给当前的项目创建一个云服务空间4、项目和云空间关联起来5、项目中创建一个云函数创建云函数目录创建云函数上传和部署二原创 2021-02-09 11:39:28 · 2467 阅读 · 0 评论 -
vue项目使用typescript开发
一、手动配置的方式传送门二、使用别人已经配置好的模板传送门三、直接使用别的模板来构建项目1、构建项目vue init SimonZhangITer/vue-typescript-template 项目名称2、基本使用<template> <div> <div>{{info}}</div> </di...原创 2018-08-17 17:41:11 · 4097 阅读 · 0 评论 -
vue-rx的初步使用
一、各文档介绍1、rxjs官网2、vue-rxjs地址二、环境搭建1、使用vue-cli构建一个项目2、安装vue-rx的依赖包yarn add rxjsyarn add rxjs-compatyarn add vue-rx3、在src/main.js中配置使用rxjs// 使用vueRximport VueRx from 'vue-rx';import...原创 2018-08-10 12:32:44 · 7224 阅读 · 1 评论 -
vue-router的总结
vue-router中文官网一、基本配置1、安装npm install vue-router2、项目中基本配置import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)3、设置路由钩子函数// 路由配置const router = new VueRouter({ ...原创 2018-06-08 22:41:26 · 530 阅读 · 0 评论 -
vue中子组件修改父组件数据
一、关于vue中watch的认识 我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候1、常见的使用场景...watch:{ value(val) { console.log(val); this.visible = val; }}...2、如果要一开始就执行...watch: {...原创 2018-06-13 15:50:27 · 3176 阅读 · 0 评论 -
vue项目实战中常见的数据通信方式
一、父组件传递数据到子组件中(属性传递)1、父组件&amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;child01 :names=&quot;names&quot; v-if=&quot;isLoading&quot;/&amp;gt; &amp;lt;原创 2018-05-15 18:30:52 · 976 阅读 · 0 评论 -
vue项目中使用jsx语法
vue项目中使用jsx语法1、官方文档传送门2、github上插件传送门一、环境搭建步骤1、使用vue-cli构建一个项目2、安装依赖包yarn add babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env...原创 2018-05-19 15:10:01 · 7296 阅读 · 0 评论 -
vue项目持久化存储数据
方式一、使用localStorage在数据存储1、要在浏览器刷新的时候重新存储起来if (window.localStorage.getItem(authToken)) {store.commit(types.SETLOANNUMBER, window.localStorage.getItem('loanNumber'));}方式二、使用vue-cookie插件来做存储...原创 2018-09-04 10:31:55 · 8946 阅读 · 0 评论 -
手把手教你发布一个vue组件到npm上
最近公司项目比较多,不同的项目中公用的组件,如何避免因为一个需求的变动,造成所有项目都要拿过来修改,我们想到把公共的部分抽取出来做为一个组件,常见的组件模式有:直接存放到项目中(需要在不同的项目中拷贝)发布到npm上公用的模块,本文章介绍登录组件如何从0开始创建一个vue组件发布到npm上本项目案例一、依赖环境1、node环境2、vue-cli的脚手架二、使用vue-...原创 2018-10-15 15:31:27 · 2030 阅读 · 0 评论 -
基于vue3-admin搭建起来的后端管理平台框架(骨架)
一、运行后效果1、登录页面2、主页面二、关于多环境配置项目中配置了dev、production、fat、uat四个环境,每个环境配置了3个基础的url地址,方便现代后端微服务开发模式(可能接口与图片/文件存储的api地址不一样)三、本项目使用vue-cookie作为存储用户信息用于登录鉴权四、项目下载地址,大神方便给个✨✨,我们共同成长...原创 2019-02-19 12:32:05 · 4780 阅读 · 2 评论 -
iview表格中使用DropdownMenu组件
记一次在vue项目中在iview表格组件中使用DropdownMenu组件一、一般写法(网上很多,可以找到)二、在vue中使用jsx语法来写1、安装包包地址npm install babel-plugin-transform-vue-jsx2、在项目下的.babelrc配置插件{ "presets": ["env"], "plugins": [ "tran...原创 2019-05-21 10:56:21 · 4346 阅读 · 0 评论 -
vuex 中插件的编写案例
一、官方文档1、第一步const myPlugin = store => { // 当 store 初始化后调用 store.subscribe((mutation, state) => { // 每次 mutation 之后调用 // mutation 的格式为 { type, payload } });};2、第二步const s...原创 2019-06-10 14:53:26 · 507 阅读 · 0 评论 -
使用@vue/cli开发一个typescript通用组件并发布到npm上
一、组件分类的介绍1、通用组件抽象的UI组件,无具体的实现使用需要加入具体的业务代码具有高通用性和可扩展性2、业务组件平时我们项目中使用的组件二、vue中组件的认识传统的前端开发中是没组件的概念,自从进入了vue、react、angular的时代,才有了组件的说法,具体我们说的组件说的是什么呢?就我个人对组件的理解:我们说的组件可以理解为一个函数或者说的是类...原创 2019-09-18 13:35:02 · 1141 阅读 · 0 评论 -
vue组件之间的多种通讯方式
一、父组件传递参数给子组件1、父组件传递参数<template> <div> <Son1 :name="name" :age="20" :bookList="['三国演义', '西游记']" :details="{'name': '张三', address: '广东深圳'}" :isAct...原创 2019-09-19 10:18:37 · 355 阅读 · 1 评论 -
vue组件中各种传值的方法
一、直接使用属性传递的方式传递父组件中传递的参数可以有很多个,如果子组件中未使用props接收的话,会逐级的往下面传递并且会挂载在当时组件的dom上,见下图1、父组件给儿子组件传递参数<template> <Son2 :name="'哈哈'" :age="20" :bookList="['三国演义', '西游记']" :detai...原创 2019-09-19 10:21:21 · 763 阅读 · 0 评论 -
vue项目中引入echarts图表
一、 在vue项目开发中使用echarts,推荐使用vue-echarts官方地址二、vue项目集成vue-echarts1、使用vue-cli创建一个项目2、安装依赖包yarn add vue-echarts3、在组件中使用&lt;template&gt; &lt;div&gt; &lt;chart :options="chartPieData" auto-原创 2018-05-19 12:27:49 · 9547 阅读 · 0 评论 -
vue使用nuxt实现服务器端渲染
本章介绍目前流行的vue的服务器端渲染,采用第三方框架nuxt中文文档来做vue的服务器端渲染一、构建一个项目的基本步骤1、创建一个空的目录存放项目2、初始化项目npm init --yes3、安装nuxt的依赖包npm install --save nuxt4、配置几个启动、打包命令及配置端口**package.json**..."config": {"nuxt": { "ho原创 2017-12-22 21:21:08 · 4467 阅读 · 0 评论 -
vue中路由切换动画效果(transition)
关于VUE中路由之间切换效果使用ransition来实现一、现在要实现一个左右切换的效果1、在整个项目的路由中写上<template> <div id="app"> <FooterNav :isShowNav="isShowNav"></FooterNav> <transition name="transitionRouter">原创 2017-10-12 11:19:32 · 11346 阅读 · 0 评论 -
第一章:vue2中常见的指令
一、关于vue中指令的介绍二、关于属性绑定的指令1、v-bind的使用(绑定html属性的标签)<div id="app"> <p>关于v-bind的使用</p> <p v-bind:title="title">我是标签</p> <a v-bind:href="baidu">百度</a> <img v-bind:src="src" alt=""> <div原创 2017-08-10 20:44:46 · 981 阅读 · 1 评论 -
第二章:vue2组件的生命周期钩子函数
一、生命周期钩子函数 对于前端的vue,react,angular的几大框架来说,说到生命周期钩子函数可能会想到react,vue中也有生命周期钩子函数二、生命周期钩子函数1、beforeCreate组件实例刚创建,在计算属性之前(比如计算data属性)2、created组件实例创建完成,属性已经绑定,但是DOM还未生成($el属性还不存在)3、beforeMount挂载之前4、mou原创 2017-08-10 21:36:41 · 820 阅读 · 0 评论 -
第四章:vue2中使用过滤器
一、过滤器的认识 过滤器其实就是一个函数,把当前的值传递到函数里面,加工处理后,返回到当前,过滤器使用|(管道符),默认传递参数,如果还要传递参数就要手动传递二、定义过滤器1、在vue1中系统提供了几个过滤器,vue2中全部取消了,需要自己定义2、定义过滤器,过滤器定义在filters里面var app = new Vue({ el: '#app', data: {原创 2017-08-11 22:39:59 · 1673 阅读 · 0 评论 -
第三章:vue2中关于数据的处理
一、关于vue借鉴angular的思想,由数据驱动,然后显示到视图层中,一般都是修改数据来改变视图,一般操作数据主要是操作数组或者对象二、常见的数组的处理1、array.filter((currentVal,index,array)=>(),[thisArg]) 解析:filer()中第一个参数是一个回调函数,第二个参数是可选的改变当时的this,其返回依然是一个数组2、array.map((原创 2017-08-11 22:38:54 · 739 阅读 · 0 评论 -
第十章:vue2中axios请求服务端数据
中文文档一、关于axios的安装1、利用npm安装npm install axios --save2、利用bower安装bower install axios --save3、直接利用cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>二、关于get请求数据1、直接请求数据axios.get('/st原创 2017-08-19 22:12:08 · 13647 阅读 · 2 评论 -
第五章:利用计算属性写一个购物车案例
一、项目运行效果1、点击增加与减少小计会变化2、商品前面复选框勾选后会计算总金额二、具体代码1、html代码<div id="app"> <ul> <li v-for="good of goods"> <input type="checkbox" @click="checkbox(good)" /> <span>商品名原创 2017-08-15 22:15:00 · 1678 阅读 · 0 评论 -
第六章:vue2组件及组件间通信
一、组件的介绍 现代前端技术都是由组件构建成一个大型项目,最开始使用组件构建项目的可能是react,之后angular2,vue都使用组件构建大型项目二、创建组件的几种方式1、全局创建组件Vue.component('component2', { template: '<h1>我是组件2</h1>'})2、局部创建组件var app = new Vue({ el: '#a原创 2017-08-15 22:16:16 · 880 阅读 · 0 评论 -
第七章:vue2中创建自定义指令
一、指令的认识 之前介绍过vue中内置指令,当内置指令不能满足我们的需求的时候就要自己创建指令二、指令的方式与使用1、创建局部指令var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 mydir1: {原创 2017-08-15 22:17:40 · 937 阅读 · 0 评论 -
第八章:vue2中render与ref的使用
一、render的作用 在react开发中render遇到的可能会比较多,在vue中render的功能与react中有点类似,都是渲染模板(组件)的作用1、运行效果2、具体代码// 创建一个组件const App = { template: ` <div> <h1>我的App组件</h1> </div> `}var原创 2017-08-15 22:33:37 · 5672 阅读 · 0 评论 -
第十一章:关于VUEX的详解
请先阅读官方文档文档地址一、什么是vuex1、根据官方介绍:Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。2、直白点vuex就是专门为vue项目开发中设置全局变量的一种方式,方便不同组件之间的通讯,进行数据传输二、几个重要的概念1、state一种状态一种容器,存放项目中需要定义全部的全局原创 2017-10-05 16:29:48 · 1235 阅读 · 0 评论 -
vue项目开发中better-scroll在移动端开发案例
本文章仅仅是对日常项目开发移动端常见的2个场景(横屏与竖屏)使用,更多知识点请参考官网文档一、手机端全屏滚动1、效果图2、具体代码自己看了<template> <!--定义外层--> <div class="wrapper" ref="wrapper"> <!--定义需要滚动的内容区域--> <ul class="content">原创 2017-10-07 20:00:22 · 5859 阅读 · 0 评论 -
VUE项目开发中使用mixins
一、mixins(混入)的认识 请参考官方文档二、mixins的使用 个人理解mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改1、在assets文件夹下创建一个js文件// 创建一个需要混入的对象 export const mixinTest1 = { created() { this.hello(); },原创 2017-10-07 13:46:28 · 28114 阅读 · 0 评论 -
使用VUE-CLI构建一个项目基本的配置
一、开发环境1、window10电脑系统2、安装了node及npm install --global vue-cli二、一个VUE工程的基本配置1、vue init webpack 项目名称2、安装scss的loader包(注意不需要去webpack中配置)npm install node-sass --save-devnpm install sass-loader --save-dev原创 2017-10-07 13:25:41 · 812 阅读 · 0 评论 -
vue中键盘事件的处理
一、常见的键盘事件1、keydown键盘按下2、keyup键盘抬起 不错说明:如果要确定用户按下是哪个键盘需要使用keyCode===?来确认键盘二、在vue中键盘事件一般的使用1、在模板中定义事件名称,并传递$event作为参数<input type="text" placeholder="请输入书名" ref="inputBook" @keydown="submit($event)"/原创 2017-10-04 21:37:06 · 12322 阅读 · 0 评论 -
vue实现一个tab切换
本节案例利用vue制作一个tab切换效果1、效果图2、基本的页面代码<div class="hello"> <div class="btn-group"> <button v-for="(item,index) in btn" v-bind:class="{active:(indexs==index)}" v-on:click="a(index)" :key="index原创 2017-10-12 19:11:06 · 5123 阅读 · 0 评论 -
json-server本地模拟数据工具的使用
现在前后端分离试开发,前端请求后端数据接口,但是有时候后端的接口还没写好,一般我们想到的方法是利用mockjs或者搭建一个前端服务器来返回数据,现在介绍一个插件json-server可以模拟本地数据1、安装npm install json-server -g2、创建一个本地数据data.json{ "pagelist":[ { "registerNu原创 2017-11-01 14:19:29 · 1725 阅读 · 0 评论 -
VUE中solt内容插槽与ng4中投影的使用
一、在VUE中slot的认识 表示父组件分发内容的插槽,父组件中定义这个后,可以直接在子组件中往里面填充内容1、一个父组件就定义一个slot<div class="page"> <!-- 定义一个分发内容的插槽 --> <slot></slot></div>2、父组件使用<Page> <h3>随便定义的</h3></Page>3、如果定义多个插槽的话就要单独取名字原创 2017-10-25 13:39:35 · 1121 阅读 · 0 评论 -
第九章:vue2中路由的使用
vue适合做大型单页面项目,利用vue-cli构建项目的时候会提示是否安装路由模块参考中文文档一、vue中路由的使用1、定义组件<template> <div class="hello"> <h1 @click="info" :class="color">{{ msg }}</h1> </div></template><script>export default { na原创 2017-08-16 22:32:03 · 21575 阅读 · 2 评论