Vue核心功能与应用场景分析

• Vue 动态绑定style与class

    :style="[{width: myWidth + '%'}, {background: 'red'}]"
    :class="['myClass1', {'myClass2': true}]"

• React 动态绑定style与class

    style={{display: isHidden ? 'none': 'block', color: 'red'}}
    className={`${classBool ? 'myClass1' : ''} myClass2`}

Vue核心功能与应用场景分析

• filter 可以对视图上的数据在绑定时再加工，用于管理视图

• directive 可以用来自定义指令，用于管理视图

• Vuex 中央状态管理器，属于第三方库的

• mixin 混入，可以理解为公共组件，一个高度复用的工具，在自己组件化的时候引入到组件内部。

1. 组件

• 局部注册 父组件引入子组件，components注册即可

• 全局注册

    // src/main.js
    import myComponent from "@/components/myComponent";
    Vue.component('myComponent', myComponent);

2. filter

• 局部注册

    // src/filter/index.js
    import replaceNumToChs from "./replaceNumToChs";
    export {
        replaceNumToChs
    };

    // src/filter/replaceNumToChs.js
    function numReplace (num) {
        switch (num) {
            case "1": 
                return "一";
            case "2": 
                return "二";
            case "3": 
                return "三";
            case "4": 
                return "四";
            default: 
                break;
        }
    } 
    export default (value) => {
        return value.replace(/\d+/g, (node, key) => {
            return numReplace(node);
        })
    }

    // src/components/Tab/Nav/Item.vue
    <template>
        <div 
            class="nav-item"
            @click="changeTabIndex(index)"
        >
            {{ item | replaceNumToChs }}
        </div>
    </template>

    <script>
    import { mapMutations } from "vuex";
    import { replaceNumToChs } from "@/filters";

    export default {
        name: "NavItem",
        props: {
            index: Number,
            item: String
        },
        filters: {
            replaceNumToChs
        },
        methods: {
            ...mapMutations(['changeTabIndex'])
        }
    }
    </script>

    <style>
        .nav-item {
            float: left;
            width: 25%;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .nav-current{
            background-color: #000;
            color: #fff;
        }
    </style>

• 全局注册

    // src/main.js
    import * as filters from "@/filters/index";
    Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

3. directive

• 局部注册

    // src/directives/index.js
    import tabCurrent from "./tabCurrent";
    export {
        tabCurrent
    }

    // src/directives/tabCurrent.js
    export default {
        // bind inserted update componentUpdated unbind
        bind (el, binding, vnode) {
            console.log(el, binding, vnode);
            const _options = binding.value,
                _child = el.getElementsByClassName(_options.className);

            _child[_options.curInd].className += ` ${_options.currentClassName}`
        },
        update (el, binding, vnode) {
            console.log(el, binding, vnode);
            const _options = binding.value,
                _oldOptions = binding.oldValue,
                _child = el.getElementsByClassName(_options.className);

                
            _child[_oldOptions.curInd].className = _options.className;
            _child[_options.curInd].className += ` ${_options.currentClassName}`;
        }
    }

    // src/components/Tab/Nav/Index.vue
    <template>
        <div 
            class="tab-nav"
            v-tab-current="{
                curInd: tabIndex,
                className: 'nav-item',
                currentClassName: 'nav-current'
            }"
        >
            <nav-item 
                v-for="(item, index) of navData" 
                :key="index"
                :index="index"
                :item="item"
            />
        </div>
    </template>

    <script>
    import NavItem from "./Item";
    import { mapState } from "vuex";
    import { tabCurrent } from "@/directives"

    export default {
        name: "TabNav",
        components: {
            NavItem
        },
        props: {
            navData: Array
        },
        computed: {
            ...mapState(['tabIndex'])
        },
        directives: {
            tabCurrent
        }
    }
    </script>

    <style>
        .tab-nav {
            height: 50px;
            border-bottom: 1px solid #000;
        }
    </style>

• 全局注册

    // src/main.js
    import * as directives from "@/directives/index";
    Object.keys(directives).forEach(k => Vue.directive(k, directives[k]));

4. Vuex

    // src/store/index.js
    import Vue from "vue";
    import Vuex from "vuex";

    import state from "./state";
    import mutations from "./mutations";

    Vue.use(Vuex);

    const store = new Vuex.Store({
        state,
        mutations
    })

    export default store;

    // src/store/state.js
    export default {
        tabIndex: 0
    }

    // src/store/mutations.js
    export default {
        changeTabIndex (state, index) {
            state.tabIndex = index;
        }
    }

    // src/main.js
    import store from "./store"
    new Vue({
        el: '#app',
        router,
        store,
        components: { App },
        template: '<App/>'
    })

5. mixin

    // src/libs/jsppui/index.js
    import NavBar from "./NavBar";
    export default {
        components: {
            NavBar
        }
    }

    // src/main.js
    import jsppui from "@/libs/jsppui"
    Vue.mixin(jsppui);

    // src/components/Tab/Index.vue
    <nav-bar
        :navData="navData"
        :curInd="tabIndex"
        @changeTabIndex="changeTabIndex"
    />

如果只是要局部使用，可以在组件的minxins: [ xx ] 中注册。