相同点css
不一样点html
MVC（Model-View-Controller）前端
MVVM（Model-View-ViewModel）vue
如何理解vue中MVVM模式？react
v-if：是“真正”的条件渲染,在切换中组件会适当的被销毁和重建；v-for：数据循环渲染；v-show：控制元素的显示隐藏，即控制元素的display，基于 CSS 进行切换v-bind:class：绑定一个属性；v-model：实现双向绑定//父组件经过标签上面定义传值
<template>
<Main :obj="data"></Main>
</template>
<script>
//引入子组件
import Main form "./main"
exprot default{
name:"parent",
data(){
return {
data:"我要向子组件传递数据"
}
},
//初始化组件
components:{
Main
}
}
</script>
//子组件经过props方法接受数据
<template>
<div>{{data}}</div>
</template>
<script>
exprot default{
name:"son",
//接受父组件传值
props:["data"]
}
</script>
子组件向父组件传值：经过$on,$emitwebpack
//子组件:
<template>
<div @click="up"></div>
</template>
methods: {
up() {
this.$emit('upup','hehe'); //主动触发upup方法，'hehe'为向父组件传递的数据
}
}
//父组件
<div>
<child v-on:upup="change" :msg="msg"></child> //监听子组件触发的upup事件,而后调用change方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}
若是2个组件不是父子组件那么如何通讯呢？这时能够经过eventHub来实现通讯.
所谓eventHub就是建立一个事件中心，至关于中转站，能够用它来传递事件和接收事件.angularjs
let Hub = new Vue(); //建立事件中心
//组件1触发：
<div @click="eve"></div>
methods: {
eve() {
Hub.$emit('change','hehe'); //Hub触发事件
}
}
//组件2接收:
<div></div>
created() {
Hub.$on('change', () => { //Hub接收事件
this.msg = 'hehe';
});
}
声明式（标签跳转） <router-link :to="index">es6
router.push('index') indexPage.vue），script必定要export default {} import indexPage from '@/components/indexPage.vue' components属性上面,components:{indexPage} template视图view中使用，问题有indexPage命名，使用的时候则index-page。web
require.ensure()来实现按需加载。之前引入路由是经过import 这样的方式引入，改成const定义的方式进行引入。import home from '../../common/home.vue' const home = r => require.ensure( [], () => r (require('../../common/home.vue'))) main.js引入store，注入。场景有：单页应用中，组件之间的状态。音乐播放、登陆状态、加入购物车数据单向流动vue-router
View, Actions,State，数据的流动也是从View => Actions => State =>View，以此达到数据的单向流动,可是项目较大的，组件嵌套过多的时候，多组件共享同一个State会在数据传递时出现不少问题。Vuex就是为了解决这些问题而产生的。Vuex.Store由state, mutations和actions三个属性组成：state中保存着共有数据，改变state中的数据只能经过mutations中的方法，且mutations中的方法必须是同步的，若是要写异步的方法，须要些在actions中，并经过commit到mutations中进行state中数据的更改。v-show指令是经过修改元素的displayCSS属性让其显示或者隐藏v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果<style>修改成<style scoped> <keep-alive></keep-alive>包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免从新渲染。import ... from ...语法或CommonJS的require()方法引入组件// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
<my-component></my-component> import ... from ...语法或CommonJS的require()方法引入插件Vue.use(MyPlugin, { someOption: true }) template/js/style转换成js模块。而后，AST会通过generate（将AST语法树转化成render funtion字符串的过程）获得render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）
前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。
所以能够说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（经过调用浏览器提供的接口）来实现前端路由。
与AngularJS的区别
相同点：
1.都支持指令：内置指令和自定义指令。
2.都支持过滤器：内置过滤器和自定义过滤器。
3.都支持双向数据绑定。
4.都不支持低端浏览器。
不一样点：
1.AngularJS的学习成本高，好比增长了Dependency Injection特性，而Vue.js自己提供的API都比较简单、直观。
2.在性能上，AngularJS依赖对数据作脏检查，因此Watcher越多越慢。
3.Vue.js使用基于依赖追踪的观察而且使用异步队列更新。全部的数据都是独立触发的。对于庞大的应用来讲，这个优化差别仍是比较明显的。
beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el尚未。载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但仍是挂载以前，为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，可是dom结构依然存在
beforeCreate, created, beforeMount, mounted 这几个钩子mounted 中就已经完成了beforecreate : 能够在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 若是对数据统一处理，在这里写上相应函数 beforeDestroy : 能够作一个确认中止事件的确认框 nextTick : 更新数据后当即操做dom