说明

这一部分是针对于vue1进行的一些补充。这是看了视频VUE全家桶做的一些补充。

• 声明式编程：
  • 模板的结构和最终显示的效果基本一致

模板语法

指令

• v-cloak背后的原理：先通过样式隐藏内容，然后再内存中进行值的替换，替换好以后再显示最终的结果
• v-text 相比较v-cloak更加简洁
• v-html 不安全，本站内部数据可以使用，来自第三方数据不可使用
• v-pre 显示原始信息，跳过编译过程
  阅读全文 »

变量的解构赋值

数组的解构赋值

基本用法

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这称为解构。
以前为变量赋值只能直接指定值：

1
2
3

var a = 1;
var b = 2;
var c = 3;

ES6允许写成这样：

1

var [a,b,c] = [1,2,3];

可以表示，可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同左边的变量就会被赋予对应的值。

Babel转码器

Babel是一个广泛使用的ES6转码器，可以将ES6代码转换为ES5代码，从而在浏览器或其他环境中执行。

1
2
3
4
5
6
7

//转码前
input.map(item => item+1);

//转码后
input.map(function(item){
	return item+1;
	});

上面的原始代码使用了箭头函数，这个特性还没有得到广泛支持，Babel将其转换为普通函数，就能在现有的js环境执行里面。
Babel自带一个babel-node命令。提供支持ES6的REPL环境。它支持node的PERL环境的所有功能，而且可以直接运行ES6代码。

computed VS method

computed：

1
2
3
4
5
6
7

{{ reverseMsg }}

computed:{
	reverseMsg: function({
		//
		})
}

method：

vuex

概念：
vuex是Vue配套的公共数据管理工具，它可以把一些共享的数据，保存到vuex中，方便整个程序中的任何组件直接获取或者修改我们的公共数据。

vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，而不必通过父子组件之间传值了，如果组件的数据不需要共享，此时这些不需要共享的私有数据，没有必要传到vuex；
只有共享的数据，才有权力放到vuex中去，组件内部私有的数据，只要放到组件的data中即可

Promise

关于promise解决回调地狱问题的说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

//需求：你要封装一个方法，我给你一个要读取文件的路径，你这个方法能帮我读取文件，并把内容返回给我

const fs = require('fs')
const path = require('path')

//这是普通读取文件的方式
<!-- fs.readFile(path.join(__dirname,'./files/1.txt'),'utf-8',(err,data) => {
	if(err) throw err
	console.log(data)
	}) -->

//封装方法的初衷：给定文件路径，返回读取到的文件内容
//我们可以规定以下，callback中有两个参数，第一个参数就是失败的结果，第二个参数就是成功的结果；同时我们规定了，如果成功后，返回的结果应该房屋callback参数的第二个位置，此时第一个位置由于没有出错所以放一个努力了；如果失败了第一个位置参数防止erro对象，第二个位置放一个undefined
function getFilePath(fpath,callback){
	//该文件读取方法是一个异步方法，主程序不会去管他，而会直接跳过，所以无法获得读取文件的return值
	fs.readFile(path.join(fpath,'utf-8',(err,data) => {
	//错误发生后，就立即进入if分支，if后面的额代码就不会执行，解决办法就是在throw err前面加一个return
	if(err) return callback(err)
	<!-- console.log(data) -->
	callback(null,data)//使用回调来获取读取文件的值
	})
}

//调用
getFilePath(path.join(__dirname,'./files/1.txt'),(data) => {
	console.log(data)
	if(err) return console.log(err.message)
	console.log(data)
	})

Mint-UI

是基于vue.js的移动端组件库
该Mint-UI个bootstrap不一样

1
2
3
4
5

// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S

url-loader

url-loader的使用

注意：npm有两种安装方式，本地安装和全局安装，如果是本地安装，则可以通过require来引入包，如果是全局安装是提供给命令行用的，即全局安装的方式在代码中不用require方式引用。

默认情况下，webpack无法处理css文件中的url地址，不管是图片还是字体库，只要是url地址都处理不了

这是在webpack.config.js文件中新增的处理url的erl-loader文件

watch

使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数。即这个属性是用来监听data中数据改变从而进行相关操作的属性。

computed

在computed中，可以定义一些属性，这些属性叫做【计算属性】，计算属性的本质就是一个方法，只不过，我们在使用这些计算属性的时候，是把他们的名称，直接当作属性来使用的，并不会把计算属性，当作方法去调用

小球动画flag标识符的作用分析

在半场小球动画案例中，的afterEnter钩子函数里面原先写的是this.flag=！this.flag，如果改成el.style.opacity=0.5，则会没有动画效果。
Vue把一个完整的动画，使用钩子函数，拆分为了两部分：我们使用flag标识符，来表示动画的切换；刚一开始，flag=false，然后变成true，然后便变成false。