完美

[学习|工作|博客|交流平台|完美起航]
 详情

vue2.0+webpack的项目搭建与开发

时间:[2018-03-14 23:32:56] 作者:[ zyw327 ] 点击:[ 2466 ]

vue2.0

vue2.0是一个MVVM框架,对于这样的一个框架,我们应怎样搭建环境,用webpack+loader+babel,还是AAL,怎么样创建组件,基本的自定义标签的创建,数据的封装性,数据和模板的关系,组件的生命周期,组件的状态,内部的值组件与组件之间的数据传递。

Vue2.0与vue1.0几乎90%的API和核心概念都没有变,具体可以看https://cn.vuejs.org/v2/guide/migration.html

Vue2.0的环境安装

Npm install --save vue

Vue2中新增有两种构建方式:

1.独立构建和运行构建,他们的区别在于前者包含模板编译器而后者不包含。模板编译器的职责是将模板的字符串编译为纯JavaScript的渲染函数。如果你想要在组件中使用template选项,你就需要编译器。

独立构建包含模板编译器并支持template选项,他也依赖于浏览器的接口存在,所以你不能使用它来为服务器短渲染。

2.运行时构建不包含模板编译器,因此不支持template选项,只能用render选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为render函数。运行时构建比独立构建要轻量30%,只有17.14kb min+gzip大小。

默认npm包导出的是运行时构建。为了使用独立构建,在webpack配置中添加如下别名:

resolve: {
    alias: {
    'vue$': 'vue/dist/vue.common.js'
    }
}

vue2.0的注意事项

Vue2.0的组件必须有根元素

Vue1.0中的beforeCompile换成了created

Vue1.0中的Compile换成了mounted

Vue2.0的指令

指令可以接受修饰符和参数,参数只能有一个,修饰符可以有很多个

例如:

<div v-yangse:hong.color="blue">ccc{{children}}</div>
data(){
    return {
        blue: 'red'
    };
},
directives: {
    yangse(el, bingding) {
        el.style.background = bingding.value();
        if (bingding.modifiers.color) {
            el.style.background = 'yellow';
        }
        // console.log(bingding);
    }
}

vuex的使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vuex基础使用

import Vuex from 'vuex'
import Vue from "vue";
Vue.use(Vuex);

const store = new Vuex.Store({
    //这里state必须是json,是一个对象
    state: {
        count: 0, //这里是初始值的罗列
        students: [
            {name: 'panda', age: 12, sex: '男' },
            {name: 'lisa', age: 12, sex: '女' },
            {name: 'lily', age: 12, sex: '女' },
            {name: 'kitty', age: 12, sex: '女' },
            {name: 'smith', age: 12, sex: '男' },
            {name: 'smart', age: 12, sex: '男' },
            {name: 'lazy', age: 12, sex: '男' },
            {name: 'xiaoxiao', age: 12, sex: '女' },
            {name: 'dada', age: 12, sex: '男' },
            {name: 'amy', age: 12, sex: '男' },
            {name: 'lilei', age: 12, sex: '男' },
            {name: 'xiaohong', age: 12, sex: '女' }
        ]
    },
    mutations: {
        // 没有所谓的大写字母的type了,就是一个一个函数
        add (state, payload) {
            console.log(payload);
            state.count ++;
            state.count += payload;
        },
        minus(state) {
            state.count --;
        }
    },
    actions:{
        add(content, payload) {
            content.commit('add', payload);
        }
    },
    getters: {
        man: (state) => {
            return state.students.filter((item) => {
                return item.sex == '男';
            });
        }
    }
});
export default store;

在组件中的引用首先要在vue实例中引入store,否则在组件中使用要单独引入。

new Vue({
    el: "#app",
    store,
    components: {
        component
    }
});

component中使用store

<div>
{{count}}
    <p>
        <button @click="addHander">+</button>
        <button @click="minusHander">-</button>
    </p>
{{man}}
</div>
computed: {
    count() {
        return this.$store.state.count;
    },
    man() {
        return this.$store.getters.man;
    }
}

vuex必须在computed中使用。

本实例源码:https://github.com/zyw327/vue2.0

运行效果图:

image.png

 0   0
标签:  vue webpack vuex 指令
 相关评论

zyw327

姓名:  
zyw327
QQ号码:  
327523057
职位:  
NODEJS
GITHUB主页:  
个性签名:  
宝剑锋从磨砺出,梅花香自苦寒来

关注     私信