VUE风格的笔记本

VUE 填坑的日常笔记。

开发模式下跨域(非 vue-cli 构建)

使用 chrome 浏览器插件Allow-Control-Allow-Origin

使用 axios 请求 API

构建一个 web 应用访问后端 API 接口获取数据是不可避免的。做这件事的方法很多,而基于 promise 的 HTTP 客户端axios则是目前最简单的做法。在这个示例中我们使用网易云的 API 来获取一个用户的音乐列表。

安装

1
npm i axios

配置

1
2
3
// scr/index.js
import axios from "axios";
Vue.prototype.$ajax = axios;

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// conponent.vue
this.$ajax({
method: "get",
url: "apiUrl"
})
.then(
function(res) {
console.log(res);
}.bind(this)
)

.catch(function(err) {
console.log(err);
});

setTimeout 访问 vue 实例

使用setTimeout 或者Interval会产生全局作用域。 其内部的this指向window,此时无法使用this访问 vue 实例。如果  使用箭头函数书写则会避免产生全局作用域

1
setTimeout(() => {}, timeout);

v-for 列表中 index 绑定为 class

列表中的每一项可能有其独特的样式需要加载,这时可以直接使用v-for中的索引值——index作为列表项的唯一标识符,但是经过实验发现 Vue 中邦定为class的变量类型只能是字符串,因此需要先将index转化为字符串类型。
使用的方法是 JavaScript 原生的字符串指令:value.toString()

1
2
3
<div v-for="(item,index) in items" :key="index" :class="['item','item'+index.toString()]">
...
</div>

分离 CSS(Stylus)

CSS 内嵌到 JavaScript 这种做法本身就是不符合常理的,更何况这在大多数项目(无论规模大小)中都会引起空白样式闪烁(fouc)现象,所以为了避免诸多问题,将组件内的 CSS 单独提取到同一个文件是非常必要的,更便于对 CSS 的管理、压缩、加载和缓存。然而,这样一个非常重要的问题,官方文档最后一次更新也是两年前的事了,上面说的每一个函数和插件几乎都不可用。然而国内的某搜索引擎搜出来的都是各种傻逼抄来抄去,同一个失效的方法分别出现在 16 年、17 年、18 年个钟奇葩的博客里面,连个字都不带改的那种,白白浪费了好几天时间。

安装并引入相关依赖

1
sudo npm i mini-css-extract-plugin uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin
1
2
3
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

加载器配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module: { //加载器
rules: [{
test: /\.styl/,
use: [
//分离CSS加载器配置
MiniCssExtractPlugin.loader,
// 'style-loader', 分离CSS时必须屏蔽此项
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'stylus-loader'
]
}]
}]
}

特别注意 分离 CSS 操作无须 style-loader

插件配置

1
2
3
4
5
6
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
];

压缩配置(与 plugins 同级)

1
2
3
4
5
6
7
8
9
10
11
12
plugins:[],

optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({})
]
}

双向绑定的原理

1
2
3
<body>
<span id="demo"></span>
</body>
1
2
3
4
5
6
7
8
var obj = {}

Object.defineProperty(obj, 'demo', {
get: function () {},
set: function (val) {
document.getElementById('demo').innerText = val
}
})

vue-cli 生产文件路径错误

配置项目资源路径为根目录

1
2
3
4
// vue.config.js
module.exports = {
baseUrl: ""
};

监听 resize 或其他事件

1
2
3
4
mounted () {
window.onresize = this.watchWindowResize
window.addEventListener('scroll', this.watchWindowScroll)
}

清除定时器

数据

1
2
3
4
5
6
data () {
return {
timerStart: false,
time: null,
}
}

方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
methods: {
timer () {
let my = this
this.time = setInterval(() => {
// something
}, 100)
},
start () {
if (!this.timerStart) {
this.timer()
}
else {
clearInterval(this.time)
}
this.timerStart = !this.timerStart
}
}

动态路径绑定

两种方式,一是当作模块引入,二是放到静态资源文件夹

1
2
3
4
5
6
7
8
9
10
11
12
13
14
data () {
return {
bubbleTapData: [
{
tit: "1",
img: require('../assets/demo.jpg'),
},
{
tit: "2",
img: 'static/images/demo.jpg',
},
]
}
}

动态样式集

1
<div :style="style"></div>
1
2
3
4
5
6
7
8
9
10
11
export default {
data(){
return{
style:{
width:'100%',
height:'100%',
background:'#000'
}
}
}
}

监听值改变事件

JS 原生监听onchange事件,但是vue中与之不同:

1
<select @change="valueChange" ></select>

标记DOM元素

标记

1
<div class="main" ref="container"></div>

查询

1
console.log(this.$refs.container)

vue的比较

相似点

  • 虚拟DOM
  • 响应式和组件化的视图
  • 核心库和其他路由、状态管理等功能库的剥离
  • 原生渲染的能力

优势点

  • 更加切实的做到了局部更新、局部渲染,react组件更新时会重新渲染整个子组件树
  • 拥抱经典的WEB开发技术,使用渲染模版更有选择的余地,偏视图表现的组件可以使用模版,偏逻辑的组件可以使用渲染函数或jsx,然而对于前端来说,视图表现类的组件往往多与纯逻辑类的组件
  • 更加便利的使用css预处理器,和实现局部作用域的样式
  • 学习曲线平缓,渐进式的前端框架
  • Angular实际上必须使用TypeScript开发,对于静态类型语言的特性需要有一定的背景知识
  • 相较于其他,vue的体积也是最小的

vue的缺陷

  • 低版本浏览器的支持

路径

公共资源使用绝对路径进行定义

1
import store from '@/store.js'

过渡

1
2
3
<transition name="fade">
<div v-if="!loaded" class="load"></div>
</transition>
1
2
3
4
5
6
.fade-enter-active, .fade-leave-active {
transition opacity 0.5s
}
.fade-enter, .fade-leave-to {
opacity 0
}

watch中的this指向

在watch中避免使用箭头函数可以保持this的指向

1
2
3
4
5
watch:{
value:function(nv,ov){
//...
}
}