JavaScript

Vue.js 2.X 实践

项目脚手架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
vue init webpack vue-music
? Project name vue-music
? Project description Music Player
? Author luisedware <luisedware@qq.com>
? Vue build runtime
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
cd vue-music
npm install
npm run dev

stylus

Stylus - 富有表现力的、动态的、健壮的CSS，安装 Stylus

1
2
npm install --save-dev stylus
npm install --save-dev stylus-loader

重写 import 路径别名

在 build/webpack.base.conf.js 文件下的 resolve 数组中，可以重写目录路径别名:

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
...,
	resolve: {
		extensions: ['.js', '.vue', '.json'],
		alias: {
		  '@': resolve('src'),
		  'src': resolve('src'),
		  'assets': resolve('src/assets')
		},
		symlinks: false
	},
...

配置完成后需要重新运行 npm run dev

使用 vue-router 实现组件间的页面切换

首先安装相关依赖

1
2
3
4
5
6
// 解决 ES 语法转义
npm install babel-runtime --save
// 解决移动端点击 300 毫秒延迟问题
npm install fastclick --save
// 对 ES 6 API 进行转义
npm install babel-polyfill --save-dev

Vue Route

的 tag 属性定义渲染生成的 HTML 标签，class 属性定义渲染生成的标签的 HTML 类，to 属性定义 Vue 路由。

将 Vue 路由定义的内容渲染出来。

jsonp

jsonp 一般用于跨域

1
npm install jsonp --save

Promise

详解：https://developers.google.com/web/fundamentals/getting-started/primers/promises?hl=zh-cn
encodeURIComponent?

URL 拼接示例代码

1
2
3
4
5
6
7
8
9
/* 拼接 URL 参数 */
function param (data) {
  let url = ''
  for (let key in data) {
    let value = data[key] !== undefined ? data[key] : ''
    url += `&${key}=${encodeURIComponent(value)}`
  }
  return url ? url.substring(1) : ''
}

Object.assign

Vue.js slot

better-scroll

1
npm instal better-scroll --save

mounted

vue ref 引用


this.$refs.HelloWorld

判断是否存在 className，添加 className

Vue.js keep-alive 标签

axios 使用与架设服务器

npm install axios –save

vue.js watch 数据监听和更新 DOM

Vue-Lazyload

npm install vue-lazyload –save

loading 基础组件的开发

1
2
3
4
5
.loading-container
        position: absolute
        width: 100%
        top: 50%
        transform: translateY(-50%)