Vue听课总结

使用命令创建项目

1. 使用脚手架至少要node6以上。
2. 使用 vue-cli 搭建项目
   (1) 全局化安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

（2）全局安装 vue-cli ，在命令提示窗口执行：

cnpm install -g vue-cli 

（3）创建项目

vue create hello-world // 项目名称

目录

build
项目构建(webpack)相关代码

config
配置目录，包括端口号等。初学可以使用默认的。

node_modules
npm 加载的项目依赖模块

package.json
项目配置文件。

store
vuex，大规模数据管理。

前端

前台：前台是直接指向用户的。比如，我们看见的网页。前台它不是技术。
后台：后台面向的是管理员（网站，app的数据维护人员）。后台通过维护管理数据来保证网站和应用的正常使用。

路由（router）

组件进行切换的时候，默认会进行销毁（destroyed方法）。某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现。

在App组件内

<template>
  <div id="app">
    <keep-alive exclude="Detail">
      	<router-view />
    	</keep-alive>
    	<main-tab-bar />
  </div>
</template>

除了这个我们还可以利用路由中的meta属性来控制

	{
      path: '/',
      name: 'home',
      meta:{
        keepAlive:true
      },
      component: Home
    }

keep-alive代码可以结合v-if进行包裹，如果meta中的keepAlive为true进行缓存

<keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />

箭头函数

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

// 无参
var fn1 = function() {}
var fn1 = () => {}
 
// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}
 
// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
 
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}
 

箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ … }和return。还有一种可以包含多条语句，这时候就不能省略{ … }和return

() => return 'hello'
(a, b) => a + b

(a) => {
  a = a + 1
  return a
}

生命周期钩子函数

promise

路由守卫

vuex

请求方法

cookie localStorage session

JavaScript

1、JS块级作用域

var、let、const的区别

1. var  定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2. let   定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3. const 用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
4. 同一个变量只能使用一种方式声明，不然会报错

变量提升（hoisting）

函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。变量可以在使用后声明，也就是变量可以先使用再声明。

实例一、二结果一样。

注意1  只有声明的变量会提升，初始化的不会。

实例3、4不一样

注意2 使用匿名函数的方式不存在函数提升，因为函数名称使用变量表示的，只存在变量提升。例：

getName 是一个变量，因此这个变量的声明也将提升到顶部，而变量的赋值依然保留在原来的位置。

注意3 函数优先，虽然函数声明和变量声明都会被提升，但是函数会首先被提升，然后才是变量。

相当于下面