vue.js的学习之路

vue.js的认识

前言

    公司在做一个桌面端应用，初步接触框架，很是迷茫。在不懈努力下，终于学到了一些知识，项目完成总结一下。项目是用webpack打包。

起步

    最常用的命令就是
    -npm install 下载依赖包
    -npm run dev 运行
    -npm run build 打包
    需要安装git，npm，这些在官网上都可以下载

    项目中需要在package.json文件中配置相应的依赖,类似于

        {
          "name": "xxx",
          "version": "1.0.0",
          "description": "xxx",
          "author": "xxx",
          "private": true,
          "scripts": {
            "dev": "node build/dev-server.js",
            "build": "node build/build.js"
          },
          "dependencies": {
            "axios": "^0.15.3",
            "element-ui": "^1.3.2",
            "moment": "^2.18.1",
            "muse-ui": "^2.0.2",
            "vue": "^2.2.6",
            "vue-blu": "^0.1.9",

          },
          "devDependencies": {
            "autoprefixer": "^6.7.2",
            "babel-core": "^6.22.1",
            "babel-loader": "^6.2.10",
          },
          "engines": {
            "node": ">= 4.0.0",
            "npm": ">= 3.0.0"
          }
        }

方法

    1.  循环
        1>  methods中循环：
            <1>
            for(i=0;i<arr.length;i++){
                操作arr[i]
            }
            <2>
            this.items.forEach(item => {
                操作item 
            });
            <3>
            for (let item of data) {

            }
        2>div循环
        <div v-for="(item, index) in items"></div>
2.  过滤两个数组中相同的元素
          this.arr = this.arr.filter(item => {
              if (item.id != xxx.id) {
                return item;
              }
            });
3.  合并两个数组，并去除重复元素 
        var a = new Array();
        var b = new Array(125624);                     
        a.push.apply(a, b);
4.  对于一些全局需要的变量，官方推荐状态管理 
    首先在type.js中定义一个CHANGE_NAME
        export const CHANGE_NAME = 'change_name';
    再在store.js中state中定义一个全局变量，可全局使用，然后在mutations里对CHANGE_NAME进行操作

        import * as types from './types'
        import Vue from 'vue';
        import Vuex from 'vuex';
        Vue.use(Vuex);
        export default new Vuex.Store({
            strict: process.env.NODE_ENV !== 'production',//在开发环境开启严格模式
            state: {
                username: {},//全局变量
            },
            mutations: {
               [types.CHANGE_NAME]: (state, data) => {
                    state.username = data;//操作全局变量，data为传的值
                },
            }
        })

如果想给这个全局变量赋值，就在当前文件下
 this.$store.commit(type.CHANGE_NAME, '给全局变量的值');
如果想使用这个全局变量，就在当前文件下
let username = this.$store.state.username;
5.  父子组件
        如果有一些样式基本相同，可以写一个公共组件供所有类似页面使用，通过slot插槽使局部内容不同，这样可以在设计风格统一调换时只用更改一个文件就可以实现全部改变。一些方法尽量写在外部，避免冗余，操作复杂，只适用于样式风格的统一。

    <div>
        <v-comp>
             <span></span>   //这里是插槽的位置，写组件中不同的内容
       </v-comp>
    </div>

v-comp是公共组件，在引入该组件的文件中应该先引入该组件

    import vcomp from '../../common/Comp.vue';

    然后在

        components: {
             vcomp
        },

在Comp.vue里可以写基础内容

        <div>
                <span></span>
                <slot></slot>//插槽
        </div>

6.  组件中的通讯可以用emit传值
        如果想在子组件传值给它的父组件，可以
        this.$emit('transfer', items)
        父组件接受子组件传的值

    <div
         @transfer="getData"
         :viewClick="function(){info(item)}"
        >
    </div>
    getData(res){
        //res就是子组件传过来的值
    }

7.  父组件向子组件传值可以通过props

    <div :select='selectData' //select为props接收的变量名，selectData为要传的值
         :viewClick="function(){info(item)}"
        >
    </div>

    子组件接收需要在props中定义
    props：{
            select:'',//变量
            viewClick:{       //点击事件
                   type:Function,
                   default:function(){console.log("111");},//默认方法
                   required:false
                },
    }
8.  computed计算属性
    通过在这里写的方法可以实时计算一旦数据发生改变就可以触发该方法。