组件

子父组件通信

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   # 产品模块 

以前,我总以为自己是菜鸟,也总想着早起的鸟儿有虫吃。直到有一天我想飞,才愕然的发现自己没有翅膀和羽毛,我竟然是菜虫!早起的虫儿被鸟吃……原来,百足应该厚积薄发!