1. 特点
MVVM数据驱动
轻量级、API简洁明了
2.对比类似框架
vue.js: 1.数据更新，全部重新渲染。2.真实DOM为模板，可直接控制DOMreact.js:1.数据更新，部分渲染。2.Virtual DOM作为模板，通过JSX和JavaScript的映射操作DOM
3. 起步demo
3.1直接开发
<div id="app"> {{ message }}</div>
new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }})
3.2组件化开发（ 结合ES6 ）
app.vue
<template> <div id="app"> {{ message }} </div></template><script>export default { data : { message: 'Hello Vue.js!' }}</script>
import App from './app.vue'new Vue( App ).$mount( '#app' )
4. vue.js开发
4.1 热加载开发模式
利用webpack + webpack-hot-server具体可以参考vuejs-templates的开发环境脚手架https://github.com/vuejs-templates/webpack
4.2 数据驱动DOM操作
<template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input></template><script>export default { data () { return { dataInput: "", dataList : [ 'hello world!','welcome to use vue.js' ] } }, methods : { addDataItem () { let self = this if( !(self.dataInput && self.dataInput.length > 0) ) { return } self.dataList.push( self.dataInput ) self.dataInput = "" } }}</script>
4.3 组件间通信（父子，兄弟）
4.3.1 父组件传子组件
父传子方法（一） 属性传递 props
子组件
<template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template><script>export default { props : { dataList : [] }}</script>
父组件
<template> <component-child v-bind:data-list="dataList"> </component-child> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input></template><script>import ComponentChild from './child.vue'export default { data () { return { dataInput: "", dataList : [ 'hello world!','welcome to use vue.js' ] } }, components : { ComponentChild }, methods : { addDataItem () { let self = this if( !(self.dataInput && self.dataInput.length > 0) ) { return } self.dataList.push( self.dataInput ) self.dataInput = "" } }}</script>
父传子方法（二） 广播事件传递 vm.$broadcast
子组件
<template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template><script>export default { data () { return { dataList : [ 'hello world!', 'welcome to use vue.js' ] } }, events : { addChildDataEvent : function ( dataInput ) { this.dataList.push( dataInput ) } }}</script>
父组件
<template> <component-child></component-child> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input></template><script>import ComponentChild from './child.vue'export default { data () { return { dataInput: "" } }, components : { ComponentChild }, methods : { addDataItem () { let self = this if( !(self.dataInput && self.dataInput.length > 0) ) { return } //广播到子组件 self.$broadcast( 'addChildDataEvent', self.dataInput ) self.dataInput = "" } }}</script>
4.3.2 子组件传父组件
子传父方法 派遣事件传递 vm.$dispatch
子组件
<template> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input></template><script>export default { data () { return { dataInput: "" } }, methods : { addDataItem () { let self = this if( !(self.dataInput && self.dataInput.length > 0) ) { return } //派遣事件到父组件 self.$dispatch( 'addFatherDataEvent', self.dataInput ) self.dataInput = "" } }}</script>
父组件
<template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> <component-child></component-child></template><script>import ComponentChild from './child.vue'export default { data () { return { dataList : [ 'hello world!', 'welcome to use vue.js' ] } }, components : { ComponentChild }, events : { addFatherDataEvent : function ( dataInput ) { this.dataList.push( dataInput ) } }}</script>
4.3.3 兄弟组件互传
父组件代理传递 子(vm.dispatch ）父 ( vm.broadcast )子 事件方法传递
子组件1
<template> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </template><script> export default { data () { return { dataList : [ 'hello world!', 'welcome to use vue.js' ] } }, events : { addChildDataEvent : function ( dataInput ) { this.dataList.push( dataInput ) } }}</script>
子组件2
<template> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input></template><script>export default { data () { return { dataInput: "" } }, methods : { addDataItem () { let self = this if( !(self.dataInput && self.dataInput.length > 0) ) { return } //派遣事件到父组件 self.$dispatch( 'agentDataEvent', self.dataInput ) self.dataInput = "" } }}</script>
父组件
<template> <component-child1></component-child1> <component-child2></component-child2></template><script>import ComponentChild1 from './child1.vue'import ComponentChild2 from './child2.vue'export default { components : { ComponentChild1, ComponentChild2 }, events : { agentDataEvent : function( dataInput ) { this.$broadcast('addChildDataEvent', dataInput) } }}</script>
4.4 实例间通信
把实例当做参数传入另一个实例
实例1
<template> <div> <p>实例间通信</p> <ul> <li v-for="item in dataList">{{item}}</li> </ul> </div></template><script> export default { data () { return { dataList : [ 'hello world!', 'welcome to use vue.js' ] } }, events : { addDataEvent : function ( dataInput ) { this.dataList.push( dataInput ) } }}</script>
实例2
<template> <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input></template><script>export default { data () { return { dataInput: "", otherApp : {} } }, methods : { addDataItem ( ) { let self = this if( !(self.dataInput && self.dataInput.length > 0) ) { return } //触发其他实例事件 self.otherApp.$emit( 'addDataEvent', self.dataInput ) self.dataInput = "" }, setOtherApp ( app ) { this.otherApp = app } }}</script>
实例间处理
import Vue from "vue"import App1 from "./communication5/app1.vue"import App2 from "./communication5/app2.vue"let AppVM1 = new Vue( App1 ).$mount('#app')let AppVM2 = new Vue( App2 ).$mount('#app2')AppVM2.setOtherApp( AppVM1 )
网友评论