Vue学习笔记

组件

子父组件通信

1、子组件只能在父组件里使用
2、默认情况下，子组件不能直接访问父组件数据，每个组件的作用域都是独立的
3、子组件通过props属性来获取父组件传递的数据
4、props属性可以为Array，也可以使用对象，在对象中定义对数据的类型校验、数据校验、默认值等
5、 使用$emit(事件名，数据)子组件向父组件传递数据

子父组件：单向数据流

子组件不能直接修改父组件的数据，无法直接修改。
解决的方式：
1、如果子组件想把它作为局部数据来使用，可以将数据存在自己的变量中，不影响父组件数据
2、如果子组件想要修改数据并需要同步到父组件：
a.使用.sync修饰符(1.0支持，2.0不支持，2.3支持)，使用this.$emit('update:变量名', newValue)来显式触发时间来更新数据并同步到父组件；
b.将父组件中的数据包装成对象，然后在子组件之中可以修改这个对象

非父子组件间的通信

通过一个空的Vue实例来作为中央事件总线（事件总线），用它来触发时间和监听事件
通过事件总线的$emit和$on来分别触发事件和监听事件来发送和获取数据
注意在$on事件中使用箭头函数来避免this的问题

路由

router的使用

1. 定义组件
2. 配置路由
3. 创建路由实例
4. 创建根实例并将路由挂载到Vue实例上
   路由模式：hash和history
   linkActiveClass样式自定义
   redirect重定向路由

路由嵌套，参数传递，路由结合动画

参数传递

$route.query获取查询参数 /user/login?username=aa&passwd=bb
$route.params获取路径参数 /user/login/aa/bb

路由实例的方法

router.push() 添加路由，与router-link功能相同
router.replace() 替换路由，并且不产生历史记录

路由结合动画

单文件组件

VUE文件

由三部分组成，.vue结尾的文件，包含<template>、<style>、<script>标签

vue-loader

加载vue文件并解析，类似的还有html-loader,css-loader等

webpack

前端资源模块化加载器和打包工具，可以把各种资源都作为模块来使用和处理
webpack官网
核心配置文件为webpack.config.js，必须放在项目的根目录

示例步骤

1. 创建项目，结构如下

index.html
main.js 入口文件
App.vue vue文件
package.json 工程文件
webapck.config.js webpack配置文件
.babelrc Babel配置文件

2. 编写App.vue组件

export default {
    data(){
        return {

        }
    }
}

3. 安装相关模板

cnpm install vue -S

cnpm install webpack -D
cnpm install webpack-dev-server -D

cnpm install vue-loader -D
cnpm install vue-html-loader -D
cnpm install vue-style-loader -D
cnpm install file-loader -D

cnpm install babel-loader -D
cnpm install babel-core -D
cnpm install babel-preset-env -D //根据配置的运行环境自动启用需要的babel插件
cnpm install vue-template-compiler -D //预编译模板

cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler 
cnpm install -S vue

4. 编写main.js

import Vue from 'vue'  //引入内置模块  
import App from './app.vue' //引入自定义模块

使用render组件来渲染组件：

render:function(h){
    return h(App);
}

5. 编写webpack.config.js

module.exports = {
    //配置入口文件
    entry: './main.js',
    //入口输出文件位置
    output: {
        path: __dirname, //代表项目的根路径
        filename: 'build.js' //需要在html中手动引入这个文件
    },
    //配置模块加载器
    module: {
        rules: [
            {
                test:/\.vue$/, //vue文件都由vue-loader加载
                loader: 'vue-loader'
            },
            {
                test:/\.js$/, 
                loader: 'babel-loader',
                exclude: /node_modules/
            },
        ]
    }
}

6. 编写.babelrc文件

{
    "presets": [
        ["env", {"module": false}]
    ]
}

7. 编写package.json配置

{
  "name": "WebpackDemo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --open --hot --port 8282"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

8. 运行测试

npm run dev
npm run build

vue-cli脚手架

步骤

1. 安装vue-cli
   cnpm install vue-cli -g
   vue --version
   vue list

2. 初始化项目
   vue init webpack 项目名称

3. 进入生成的项目目录，安装模块包
   cnpm install
   新版自己就已经安装了

4. 运行
   npm run dev

模块化开发

1. vue-router模块化

cnpm install vue-router -S

1.1 编辑main.js

import VueRouter from 'vue-router'
Vue.use(VueRouter)

1.2 编辑App.vue

1.3 创建router.config.js

1.4 引入以及创建router实例

2. axios模块化开发

cnpm install axios -S
使用方式1：在每个组件中都要引用axios, import axios from 'axios'
使用方式2：在main.js中全局引入并添加Vue的原型之中
Vue.prototype.$http = axios
使用： this.$http.get()

为自定义组件添加事件： @click.native="send"

Elment UI

1. 简介

elementUI官网

2. 安装element ui

cnpm install element-ui -S

3. 使用element ui

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)
引入了所有的ElementUI组件

4. 配置webpack.config.js

增加以下配置

    {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }]
      }

5. element ui的样式和组件

按钮，图标按钮，图标，栅格，日期控件（封装成单独的组件），上传组件

6. 使用less

安装less和less-loader两个模块
cnpm install less less-loader -D
webpack.config.js配置

{
    test:/\.less$/,
    use: ['less-loader']
}

自定义插件

全局组件插件可以在main.js中使用Vue.use()进行全局引入，然后在其他组件中就能可以使用了。
普通组件需要每次都要引入。

import User from './user.vue'  
export default {
    install: function(Vue){
        Vue.component('User', User)
    }
}

Vuex

用来集中管理数据,类似React中的Redux，都是基于Flux的前端状态管理框架。
适用于中大型项目。

基本用法

cnpm install vuex -S

创建store.js文件

需要在main.js中导入

import store from './store.js'

需要Vue实例选项中配置store选项

new Vue({
    store,
    el: '#app',
    render: h => h(App)
})

编辑store.js文件

Vuex的核心是Store,相当于一个容器，一个store实例中包含以下属性的方法
state 定义属性(状态，数据)
getters 获取属性
actions 定义方法动作
commit 用来提交变化，修改数据的唯一方式，显示提交mutations
mutations 定义变化
不能直接修改数据，必须

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(vuex)

//定于属性(数据)
let state = {
    count: 0
}

//定义getters
let getters = {
    count(state){
        return state.count
    }
}

//定义actions,比如一些流程的控制，判断，异步请求  
const actions = {
    increment(context){//context包含commit,dispatch,state等
        context.commit('increment') //提交一个名为increment变化，可以自定义
    }
}

//定义mutations 处理数据的改变
const mutations = {
    increment(state){
        state.count++
    }
}

//创建store对象
const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

//导出store对象
export default store

编译App.vue

在子组件中访问state属性

1. 方式一： 使用this.$store.state.count
2. 方式二： 通过mapGetters、mapActions访问，提供的辅助函数
   mapGetters 获取属性（数据）
   mapActions 获取方法（动作）
   mapState 获取state中的数据

import {mapGetters, mapActions} from 'vuex'  

computed: mapGetters([
  'count'  
]),
methods:mapActions([
    'increment'
])

分模块组织Vuex

├── index.html  
├── main.js  
├── api  
│   └── ... # 抽取出API请求  
├── components  
│   ├── App.vue  
│   └── ...  
└── store  
    ├── index.js          # 我们组装模块并导出 store 的地方  
    ├── actions.js        # 根级别的 action  
    ├── mutations.js      # 根级别的 mutation  
    └── modules  
        ├── cart.js       # 购物车模块  
        └── products.js   # 产品模块