# vue-demo

**Repository Path**: chmingx/vue-demo

## Basic Information

- **Project Name**: vue-demo
- **Description**: Vue学习笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-28
- **Last Updated**: 2021-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VUE

## 概述

Vue是一套用于构建用户界面的渐进式框架

MVVM:

- Model: 模型层，JS中的对象
- View: 试图从，这里表示DOM，HTML操作的元素
- VM: 视图模型双向绑定, Vue.js就是MVVM中的ViewModel层的实现者
  - ViewModel能偶观察到数据变化，并对视图对应的内容进行更新
  - ViewModel能够监听到视图的变化，并能够通知数据发生改变

使用方式:

- 下载Vue.js
  - https://vuejs.org/js/vue.js
  - https://vuejs.org/js/vue.mini.js
- CDN
  - `<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>`
  - `<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>`


## ES6新特性

### 变量定义let

```js
// var声明的变量没有局部作用域
// let声明的变量有局部作用域，此外let不能多次定义相同变量
let a = 0;
```

### 声明常量const

```js
// 声明后不能被改变，声明时必须初始化
const PI = 3.14;
```

### 解构

```js
// 数组解构
// 以前
let a=1, b=2, c=3;

// ES6
let [a, b, c] = [1, 2, 3]

// 对象解构
let user = {"name": "foo", "age": 18}
// 以前
let name1 = user.name
let age1 = user.age

// ES6
let {name2, age2} = user
```

### 模板字符串

相当于加强版的字符串，用反引号，除了作为字符串，还可以定义多行字符串，还可以在字符串中加入变量和表达式

```js
// 多行字符串
let string1 = `Hey,
how are you?`

// 字符串插入表达式
let name = "foo"
let age = 20
let info = `My name is ${name}, I am ${age + 1} years old.`

// 字符串中使用函数
function f() {
  return "have fun!"
}
let string2 = `Game start, ${f()}`
```

### 声明对象简写

```js
let name = "foobar"
let age = 20

// 以前
let userOld = {name: name, age: age}

// ES6
let user = {name, age}
```

### 定义方法简写

```js
// 以前
let person1 = {
  sayHi: function() {
    console.log("Hi")
  }
}
person1.sayHi()

// ES6
let person2 = {
  sayHi() {
    console.log("Hi")
  }
}
person2.sayHi()
```

### 对象扩展运算符

对象扩展运算符`...`，用于取出参数对象所有可遍历属性然后拷贝到当前对象

```js
// 拷贝对象
let person1 = {"name": "foobar", "age": 20}
let person2 = {...person1}
console.log(person2)

// 合并对象
let age = {age: 15}
let name = {name: "foobar"}
let person3 = {...age, ...name}

```

### 箭头函数

箭头函数提供了一种更加简洁的函数书写方式，基本语法是：

> 参数 => 函数体

```js
// 以前
var f = function(a){
  return a + 1
}
console.log(f1(1))

// ES6
var f2 = a => a + 1
console.log(f2(1))
```


## 第一个Vue应用

## v指令

- v-bind，将模型数据绑定到html的标签的属性中
- v-if
- v-for
- v-on
- v-model，双向绑定

实现绑定的两种形式：

- {{}}：用于文档内容
- v-bind：用于标签中

v-bind是指令，v-前缀表示它们是Vue提供的特殊指令

### 修饰符

是以半角句号指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
例如`.prevent`修饰符告诉`v-on`指令对于触发的事件调用 `event.preventDefault()`,即阻止事件原本的默认行为

## Vue组件

组件是Vue最强大的功能之一，组件可以扩展HTML元素，封装可重用代码，组件系统让我们可以用独立可复用的小组件来构建大型应用。几乎任意类型的应用的界面都可以抽象为一个组件树。


## 路由




## 网络通信

Axios是一个开源的可以用在浏览器和NodeJS的异步通信框架, 主要作用是实现Ajax异步通信

axios是一个独立的项目，和vue一起使用，实现ajax操作

```html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
```

## vue-cli

- nodejs, npm
- taobao
- 

## Element-UI

## Node.js

## npm

```shell
# npm初始化项目
npm init -y

# 配置镜像
npm config set registry https://registry.npm.taobao.org

# 查看配置信息
npm config list

# 下载依赖
npm install jquery

# 项目开发需要的依赖包，但是生成环境中不包含的依赖包的下载
npm install --save-dev eslint
npm install -D eslint

# 全局安装工具
npm install -g webpack

# 更新
npm update 包名
npm update -g 包名

# 卸载
npm uninstall 包名
npm uninstall -g 包名
```

## babel

转码器，将es6代码转成es5代码

```shell
npm install --global babel-cli
```

使用：
- 创建配置文件 `.babelrc`

```
{
  "presets": ["es2015"],
  "plugins": []
}
```

- 安装转码器

```shell
npm install -D babel-preset-es2015
```

- 转码

```shell
# 转单个文件
babel src/example.js --out-file dist/compiled.js
babel src/exmaple.js -o dist/compiled.js

# 转整个目录
babel src --out-dir dist
babel src -d dist
```

## 模块化

ES5写法

```js
const sum = function(a, b) {
  return parseInt(a) + parseInt(b)
}

const substract = function(a, b) {
  return parseInt(a) - parseInt(b)
}

// 设置哪些方法可以被其他js调用
module.exports = [
  sum,
  substract
]
```

```js
// 引入模块
const a = require('./a.js')

// 调用
a.sum(1, 2)
a.substract(10, 3)
```

ES6写法

```js
export function getList(){
  console.log("get list")
}

export function save(){
  console.log("save data")
}
```

```js
// 导入
import {getList, save } from "./userApi.js"

// 调用
getList()
save()
```

## webpack

前端资源加载和打包工具。可以将多种静态资源转换成一个静态文件，减少页面的请求

```shell
# 安装
npm install -g webpack webpack-cli
webpack -v
```

- 编写js文件
- 打包目录下创建配置文件webpack.config.js

```js
const path = require("path"); // Node.js内置模块

module.exports = {
  entry: './src/main.js', // 配置入口文件
  output: {
    path: path.resolv(__dirname, './dist'), // 输出路径
    filename: 'bundle.js' // 输出文件
  }
}
```

配置文件含义：读取当前项目目录下的src文件夹中的main.js入口文件内容，分析资源依赖，把相关js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js

- 命令行执行编译命令

```shell
# 打包
webpack
# or
webpack --mode=development
```

也可以配置项目的npm运行命令，修改package.json文件

```json
"scripts": {
  // ...,
  "dev": "webpack --mode=development"
}
```

然后运行npm命令打包


如果打包css，需要安装css加载器

```shell
npm install -D style-loader css-loader
```

修改webpack.config.js

```js
const path = require("path"); // Node.js内置模块

module.exports = {
  entry: './src/main.js', // 配置入口文件
  output: {
    path: path.resolv(__dirname, './dist'), // 输出路径
    filename: 'bundle.js' // 输出文件
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 打包规则应用到以css结尾的文件上
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}
```