vue框架
关注
分享
扫一扫
UIEngineer
玩中学！
展开
-
vue组件间传值
1.父传子案例2.子传父案例3.中央事件总线案例原创 2019-05-21 12:27:37 · 195 阅读 · 0 评论 -
Nuxt的路由动画效果
路由的动画效果，也叫作页面的更换效果。Nuxt.js提动两种方法为路由提动动画效果，一种是全局的，一种是针对单独页面制作。全局路由动画 全局动画默认使用page进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个main.css文件。/assets/css/main.css.page-enter-active,.p...原创 2018-08-28 11:56:44 · 3395 阅读 · 0 评论 -
Nuxt目录结构
Nuxt自动生成了项目目录，我们先来一个一个介绍一下。.nuxt // Nuxt自动生成，临时的用于编辑的文件，buildassets // 用于组织未编译的静态资源如LESS、SASS或JavaScriptcomponents // 用于自己编写的Vue组件，比如波动组件、日历组件、分页组件layouts // 布局目录，用于组织应用的布局组件，不可更改middleware...原创 2018-08-23 12:31:16 · 4787 阅读 · 0 评论 -
Nuxt环境搭建和Hello World
nuxt.js安装在使用npm前你需要安装node到系统中 1.用npm来安装vue-cli这个框架，如果你已经安装过了，可以省略这这步。npm install vue-cli -g这个根据你的网络环境不同，安装的速度不仅相同，如果你的网络环境实在不好，可以考虑使用cnpm来进行安装。（在实际开发中我会尽量避免使用cnpm来进行安装，因为会出现一些未知的错误。）安装完成后可以用v...原创 2018-08-20 12:18:13 · 1177 阅读 · 0 评论 -
Nuxt.js免费视频教程 开启SSR渲染(00-介绍)
Nuxt.js简单的说是Vue.js的通用框架，最常用的就是用来作SSR(服务器渲染)。再直白点说，就是Vue.js原来是开发SPA（单页应用）的，但是随着技术的普及。很多人想用Vue开发多页应用，并在服务端完成渲染。这时候就出现了Nuxt.js这个框架，它简化了SSR的开发难度。还可以直接用命令把我们制作的vue项目生成为静态html。那服务端渲染到底有什么好处哪？ 最主要的原因是SPA单...原创 2018-08-20 12:06:44 · 2709 阅读 · 0 评论 -
Nuxt的动态路由和参数校验
其实动态路由就是带参数的路由。比如我们现在新闻模块下面有很多新闻详情页，这时候就需要动态路由的帮助了。新闻详细页面 我们在news文件夹下面新建了_id.vue的文件，以下划线为前缀的Vue文件就是动态路由，然后在文件里边有$route.params.id来接收参数。/pages/news/_id.vue<template> <div> ...原创 2018-08-27 12:25:39 · 8672 阅读 · 3 评论 -
Nuxt的路由配置和参数传递
学习前端框架都要学习路由机制，因为路由可以体现我们的业务逻辑，把模块串联起来，让程序换发光彩。那简单的说路由就是我们的跳转机制，也可以简单理解成链接跳转。Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。简单路由Demo 我们现在在根目录的pages文件下新建两个文件夹，about和news(模仿关于我们和新闻的功能模块)在about文件夹下新建index.vu...原创 2018-08-27 12:11:50 · 18147 阅读 · 1 评论 -
audio自动播放时获取duration为NaN
audio的音频路径写死时没有问题<audio id="audio" autoplay> <source src="../aa.mp3" type="audio/mpeg"/></audio>当路径是从后台获取，动态加上的时候，播放的时候获取不到duration<audio id="audio" aut原创 2018-07-14 16:30:07 · 7006 阅读 · 1 评论 -
axios的post请求
需求： 要获取用户离开当前页面时的音乐播放时长，然后post给后台/* 数据序列化 */function transformRequest(data){ var ret = ''; for(var it in data){ ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it])...原创 2018-07-14 13:51:27 · 1162 阅读 · 0 评论 -
Nuxt的默认模板和默认布局
在开发应用时，经常会用到一些公用的元素，比如网页的标题是一样的，每个页面都是一模一样的标题。这时候我们有两种方法，第一种方法是作一个公用的组件出来，第二种方法是修改默认模板。这两种方法各有利弊，比如公用组件更加灵活，但是每次都需要自己手动引入；模板比较方便，但是只能每个页面都引入。默认模板 Nuxt为我们提供了超简单的默认模板定制方法，只要在根目录下创建一个app.html就可以实现了。现在...原创 2018-08-28 12:10:52 · 7588 阅读 · 1 评论 -
Nuxt.js 静态资源和打包
直接引入图片 我们在网上任意下载一个图片，放到项目中的static文件夹下面，然后可以使用下面的引入方法进行引用。&lt;div &lt;img src="~static/logo.png"&gt;&lt;/div&gt;...原创 2018-08-31 11:51:21 · 14428 阅读 · 0 评论 -
vue addRoutes实现动态权限路由菜单的示例
重点：addRoutes方法添加路由1、首先在本地配置好固定不变的路由地址，例如登录，404这些页面，如下:在这里插入代码片原创 2019-04-29 12:42:51 · 1982 阅读 · 0 评论 -
在vue中使用eslint，配合vscode
不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，个人推荐 eslint+vscode 来写 vue，绝对有种飞一般的感觉。每次保存，vscode就能标红不符合eslint规则的地方，同时还会做一些简单的自我修正。安装步骤如下：首先安装eslint插件安装并配置完成 ESLint 后，我们继续回到 ...原创 2019-04-26 12:06:30 · 720 阅读 · 0 评论 -
vuex简单的购物车功能
https://www.cnblogs.com/huangmin1992/p/8717003.html原创 2019-03-11 12:18:55 · 562 阅读 · 0 评论 -
vue-cli 使用 Layui 入门
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。...原创 2019-02-28 12:08:24 · 5434 阅读 · 1 评论 -
vue验证码组件
代码如下：<template> <div class="join_formitem"> <label class="enquiry">验证码<span>:</span></label> <div class="captcha&quo原创 2018-09-04 12:19:52 · 1966 阅读 · 0 评论 -
Nuxt.js anyncData方法获取数据
在项目中需要在初始化页面前先得到数据，也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法，增加了anyncData。从名字上就很好理解，这是一个异步的方法。创建远程数据 在这里制作一些假的远程数据，我选择的网站是myjson.com，它是一个json的简单仓库，学习使用是非常适合的。我们打开网站，在对话框中输入JSON代码，这个代码可以自己随意输入哦。{ ...原创 2018-08-29 12:26:44 · 5089 阅读 · 0 评论 -
Nuxt的错误页面和个性meta设置
当用户输入路由错误的时候，我们需要给他一个明确的指引，所以说在 应用程序开发中404页面时必不可少的。Nuxt.js支持直接再默认布局文件夹里建立错误页面。建立错误页面 在根目录下的layouts文件夹下建立一个error.vue文件，它相当于一个显示应用错误的组件。&lt;template&gt; &lt;div&gt; &lt;h2 v-if="error...原创 2018-08-29 12:02:56 · 12197 阅读 · 3 评论 -
Nuxt常用配置项
配置IP和端口开发中经常会遇到端口被占用或者指定IP的情况。我们需要在根目录下的package.json里对config项进行配置。比如现在我们想把IP配置成127.0.0.1，端口设置1818package.json{ "name": "delnuxt", "version": "1.0.0", "description": "Nuxt.js project"原创 2018-08-24 12:12:46 · 7340 阅读 · 0 评论 -
\'@/\'路径和\'./\'路径是什么意思
在vue项目中，我们场遇到以下路径引用的方式：@import './common/var.scss'@import '../../scss/common/var'@import '~@/scss/common/var'其中./表示当前目录下../表示父级目录下@/是webpack设置的路径别名，代表什么路径，要看webpack的build文件夹下webpack.bas...原创 2018-07-14 13:25:58 · 6628 阅读 · 0 评论 -
vue获取原始dom节点
需求：需要获取dom节点，但是不能使用id获取dom元素。 vue里提供了ref属性获取dom节点。 在nextTick函数回调后就可以更新dom了this.$nextTick(function(){ this.$refs.list})...原创 2018-06-13 12:25:17 · 3875 阅读 · 0 评论 -
vue部署服务器以及解决部署到apache路由出现404
Vue-cli部署上线Vue 是一个javascript的前端框架，注定了它是运行在浏览器里的，对服务器本地没有任何要求，只要一个静态文件服务器能通过http访问到其资源文件就足矣！无论你是用apache ,ngnix 就算你要用node 自己实现一个静态文件服务器，也用不了多少行代码。 npm run dev 是用来在本地开发的时候做调试用的，vue开发的是前端的东西，不是nodejs 服...转载 2018-05-30 12:16:40 · 3839 阅读 · 0 评论 -
vue基础案例5 - 变换布局
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"翻译 2017-12-20 20:48:17 · 1357 阅读 · 0 评论 -
vue基础案例4 - 即时搜索
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"翻译 2017-12-19 22:34:26 · 882 阅读 · 0 评论 -
vue.js组件的重要选项
1.watch(侦听数据a变化)watch:{ 'a' : function(val,oldVal){ console.log(val,oldVal); }}原创 2017-10-23 21:05:30 · 260 阅读 · 0 评论 -
vue.js常见功能插件罗列
1.vue-validator:表单验证的组件 2.vue-devtools:chrome的开发者工具 3.vue-router:路由 4.vue-cli:脚手架工具 5.vue-touch:移动端开发使用的工具 6.vue-resource:实现ajax原创 2017-10-29 14:25:52 · 590 阅读 · 0 评论 -
vue.js - 子向父组件传参(下)
1、自定义事件方法一： Vue实例实现了一个自定义事件接口，用于在组件树中通信。这个事件系统独立于原生DOM事件，用法也不同。每个Vue实例都是一个事件触发器：使用$on()监听事件使用$emit()在它上面触发事件使用$dispatch()派发事件，事件沿着父链冒泡使用$broadcast广播事件，事件向下传导给所有的后代 注意：不同于DOM事件，Vue事件在冒泡过程中第一次触发回调之原创 2017-10-29 09:53:29 · 1742 阅读 · 2 评论 -
vue.js - 父向子组件传参(上)
1.新建componentA.vue组件，代码如下：store.js代码如下：const STORAGE_KEY = 'todos-vue.js'export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items)原创 2017-10-29 09:34:04 · 1344 阅读 · 0 评论 -
vue.js - todolist实现
案例知识点： 1.vue.js基础知识 2.HTML5 本地存储localstoragestore.js代码const STORAGE_KEY = 'todos-vue.js'export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }原创 2017-10-29 09:11:22 · 425 阅读 · 0 评论 -
vue如何划分组件
1.功能模块 - select，pagenation…. 2.页面区域 - header,footer,sidebar….原创 2017-10-28 08:44:02 · 1184 阅读 · 0 评论 -
vue.js移动端从一个购物车入门vuex环境搭建
1.什么是vuex？ 简单来说就是集中管理所有的状态。2.涉及到几个组件对于详情页面，需要判断当前点击的电影是否已加入购物车，如果goodsList中已存在，则不再加入；对于底部导航，当goodsList数量>0时需要显示数字购物车组件就不用说了，基本所有的状态都需要这三个组件都要用到购物车列表goodsList3.如何使用？首先安装vue-clicnpm install -g vue原创 2017-12-14 20:21:31 · 1133 阅读 · 0 评论 -
vue基础案例1 - 导航菜单
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"翻译 2017-12-14 20:55:21 · 3113 阅读 · 0 评论 -
Vue.js-几种请求方式
1.resource请求cnpm install vue-resource --save import VueResource from 'vue-resource'Vue.use(VueResource)this.$http.get("")2.axios 请求cnpm install axios --save axios.defaults.baseURL = "根地址"...原创 2018-05-28 12:32:31 · 8080 阅读 · 3 评论 -
vue——项目优化，缩短首屏加载时间
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开...原创 2018-05-28 12:24:10 · 13824 阅读 · 0 评论 -
element-ui中select组件绑定值改变，触发change事件
1.安装vuecli脚手架 2.终端输入cnpm i element-ui -S安装element-ui 3.按需引入select组件 在main.js中写入如下代码/* 导入第三方库开始 */import 'element-ui/lib/theme-chalk/index.css';// 按需加载Select组件import {Select} from 'elem...原创 2018-05-12 09:23:18 · 85897 阅读 · 0 评论 -
vue2.5入门 - vue-cli的使用
1.vue-cli的简介与使用 全局安装vue-clicnpm install --global vue-cli创建一个基于webpack的模板目录vue init webpack todolist2.使用vue-cli开发todolist main.js// The Vue build version to load with the `import` command// (runt原创 2018-04-22 22:05:47 · 1567 阅读 · 0 评论 -
vue2.5入门 - todolist功能开发
1.todolist功能<!doctype html><html lang="en"><head><meta charset="utf-8"><title>TodoList</title><script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script></head><body> <div id="root">原创 2018-04-22 20:28:01 · 231 阅读 · 0 评论 -
vue2.5入门 - 基础语法
1.vue基本介绍 三大主流前端框架：Angular、React、Vue2.基础知识->案例实战->TodoList->Vue-cli->TodoList3.创建第一个Vue实例html lang="en">head>meta charset="utf-8">title>Vue入门title>script src="https://cdn.bootcss.com原创 2018-04-22 19:38:03 · 580 阅读 · 0 评论 -
vue基础案例3 - 提交表单
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"转载 2017-12-17 09:43:38 · 706 阅读 · 0 评论 -
vue基础案例2 - 内在编辑器
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"翻译 2017-12-16 09:31:51 · 397 阅读 · 0 评论