Vue
关注
分享
扫一扫
yukilong
这个作者很懒，什么都没留下…
展开
-
v-if和v-show的用法与区别
vue中有两种常用的显隐方法：v-if和v-show。但是两者有本质区别实现本质方法区别：v-if是动态地向DOM树内添加或者删除DOM标签v-show其实是将标签display设置为none，控制隐藏编译的区别：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件v-show其实就是在控制css性能：v-if不停的销毁和创建...原创 2019-03-20 21:38:07 · 298 阅读 · 0 评论 -
Vuecli3.x与Node.js项目配置前后端连载
全栈开发过程中，前后端分别采用vue-cli脚手架和Node.js开发。项目启动时，分别在两个终端中启动Node.js后台项目，再在另一个终端中启动vue项目，这样做会比较麻烦，因此就需要前后端连载。项目根目录下除了client是前端部分，其余为Node后端部分。两个都有一个package,json文件下面是前后端连载的方式：1.安装concurrently模块一定是在项目根目录下...原创 2019-05-04 17:36:03 · 1397 阅读 · 2 评论 -
高德地图定位
高德地图开放平台，获取key获取key值后，将其在index.html中引入<script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.13&key=3902ac46d78e575ee30697e17fc419fc"></script>然后来到App.vue下，即根组...原创 2019-04-14 16:02:38 · 1478 阅读 · 0 评论 -
跨域问题之手机号码登录验证
1. 构建登录组件router.js:设置路由import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const router = new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { ...原创 2019-04-13 20:20:57 · 604 阅读 · 1 评论 -
控制Footer的显示隐藏
有些路由组件不需要Footer，因此需要隐藏router/index.jsexport default new VueRouter({ routes: [ { path: '/', redirect: '/msite' }, { path: '/msite', component: Msite...原创 2019-03-28 10:58:45 · 1863 阅读 · 0 评论 -
使用Swiper实现轮播图效果
1，先下载插件 npm install --save swiper2，HTML内容<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div c...原创 2019-03-28 09:18:39 · 1505 阅读 · 0 评论 -
vue中组件间通信方式-slot
有时候，header或footer使用同一个组件，那么就需要用slot来从父组件向子组件传递“标签数据”子组件：Child.vue<template> <div> <slot name="xxx">不确定的标签结构 1</slot> <div>组件确定的标签结构</div> <s...原创 2019-03-28 09:02:06 · 581 阅读 · 0 评论 -
获取用户的OpenID
OpenID 是一个以用户为中心的数字身份识别框架，它具有开放、分散性。OpenID 的创建基于这样一个概念：我们可以通过 URI （又叫 URL 或网站地址）来认证一个网站的唯一身份，同理，我们也可以通过这种方式来作为用户的身份认证。每次用户登录小程序生成的OpenID都是不一样的。给用户添加不同的标识，然后请求不同的数据，因而向用户展示的页面就不同，这唯一的标识就是OpenID。小程序登录...原创 2019-03-31 22:25:22 · 518 阅读 · 0 评论 -
获取用户信息并存储到vuex中
在pages/index/index.vue中<template> <div class="container"> <div class="login"> <img src="/static/imgs/guide_bg.jpg" alt=""> <div class="learn"> ...原创 2019-03-31 15:35:57 · 4453 阅读 · 0 评论 -
当vue路由变化时，改变导航栏的样式的方法
当我们需要做一个类似于顶部或者底部导航栏公共组件的时候，单击某个导航栏按钮，跳转到另一个组件，并且改变导航栏的样式。1) 通过编程式导航实现路由的切换显示($router)相关API:this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)...原创 2019-03-26 22:10:06 · 3585 阅读 · 0 评论 -
vscode自动格式化stylus设置
首先，安装stylus依赖包npm install stylus stylus-loader --save-dev确保自动格式化时stylus的风格不发生变化，只需要对vscode进行设置，在vscode的插件选项中搜索 "stylus Supremacy” 安装，然后修改settings.json文件:修改过后就不会改变stylus的格式了！...原创 2019-03-26 16:27:06 · 1775 阅读 · 0 评论 -
v-router的初步认识与学习
一般路由1，说明官方提供的用来实现SPA的vue插件 github: https://github.com/vuejs/vue-router 中文文档: http://router.vuejs.org/zh-cn/ 下载: npm install vue-router --save2，相关API说明用于创建路由器的构建函数VueRouter(): new VueRoute...原创 2019-03-25 16:42:27 · 338 阅读 · 0 评论 -
vue完成列表的搜索和排序
vue的一般搜索：有以下两种方法：(1)在methods属性中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...原创 2019-03-21 11:15:24 · 1507 阅读 · 0 评论 -
v-for遍历数组完成列表渲染需要注意的问题
<!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-03-20 22:47:33 · 1718 阅读 · 0 评论 -
使用Heroku部署上线Vue.js项目
前面有一篇讲述了在heroku上部署接口api(https://blog.csdn.net/qq_40885461/article/details/89145746)，部署Vue.js和这个有些许不同安装Heroku我们通过使用 npm 来全局安装 herokunpm install --global heroku安装成功后，我们使用以下命令查看版本号heroku --ve...原创 2019-05-26 11:02:57 · 1173 阅读 · 0 评论