"VUEJS"栏目下的所有文章

vuejs2中获取dom的方法

2017/04/08VUEJS 标签:0

之前我还未学习到ref属性的时候,使用vue要获取一个dom元素都是使用原生JavaScript中的document.getElementById等方法进行获取DOM元素,但是这种原生JS的方法在VUE中使用不可取,经常会出现问题,比如无法找到dom元素等等一系列的问题,之前我写的一个音乐播放器就是使用document.getElementById,在调试的时候总是出错,今天终于接触到ref属性了,感觉ref好强大。

官方ref解释

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例: 阅读更多

使用VUE2制作音乐播放器

研究了2天的成果终于得到回报了,播放器已经制作完成,但还有待于完善。我总是离不开jQuery的DOM操作,刚开始学习VUE,还是会经常使用到DOM操作。因此写出来的代码还是有很多缺点,等待往后学习的差不多了,我会再改进的。
做播放器的想法来源于之前本人做的web app《vuejs2 + wp-rest-api开发web app》此文章的灵感。因此再献上一个music player来温习下vue。

一、效果

GIF动图有3M多,如果没有显示出来,请再等等

vue-player播放器

vue-player播放器


看到了吧,自己的一点小创意,搞了个猪头上去。

二、相关代码

本程序中仅使用了vue的ajax框架vue-resource,未使用到vue-router,因此再安装vue-cli的时候,可以略过vue-router,本程序仅有一个组件,即只有一个vue文件,使用了css预处理语言stylus。使用的json数据为本站相关php代码生成的(仅为了演示),如果你是在本地搭建环境,json也可以写在本地。 阅读更多

vuejs2 + wp-rest-api开发web app

2017/03/16VUEJS 标签:0

之前我写了一篇《利用Cordova,jqurey与wp-rest-api制作一个属于自己博客的移动APP》,使用的是jQuery mobile的方式进行web app的开发,今天我就说一下使用vuejs 与 wp-reset-api开发一个web app的方法。
先看看做好以后的效果吧:

一、首先安装nodejs,安装方法请自行去官方网站查看
二、安装vue-cli
1、直接打开nodejs的命令窗口输入以下命令:
npm install -g vue-cli //全局安装vue-cli

vue init webpack egtch //生成项目名为egtch的模板,这里的项目名egtch随你自己写

输入这个目录后会出现如下所示

vue-cli创建项目

vue-cli创建项目


阅读更多

vue-cli build后访问出现空白的解决办法

2017/03/15VUEJS 标签:0

最近使用vue-cli做了个小项目,但是在build的时候出现了问题,build后,访问尽然是空白的,并且还提示路径错误等问题。最终在“简书”上找到了解决的办法。
首先打开config目录下index.js,修改build里assetsPublicPath: '/',为assetsPublicPath: './',再次build能够正确显示
代码如下: 阅读更多

VUE开发中遇到Syntax Error: Unexpected token, expected ,

2017/03/06VUEJS 标签:0

Syntax Error: Unexpected token, expected ,简单的意思就是语法错误,当我查看自己的代码的时候并没有发现有什么问题,代码如下:

<script>
export default {
  const MAX = 5
}
</script>

阅读更多

1

share

AD