vue2.0是一个MVVM框架,对于这样的一个框架,我们应怎样搭建环境,用webpack+loader+babel,还是AAL,怎么样创建组件,基本的自定义标签的创建,数据的封装性,数据和模板的关系,组件的生命周期,组件的状态,内部的值组件与组件之间的数据传递。
Vue2.0与vue1.0几乎90%的API和核心概念都没有变,具体可以看https://cn.vuejs.org/v2/guide/migration.html
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的组件必须有根元素
Vue1.0中的beforeCompile换成了created
Vue1.0中的Compile换成了mounted
指令可以接受修饰符和参数,参数只能有一个,修饰符可以有很多个
例如:
<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 是一个专为 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
运行效果图: