Vue
栗子好好吃
向来心是看客心,奈何人是剧中人
展开
-
javascript --- > [express+ vue2.x + elementUI]登陆的流程梳理
登录界面使用Vue2.x + elementUI实现的登录界面<template> <div class="login-container"> <el-card header="请先登录" class="login-card"> <!-- @submit.native.prevent阻止表单的默认提交行...原创 2020-03-18 18:35:44 · 273 阅读 · 0 评论 -
vue --- > [全家桶] Vuex
1. Vuex 概述1.1 组件之间共享数据的方式父向子传值: v-bind 属性绑定子向父传值: v-on 事件绑定兄弟组件之间共享数据: EventBus$on: 接收数据的那个组件$emit: 发送数据的那个组件1.2 Vuex是什么Vuex: 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享1.3 使用Vuex统一管理状态的好处能够在vu...原创 2020-02-14 16:13:13 · 171 阅读 · 0 评论 -
vue --- > [全家桶]vue-router
1. Vue - routerVue Router是 Vue.js 官方的路由管理器它和Vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发Vue Router包含的功能有:支持HTML5历史模式或hash模式支持嵌套路由支持路由参数支持编程式路由支持命名路由<div id="app"> <router-link to='/use...原创 2020-02-12 13:15:32 · 182 阅读 · 1 评论 -
koa --- > 使用koa-multer和element-ui组件上传头像
文件上传前端代码<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><link rel="stylesheet" ...原创 2019-11-21 16:56:12 · 612 阅读 · 0 评论 -
vue --- > 前端代理发送http请求
后端端口在3000使用jsonwebtoken和koa-jwt生成令牌并返回对’/api/userinfo’端口,先验证令牌是否通过,若通过返回数据const Koa = require('koa');const Router = require('koa-router');// 生成令牌、验证令牌const jwt = require('jsonwebtoken');cons...原创 2019-10-29 10:55:43 · 697 阅读 · 0 评论 -
vue --- > http拦截,登录登出的逻辑设计
准备在src目录下创建一个interceptor.js下面的栗子:如果在localStorage中含有token,则添加一个token头部;interceptor.jsconst axios = require('axios');export default function() { // 设置请求拦截器 axios.interceptors.request.use...原创 2019-10-28 21:44:31 · 237 阅读 · 0 评论 -
vue --- > configureWebpack模拟后台数据
初识使用vue/cli搭建的项目可以在vue.config.js中,模拟一个后台(express写法)vue.config.jsconfigureWebpack: { devServer: { // 模拟后台服务器 express写法 before(app) { app.get('/api/login', function(...原创 2019-10-28 20:49:34 · 1414 阅读 · 1 评论 -
vue --- > 2.0 编译的实现
初识假设html中有如下dom:<div id="app"> <!-- 插值绑定 --> <p>{{name}}</p> <!-- 指令解析 --> <p l-text="name"></p> <p>{{age}}</p> <p>{{doubleA...原创 2019-10-28 12:45:06 · 125 阅读 · 0 评论 -
es6 --- > 使用proxy对数据进行劫持
说明:数据劫持,简单的说就是在对数据进行操作(增删改查)时,触发的函数下面想通过使用以下的形式来使用:let proxy = reactive({ name:'lz' });proxy.name; // 获取proxy.name = '栗子'; // 设置delete proxy.name; // 删除解决方案:proxy函数的2个参数第一个参数: 接收一个对象(...原创 2019-10-24 10:02:03 · 381 阅读 · 0 评论 -
vue --- > 2.0响应式补充
补充:数组的响应式// 对数组的方法进行重写// 1. 不能影响本来的方法// 2. 调用的时候可以找到它let odlArrayPrototype = Array.prototype;let proto = Object.create(odlArrayPrototype); // 继承['push','shift','unshift'].forEach(method =>...原创 2019-10-24 09:24:49 · 98 阅读 · 0 评论 -
vue --- > 2.0数据的响应式的一种实现
初识:实际上是通过Object.defineProperty()方法来实现的talk is cheap, show your codelet obj = {};Object.defineProperty(obj, 'name', { get(){ return document.querySelector('#name').innerHTML; }, set(newVal){...原创 2019-10-22 21:16:02 · 186 阅读 · 0 评论 -
vue --- > 全局配置过滤函数,使用moment函数来格式化时间
效果1YYYY-MM-DD效果2YYYY-MM-DD HH:mm:ss配置注意事项由于时间格式化,在大多数页面中都会用到,因此建议配置在全局中使用moment函数 -> http://momentjs.cn/npm 安装# 命令行cnpm i moment -S在全局中配置// main.jsimport moment from '...原创 2019-09-19 09:31:36 · 1265 阅读 · 0 评论 -
vue --- > mintUI中Swipe(轮播图)的使用
引入// main.js// 导入包import { Swipe, SwipeItem } from 'mint-ui'// 注册Vue.component(Swipe.name, Swipe);Vue.component(SwipeItem.name, SwipeItem);放在需要显示的位置// HomeContainer.vue(首页 -> 组件)<temp...原创 2019-09-16 22:07:12 · 4098 阅读 · 0 评论 -
vue --- > 使用vue-router获取带参数的路由
希望的效果如下:2个路由: 点击如下步骤.使用 router-link 来指定路由路径在router.js中指定 路径的 事件处理函数(对应的组件)创建对应的组件router-link找到一个区别各个列表的属性(id),将其作为参数传递到路由中to是vue-router中用来绑定路由的属性由于需要进行计算(path + id),故需要将to改为 :to// N...原创 2019-09-19 10:21:43 · 1404 阅读 · 0 评论 -
vue --- > vue-router(项目模式的导入)
main.js// main.js// 1.1 导入路由的包import VueRouter from 'vue-router'// 1.2 安装路由Vue.use(VuerRouter)// 1.3 导入自己的router.js模块import router from './router.js'// 1.4 挂载router对象在vm实例上const vm = new ...原创 2019-09-16 21:41:48 · 648 阅读 · 0 评论 -
vue && node --- > 前后端联系的知识梳理
前端、后端联系知识梳理以打开浏览器,访问login为栗打开浏览器,访问localhost:8080/#/loginsrc/router/index.js 会根据 /login 找到对应的Login(src/components/pages/Login.vue)组件, 然后渲染到浏览器当输入用户名和密码,点击登录按钮后根据Login组件中配置的axios请求向后端发送请求.请求的url...原创 2019-09-30 16:12:50 · 241 阅读 · 0 评论 -
webpack --- > 使用vue
// webpack中如何使用 vue:// 1. 安装vue 的包: cnpm i vue -S// 2. 由于在 webpack 中,推荐使用 . vue 这个组件模板文件定义组件, 所以需要安装能解析这种文件的loader cnpm i vue-loader vue-template-compiler -D// 3. 在main.js 中导入 vue的包, import Vue f...原创 2019-09-06 16:38:35 · 132 阅读 · 0 评论 -
vue --- > 全局注册子组件,并导入全局的子组件
假设:需要一个评论的模块comment由于comment在多个页面中可能会复用.于是创建一个comment.vue步骤:创建comment.vue在需要引用的位置使import comment from '../subcomponent/Comment.vue' 导入子组件在Vue实例中使用components属性注册注册的规则: “comment-box” : commen...原创 2019-09-19 14:37:17 · 657 阅读 · 0 评论 -
css --- > 手机端,留言模块的样式
效果如下:代码:说明:用到了mint-ui,需要先安装mt-button的导入: import { Button } from ‘mint-ui’mt-button的使用: Vue.component(Button.name, Button)更多 http://mint-ui.github.io/// comment.vue<template> <div ...原创 2019-09-19 15:22:09 · 663 阅读 · 0 评论 -
node --- > koa、Mongoose、vue联系知识梳理
前端、后端联系知识梳理以打开浏览器,访问login为栗打开浏览器,访问localhost:8080/#/loginsrc/router/index.js 会根据 /login 找到对应的Login(src/components/pages/Login.vue)组件, 然后渲染到浏览器当输入用户名和密码,点击登录按钮后根据Login组件中配置的axios请求向后端发送请求.请求的url...原创 2019-09-29 11:31:05 · 216 阅读 · 0 评论 -
vue --- > 按钮的防重复点击事件
按钮的防重复点击事件:loading属性当loading = true时:按钮会显示一个旋转的圆圈.此时的按钮是无法点击的当loading = false时:按钮重新变为可点击的状态可以通过使用一个变量来控制按钮的可点击性,当提交时,按钮不可点击,提交完毕后,按钮可以点击<van-button :loading="openLoading">提交</van-butto...原创 2019-09-30 16:10:42 · 1621 阅读 · 0 评论 -
vue --- > 子组件监听点击事件,接收父组件参数.实现对应跳转
开始vue中子组件这一块,有点麻烦。不是说它很难,而是它的传送数据方式,以及和各种前端后端路由混在一起时,如果不清晰很容易就迷茫下面假设:路由配置文件为:router.js父组件为 parent.vue , 路径为 ./parent.vue子组件1为 child1.vue, 路径为 ./child1.vue子组件2为 child2.vue, 路径为 ./child2.vue父组件中...原创 2019-09-30 21:08:47 · 1488 阅读 · 0 评论 -
vue --- > 购物车页面
下面我看开始自己写一个购物车的页面.我们希望得到如下的效果:说明:购买数量最小为0购买数量变化时,对应的总价随之变化点击移除操作对应的商品会移除掉,总价随之改变每个商品作为一个list表的一个对象每个对象,包含id、name、price、count等属性index.html (整体代码最后给出)导入依赖(从上往下)// 样式表<link rel="styles...原创 2019-04-12 10:46:03 · 531 阅读 · 0 评论 -
vue --- > ref属性获取dom元素和子组件的方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-09-04 16:55:17 · 14553 阅读 · 0 评论 -
vue --- > 使用component的 :is属性切换标签页
点击对应的标签,下面切换至对应的模板…// 说明<component :is="name"></component> // 相当于把id为name的组件放到对应的位置总体代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-09-03 21:10:38 · 12132 阅读 · 0 评论 -
vue --- > 列表(v-for渲染)的各种神仙动画效果
通过v-for生成的元素,使用transition包裹将只显示第一条数据,此时需要使用transition-group包裹.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...原创 2019-09-03 16:22:23 · 5008 阅读 · 0 评论 -
vue --- > vue中的几个钩子属性
1.创建前:beforeCreate <div id="app">{{name}}</div> <script> let app = new Vue({ el:'#app', data:{ name:31231312 }, beforeCreate(){ ...转载 2019-06-14 17:29:45 · 432 阅读 · 0 评论 -
vue --- > 过滤器、计算、方法、观察属性
过滤器属性:filters:<div id = "app"> {{num}}<br> {{num | toInt}}<br> {{num | toFloor}}<br> {{num | toCeil}}<br></div><script> let vm = new Vu...转载 2019-06-14 16:58:35 · 160 阅读 · 0 评论 -
vue --- > cdn导入,一些基本操作
使用cdn导入vue.并使用vue做一些简单的操作.cdn导入vue<script src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>往dom元素中添加信息<div id="app"> 数据驱动视图:{{name}}</div><script> ...转载 2019-06-14 15:45:56 · 1102 阅读 · 0 评论 -
vue --- > 模块从子组件获取数据
我们希望:点击"+1",总数加1;点击"-1"总数减1. 且数据是来自子组件…首先写html<div id = "app"> <p>总数 {{ total }} </p> <my-component @increase="handleTotal" @reduce="handleTotal"> </div><...原创 2019-04-14 21:44:02 · 489 阅读 · 0 评论 -
vue --- > 从模块从父元素获取数据
vue的精彩之处在于其组件的可复用性.下面谈谈组件(component)如何从父元素获取数据模块引用首先说说,如何引用模块<div id="app"> <my-component ></my-component> </div><script src=“unpkg.com/vue/dist/vue.min.js”> &l...原创 2019-04-12 16:36:32 · 1171 阅读 · 0 评论 -
vue --- > 使用vue在html上显示当前时间
希望如下效果(时间按秒钟更新)导入Vue依赖的CDN<script src="https://unpkg.com/vue/dist/vue.min.js"> </script>创建视图<div id="app">{{date}}</div>Model<script> var app = new Vue({ ...转载 2019-04-11 15:42:10 · 3335 阅读 · 0 评论 -
vue --- >SPA模式的组件
SPA:单页应用(Single Page App),具体好处,百度搜索我们可以想象一个场景,有两个页面,每个页面的头部都有一张 Logo 图片.如果每次都写成原始 HTML 的话,代码就会重复. // 页面1的代码如下: <div class='logo'> <img src='url'> </div> ...转载 2019-03-26 21:20:13 · 1403 阅读 · 0 评论 -
vue --- > 提交表单到服务器
<template><div> <textarea v-model='content'> </textarea> <br/> <input type='button' @click='submit' value='留言' /></div></template><scrip...转载 2019-03-26 20:31:32 · 2149 阅读 · 0 评论 -
vue --- > 基本的表单元素
<template><div> input: <input type='text' v-model='input_value' />, 输入的值: {{input_value}} <hr /> text area: <textarea v-model="textarea_value"></textarea>...转载 2019-03-26 20:02:51 · 263 阅读 · 0 评论 -
vue --- > Vue中的路由跳转问题
import Vue from 'vue'import Router from 'vue-router' // 前2个导入时vue框架自带的import SayHi from '@/components/SayHi' // 这个导入是自己写的位于components下的sayHiVue.use(Router) // 用到了vue的Router模块export default ...转载 2019-03-26 18:44:47 · 217 阅读 · 0 评论 -
vue --- > v-html、v-bind
v-html// 有时候,我们需要展示<strong>,但直接使用下面的语法并不会显示<div id = "app">{{name}}</div><script> let app = new Vue({ el:'#app', data:{ name:'<strong>...转载 2019-06-15 20:15:46 · 1183 阅读 · 0 评论 -
vue --- > v-text、v-show、v-if、v-else
v-text:<div id = "app"> <p v-text="msg"></p></div><script> let app = new Vue({ el:'#app', data:{ msg:'Hello Vue' } })&...转载 2019-06-15 20:43:33 · 351 阅读 · 0 评论 -
vue --- > 动画执行的周期(动画的钩子函数)
如下8个:<transition v-on:before-enter = "beforeEnter" v-on:enter = "enter" v-on:after-enter = "afterEnter" v-on:enter-cancelled = "enterCancelled" v-on:before-leave = "beforeL...原创 2019-09-03 16:01:50 · 603 阅读 · 0 评论 -
vue --- > 使用animate.css实现动画
1.下载animate.cssnpm install --save-dev animate.css// 注意你使用的源 nrm ls(若没有改变可以忽略)2.导入animate.css<link rel="stylesheet" href="../node_modules/animate.css/animate.css">// 注意你的当前文件和node_moudules...原创 2019-09-03 14:21:32 · 237 阅读 · 0 评论