注意：以下所有示例基于vue 2.x、Vuex 2.x、

vm.$mount()-挂载

[html]  view plain  copy
  1. <body>  
  2.     <div id="a">  
  3.     </div>  
  4. </body>    
  5. <script>    
  6.     var A = Vue.extend({    
  7.         template: '<p>123</p>'    
  8.     });  
  9.   
  10.     /*// 自动挂载  
  11.     new A({  
  12.         el: '#a'  
  13.     });*/  
  14.   
  15.     var a = new A();  
  16.     a.$mount('#a')// 手动挂载  
  17. </script>    

组件示例(component)：

a. 不使用template标签

[html]  view plain  copy
  1. <body>  
  2.     <div id="a">  
  3.         <aaa m="a++" bgcolor="red"></aaa>  
  4.         <aaa m="b--" bgcolor="blue"></aaa>  
  5.     </div>  
  6. </body>    
  7. <script>    
  8.     Vue.component('aaa', {  
  9.         template: '<div><p>{{ m }}</p><p @click="add" :style="style">点这里-> a:{{a}} b:{{b}}</p></div>',  
  10.         data: function() {  
  11.             return {  
  12.                 a: 0,  
  13.                 b: 0,  
  14.                 style: {  
  15.                     fontSize: '30px',  
  16.                     background: this.bgcolor  
  17.                 }  
  18.             }  
  19.         },  
  20.         props: ['m', 'bgcolor'],  
  21.         methods: {  
  22.             add: function() {  
  23.                 this.a++;  
  24.                 this.b--;  
  25.             }  
  26.         }  
  27.     });  
  28.   
  29.     new Vue({  
  30.         el: '#a'  
  31.     })  
  32. </script>    


b. 使用template标签

[html]  view plain  copy
  1. <body>  
  2.     <div id="a">  
  3.         <aaa m="a++" bgcolor="red"></aaa>  
  4.         <aaa m="b--" bgcolor="blue"></aaa>  
  5.     </div>  
  6.     <template id="b">  
  7.         <div>  
  8.             <p>{{ m }}</p>  
  9.             <p @click="add" :style="style">点这里-> a:{{a}} b:{{b}}</p>  
  10.         </div>  
  11.     </template>  
  12. </body>    
  13. <script>    
  14.     Vue.component('aaa', {  
  15.         template: '#b',  
  16.         data: function() {  
  17.             return {  
  18.                 a: 0,  
  19.                 b: 0,  
  20.                 style: {  
  21.                     fontSize: '30px',  
  22.                     background: this.bgcolor  
  23.                 }  
  24.             }  
  25.         },  
  26.         props: ['m', 'bgcolor'],  
  27.         methods: {  
  28.             add: function() {  
  29.                 this.a++;  
  30.                 this.b--;  
  31.             }  
  32.         }  
  33.     });  
  34.   
  35.     new Vue({  
  36.         el: '#a'  
  37.     })  
  38. </script>    


c. 局部注册

[html]  view plain  copy
  1. <body>  
  2.     <div id="a">  
  3.         <my-b></my-b>  
  4.         <my-c></my-c>  
  5.         <my-d></my-d>  
  6.     </div>  
  7.   
  8.     <template id="b">  
  9.         <p>bbb</p>  
  10.     </template>  
  11.   
  12.   
  13. </body>  
  14. <script>  
  15.     var myD = Vue.component('myD', {  
  16.         template: '<p>ddd</p>'  
  17.     });  
  18.   
  19.     new Vue({  
  20.         el: '#a',  
  21.         components: {  
  22.             'myB': {  
  23.                 template: '#b'  
  24.             },  
  25.             'myC': {  
  26.                 template: '<p>ccc</p>'  
  27.             },  
  28.             'myD': myD  
  29.         }  
  30.     });  
  31. </script>  

d. 动态组件

[html]  view plain  copy
  1. <body>    
  2.     <div id="a">    
  3.         <button @click="change">{{ cur }}</button>    
  4.         <component :is="cur"></component>    
  5.     </div>    
  6.     <template id="b">    
  7.         <p>bbb</p>    
  8.     </template>    
  9. </body>    
  10. <script>    
  11.     new Vue({    
  12.         el: '#a',    
  13.         data: {    
  14.             cur: {// 直接绑定到组件对象上  
  15.                 template: '<p>aaa</p>'    
  16.             }    
  17.         },    
  18.         methods: {    
  19.             change: function() {    
  20.                 this.cur = this.cur=='myB'?'myC':'myB';    
  21.             }    
  22.         },    
  23.         components: {// 多个组件使用同一挂载点，动态切换  
  24.             'myB': {    
  25.                 template: '#b'    
  26.             },    
  27.             'myC': {    
  28.                 template: '<p>ccc</p>'    
  29.             }    
  30.         }    
  31.     });    
  32. </script>   


e. 父子组件通信

[html]  view plain  copy
  1. <body>    
  2.     <div id="a">  
  3.         父：<input v-model="msg" />  
  4.         <aaa :msg="msg" @notick="notickEvent"></aaa>  
  5.     </div>  
  6.   
  7.     <template id="b">  
  8.         <div>  
  9.             子：<input v-model="msgChild" />  
  10.         </div>  
  11.     </template>  
  12. </body>    
  13. <script>   
  14.     // 子组件  
  15.     Vue.component('aaa', {  
  16.         template: '#b',  
  17.         props: ['msg'],// 使子组件接受到父组件的msg属性  
  18.         data: function() {  
  19.             return {  
  20.                 msgChild: ''// 子组件msg的替代品(vue2中禁止子组件直接改变父组件状态，只能通过替代)  
  21.             }  
  22.         },  
  23.         watch: {  
  24.             msg: function(newVal, oldVal) {  
  25.                 this.msgChild = newVal;  
  26.             },  
  27.             msgChild: function(newVal, oldVal) {  
  28.                 this.$emit('notick', newVal);// 子组件msgChild改变时，触发notick事件  
  29.             }  
  30.         }  
  31.     })  
  32.   
  33.     // 父组件  
  34.     new Vue({  
  35.         el: '#a',  
  36.         data: {  
  37.             msg: ''  
  38.         },  
  39.         methods: {  
  40.             notickEvent: function(val) {  
  41.                 this.msg = val;  
  42.             }  
  43.         }  
  44.     })  
  45. </script>  
f. 兄弟组件通信
[html]  view plain  copy
  1. <body>    
  2.     <div id="a">   
  3.         <aaa></aaa>  
  4.         <bbb></bbb>  
  5.     </div>  
  6.   
  7.     <template id="b">  
  8.         <button @click="add">点击：{{ num }}</button>  
  9.     </template>  
  10. </body>    
  11. <script>   
  12.     var bus = new Vue();// 简单场景下可以使用bus  
  13.   
  14.     // 子组件aaa  
  15.     Vue.component('aaa', {  
  16.         template: '#b',  
  17.         data: function() {  
  18.             return {  
  19.                 num: 0  
  20.             }  
  21.         },  
  22.         methods: {  
  23.             add: function() {  
  24.                 bus.$emit('addEvent', ++this.num);  
  25.             }  
  26.         },  
  27.         mounted: function() {  
  28.             var This = this;  
  29.             bus.$on('addEvent', function(val) {  
  30.                 This.num = val;  
  31.             })  
  32.         }  
  33.     })  
  34.   
  35.     // 子组件bbb  
  36.     Vue.component('bbb', {  
  37.         template: '#b',  
  38.         data: function() {  
  39.             return {  
  40.                 num: 0  
  41.             }  
  42.         },  
  43.         methods: {  
  44.             add: function() {  
  45.                 bus.$emit('addEvent', ++this.num);  
  46.             }  
  47.         },  
  48.         mounted: function() {  
  49.             var This = this;  
  50.             bus.$on('addEvent', function(val) {  
  51.                 This.num = val;  
  52.             })  
  53.         }  
  54.     })  
  55.   
  56.     new Vue({  
  57.         el: '#a'  
  58.     })  
  59. </script>  


g. 异步组件
[html]  view plain  copy
  1. <body>  
  2.     <div id="a">  
  3.         <component :is='btn'></component>  
  4.         <button @click="change">{{ btn }}</button>  
  5.     </div>  
  6. </body>  
  7. <script>  
  8.     new Vue({  
  9.         el: '#a',  
  10.         data: {  
  11.             btn: 'aA'  
  12.         },  
  13.         methods: {  
  14.             change: function() {  
  15.                 this.btn = this.btn=='aA'?'bB':'aA';  
  16.             }  
  17.         },  
  18.         components: {  
  19.             aA: function(resolve) {  
  20.                 setTimeout(function() {  
  21.                     resolve({  
  22.                         template: '<p>{{ btn }}</p>',  
  23.                         data: function() {  
  24.                             return {  
  25.                                 btn: this.$root.btn  
  26.                             }  
  27.                         }  
  28.                     });  
  29.                 }, 1000);  
  30.             },  
  31.             bB: {  
  32.                 template: '<p>bb...</p>'  
  33.             }  
  34.         }  
  35.           
  36.     });  
  37. </script>  






计算示例(computed)：

[html]  view plain  copy
  1. <body>  
  2.     <div id="a">  
  3.         <p>{{ intro }}</p>  
  4.         <input type="text" v-model="name">  
  5.         <input type="text" v-model="age">  
  6.     </div>  
  7. <script>  
  8.     new Vue({  
  9.         el: '#a',  
  10.         data: {  
  11.             name: 'hvb',  
  12.             age: 20  
  13.         },  
  14.         computed: {  
  15.             intro: function() {  
  16.                 return this.name +':'+ this.age;  
  17.             }  
  18.         }  
  19.     });  
  20. </script>  
  21. </body>  

自定义指令实现"点击按钮使文本框获取焦点"示例(directive)：

[html]  view plain  copy
  1. <body>      
  2.     <div id="a">    
  3.         <input v-focus="isFocus" />  
  4.         <button @click="change">点击切换输入框选中状态</button>    
  5.     </div>    
  6. </body>      
  7. <script>     
  8.     // 注册一个全局自定义指令 v-focus  
  9.     Vue.directive('focus', {  
  10.         // 被绑定元素插入父节点时调用  
  11.         inserted: function (el, binding) {  
  12.             if(binding.value) {  
  13.                 el.focus();  
  14.             }else {  
  15.                 el.blur();  
  16.             }  
  17.         },  
  18.         // 被绑定元素所在模板完成一次更新周期时调用  
  19.         componentUpdated: function (el, binding) {  
  20.             if(binding.value) {  
  21.                 el.focus();  
  22.             }else {  
  23.                 el.blur();  
  24.             }  
  25.         }  
  26.     })  
  27.   
  28.     new Vue({    
  29.         el: '#a',    
  30.         data: {  
  31.             isFocus: true  
  32.         },  
  33.         methods: {  
  34.             change: function(e) {  
  35.                 this.isFocus = !this.isFocus;  
  36.             }  
  37.         }  
  38.     })    
  39. </script>  


简单的todolist：

[html]  view plain  copy
  1. <!DOCTYPE html>    
  2. <html lang="en">    
  3. <head>    
  4.     <script src="vue.js"></script>  
  5.     <style>    
  6.         * {    
  7.             margin: 0;     
  8.             padding: 0;    
  9.         }    
  10.         body, html {    
  11.             width: 100%;    
  12.             height: 100%;  
  13.         }   
  14.         .line {  
  15.             text-decoration: line-through;  
  16.         }  
  17.     </style>    
  18. </head>    
  19. <body>    
  20.     <div id="a">      
  21.         <aaa :list="tasks"></aaa><!-- 注意:list的冒号 -->      
  22.         <hr>      
  23.         <aaa :list="[{a: 'a', b: 'b', line: true}, {a: 'aa', b: 'bb', line: false}]"></aaa><!-- 组件复用 -->      
  24.     </div>      
  25.   
  26.     <template id="b">     
  27.         <div>  
  28.             <input v-model="dd" @keyup.enter="cc" type="text" placeholder="enter添加">    
  29.             <p v-show="remain">剩余{{ remain }}条未完成</p>      
  30.             <div v-for="(key, index) in list">      
  31.                 <span @click="aa(key)" :class="{line: key.line}">{{ key.a }}---{{ key.b }}</span>      
  32.                 <strong @click="bb(index)">×</strong>      
  33.             </div>      
  34.         </div>   
  35.     </template>  
  36. </body>    
  37. <script>      
  38.     Vue.component('aaa', {      
  39.         template: '#b',      
  40.         data: function() {    
  41.             return {    
  42.                 dd: ''    
  43.             }    
  44.         },    
  45.         watch: {    
  46.             list: {    
  47.                 handler: function(keys) {    
  48.                     console.log(keys);    
  49.                 },    
  50.                 deep: true//keys中的每个值变化都会触发handler    
  51.             }    
  52.         },    
  53.         props: ['list'],      
  54.         methods: {      
  55.             aa: function(key) {      
  56.                 key.line = !key.line;      
  57.                 console.log(2);      
  58.             },      
  59.             bb: function(index) {      
  60.                 this.list.splice(index, 1);      
  61.             },    
  62.             cc: function() {    
  63.                 this.list.push({    
  64.                     a: this.dd,     
  65.                     b: '无',     
  66.                     line: false    
  67.                 });    
  68.                 this.dd = '';     
  69.             }    
  70.         },      
  71.         computed: {      
  72.             remain: function() {      
  73.                 return this.list.filter(function(a) {      
  74.                     return !a.line;      
  75.                 }).length;      
  76.             }      
  77.         }      
  78.     });      
  79.       
  80.     new Vue({      
  81.         el: '#a',      
  82.         data: {      
  83.             tasks: [      
  84.                 {a: 1, b: 2, line: true},      
  85.                 {a: 11, b: 22, line: false},      
  86.                 {a: 111, b: 222, line: false}      
  87.             ]      
  88.         },      
  89.         methods: {      
  90.             aa: function(key) {      
  91.                 key.line = !key.line;      
  92.                 console.log(1);      
  93.             }      
  94.         }      
  95.     });      
  96. </script>  
  97. </html>  




使用jquery调用接口数据：

[html]  view plain  copy
  1. <body>    
  2.     <div id="a">    
  3.         <p>{{ list }}</p>    
  4.     </div>    
  5. </body>    
  6. <script>    
  7.     new Vue({    
  8.         el: '#a',    
  9.         data: {    
  10.             list: ''    
  11.         },    
  12.         created: function() {    
  13.             var This = this;    
  14.             $.ajax({    
  15.                 url: 'http://v3.faqrobot.org/servlet/AQ?s=p&sysNum=14464304598886414&&sourceId=0×tamp=1473514741278&dataType=json',    
  16.                 dataType: 'jsonp',    
  17.                 success: function(data) {    
  18.                     This.list = data.webConfig.helloWord;    
  19.                 }    
  20.             });    
  21.         },    
  22.     });    
  23. </script>  


使用vue-resource调用接口数据：(Vue2推荐使用axios代替vue-resource)

[html]  view plain  copy
  1. <body>    
  2.     <div id="a">    
  3.         <p v-show="a">加载中...</p>    
  4.         <p>{{ list }}</p>    
  5.     </div>    
  6. </body>  
  7. <script>    
  8.     Vue.http.interceptors.push(function(request, next) {    
  9.         this.a = !this.a;    
  10.         next(function(response) {    
  11.             this.a = !this.a;    
  12.             return response;    
  13.         });    
  14.     });    
  15.     new Vue({    
  16.         el: '#a',    
  17.         data: {    
  18.             a: false,    
  19.             list: ''    
  20.         },    
  21.         created: function() {    
  22.             this.$http.jsonp('http://v3.faqrobot.org/servlet/AQ?s=p&sysNum=14464304598886414&&sourceId=0×tamp=1473514741278&dataType=json').then(function(data) {    
  23.                 this.list = data.body.webConfig.helloWord;    
  24.             });    
  25.         },    
  26.     });    
  27. </script>  

slot示例：
[html]  view plain  copy
  1. <body>  
  2.     <div id="a">  
  3.         <my-b>  
  4.             <p>匿名slot1</p>  
  5.             <p>匿名slot2</p>  
  6.             <p slot="a">具名slot1</p>  
  7.             <my-c></my-c>  
  8.         </my-b>  
  9.     </div>  
  10.   
  11.     <template id="b">  
  12.         <slot></slot>  
  13.         <slot></slot>  
  14.         <slot name="a"></slot>  
  15.         <p>bbb</p>  
  16.     </template>  
  17.     <template id="c">  
  18.         <p>ccc</p>  
  19.     </template>  
  20.   
  21.   
  22. </body>  
  23. <script>  
  24.     Vue.component('myB', {  
  25.         template: '#b'  
  26.     });  
  27.     Vue.component('myC', {  
  28.         template: '#c'  
  29.     });  
  30.   
  31.     p = new Vue({  
  32.         el: '#a'  
  33.     });  
  34. </script>  
activate示例：
[html]  view plain  copy
  1. <body>  
  2.     <div id="a">  
  3.         <component :is='btn'></component>  
  4.         <button @click="change">{{ btn }}</button>  
  5.     </div>  
  6. </body>  
  7. <script>  
  8.     new Vue({  
  9.         el: '#a',  
  10.         data: {  
  11.             btn: 'aA'  
  12.         },  
  13.         methods: {  
  14.             change: function() {  
  15.                 this.btn = this.btn=='aA'?'bB':'aA';  
  16.             }  
  17.         },  
  18.         components: {  
  19.             aA: {  
  20.                 template: '<p>aa</p>',  
  21.                 activate: function(done) {// 加载前的回调  
  22.                     setTimeout(function() {  
  23.                         console.log(2);  
  24.                         done();  
  25.                     }, 1000);  
  26.                     console.log(1);  
  27.                 },  
  28.             },  
  29.             bB: {  
  30.                 template: '<p>bb</p>',  
  31.                 ready: function() {// 作用等同于ready  
  32.                     console.log(3)  
  33.                 }  
  34.             },  
  35.         }  
  36.           
  37.     });  
  38. </script>  

vuex示例：

a. 简单计数

[html]  view plain  copy
  1. <body>    
  2.     <div id="a">  
  3.         <p>{{ num }}</p>  
  4.         <button @click="add">add</button>  
  5.         <button @click="reduce">reduce</button>  
  6.     </div>  
  7. </body>    
  8. <script>   
  9.     var store = new Vuex.Store({  
  10.         state: {  
  11.             num: 0  
  12.         },  
  13.         mutations: {  
  14.             add: function(state) {  
  15.                 state.num++;  
  16.             },  
  17.             reduce: function(state) {  
  18.                 state.num--  
  19.             }  
  20.         }  
  21.     })  
  22.   
  23.     new Vue({  
  24.         el: '#a',  
  25.         computed: {  
  26.             num: function() {  
  27.                 return store.state.num;  
  28.             }  
  29.         },  
  30.         methods: {  
  31.             add: function() {  
  32.                 store.commit('add');  
  33.             },  
  34.             reduce: function() {  
  35.                 store.commit('reduce');  
  36.             },  
  37.         }  
  38.     })  
  39. </script>  

b. 子组件获取Vuex状态

[html]  view plain  copy
  1. <body>    
  2.     <div id="a">  
  3.         父：<span>{{ num }}</span>  
  4.         <aaa></aaa>  
  5.     </div>  
  6. </body>    
  7. <script>   
  8.     var store = new Vuex.Store({  
  9.         state: {  
  10.             num: 0  
  11.         }  
  12.     })  
  13.   
  14.     new Vue({  
  15.         el: '#a',  
  16.         store: store,// 把store实例注入所有的子组件  
  17.         computed: {  
  18.             num: function() {  
  19.                 return this.$store.state.num;// 使用this.$store即可引用  
  20.             }  
  21.         },  
  22.         components: {// 子组件  
  23.             'aaa': {  
  24.                 template: '<div>子：<span>{{ num }}</span></div>',  
  25.                 computed: {  
  26.                     num: function() {  
  27.                         return this.$store.state.num;// 使用this.$store即可引用  
  28.                     }  
  29.                 }  
  30.             }  
  31.         }  
  32.     })  
  33. </script>  

c. 拓展状态Getters

[html]  view plain  copy
  1. <body>      
  2.     <div id="a">    
  3.         <p @click="change">转换后：{{ num }}，长度：{{ len }}，点击换一换</p>    
  4.     </div>    
  5. </body>      
  6. <script>     
  7.     var store = new Vuex.Store({      
  8.         state: {// 原状态    
  9.             num: 'abc'      
  10.         },    
  11.         getters: {// 通过原状态拓展出来的状态 (state变化时，getters也会变化，state永远是主动方)  
  12.             numUpper: function(state) {// 转大写    
  13.                 return state.num.toUpperCase();    
  14.             },    
  15.             numUpperLen: function(state, getters) {// 转大写后的字符长度(直接传getters参数可引用拓展状态中的其他状态)    
  16.                 return getters.numUpper.length;    
  17.             }    
  18.         },  
  19.         mutations: {  
  20.             change: function(state) {  
  21.                 state.num = 'defhi';  
  22.             }  
  23.         }  
  24.     })    
  25.     
  26.     new Vue({    
  27.         el: '#a',    
  28.         computed: {    
  29.             num: function() {    
  30.                 return store.getters.numUpper;    
  31.             },    
  32.             len: function() {    
  33.                 return store.getters.numUpperLen;    
  34.             }    
  35.         },  
  36.         methods: {  
  37.             change: function() {  
  38.                 store.commit('change');  
  39.             }  
  40.         }  
  41.     })    
  42. </script>    



d.mutations和actions区别
[html]  view plain  copy
  1. <body>    
  2.     <div id="a">  
  3.         <p @click="add1">Time Travel状态正常{{ num }}</p>  
  4.         <p @click="add2">Time Travel状态不正常{{ num }}</p>  
  5.     </div>  
  6. </body>    
  7. <script>   
  8.     var store = new Vuex.Store({    
  9.         state: {  
  10.             num: 0    
  11.         },  
  12.         mutations: {  
  13.             add1: function(state) {  
  14.                 return state.num++;  
  15.             },  
  16.             add2: function(state) {  
  17.                 setTimeout(function() {// mutations中进行异步调用，导致vue devtools记录不到此状态，Time Travel时状态不对  
  18.                     return state.num++;  
  19.                 }, 1000);  
  20.             }  
  21.         },  
  22.         actions: {  
  23.             add1: function(context) {  
  24.                 setTimeout(function() {// actions中进行异步调用，vue devtools正确记录此状态，Time Travel时状态也正常  
  25.                     context.commit('add1');  
  26.                 }, 1000);  
  27.             }  
  28.         }  
  29.     })  
  30.   
  31.     new Vue({  
  32.         el: '#a',  
  33.         computed: {  
  34.             num: function() {  
  35.                 return store.state.num;  
  36.             }  
  37.         },  
  38.         methods: {  
  39.             add1: function() {  
  40.                 return store.dispatch('add1');  
  41.             },  
  42.             add2: function() {  
  43.                 return store.commit('add2');  
  44.             },  
  45.         }  
  46.     })  
  47. </script>  
e. actions中使用Promise
[html]  view plain  copy
  1. <body>    
  2.     <div id="a">  
  3.         <p @click="add">{{ num }}</p>  
  4.     </div>  
  5. </body>    
  6. <script>   
  7.     var store = new Vuex.Store({    
  8.         state: {  
  9.             num: 0    
  10.         },  
  11.         mutations: {  
  12.             add: function(state) {  
  13.                 return state.num++;  
  14.             }  
  15.         },  
  16.         actions: {  
  17.             add: function(context) {  
  18.                 return new Promise(function(resolve, reject) {  
  19.                     setTimeout(function() {  
  20.                         context.commit('add');  
  21.                         console.log(1)  
  22.                         resolve();  
  23.                     }, 1000);  
  24.                 })  
  25.             }  
  26.         }  
  27.     })  
  28.   
  29.     new Vue({  
  30.         el: '#a',  
  31.         computed: {  
  32.             num: function() {  
  33.                 return store.state.num;  
  34.             }  
  35.         },  
  36.         methods: {  
  37.             add: function() {  
  38.                 return store.dispatch('add').then(function() {// 不使用Promise打印2 1，使用Promise打印1 2  
  39.                     console.log(2);  
  40.                 });  
  41.             }  
  42.         }  
  43.     })  
  44. </script>  
f. 模块Modules和根节点状态rootState
[html]  view plain  copy
  1. <body>    
  2.     <div id="a">  
  3.         <p @click="add">{{ num }}</p>  
  4.     </div>  
  5. </body>    
  6. <script>   
  7.     var moduleA = {    
  8.         state: {  
  9.             num: 0// moduleA节点状态  
  10.         },  
  11.         mutations: {  
  12.             ['a.add']: function(state) {// a.add为命名空间  
  13.                 return state.num++;  
  14.             }  
  15.         },  
  16.         actions: {  
  17.             ['a.add']: function(context) {  
  18.                 context.rootState.num++;// 根节点状态改变  
  19.                 return context.commit('a.add');// moduleA节点状态改变  
  20.             }  
  21.         }  
  22.     }  
  23.   
  24.     var store = new Vuex.Store({    
  25.         state: {  
  26.             num: 0// 根节点状态  
  27.         },  
  28.         modules: {  
  29.             modA: moduleA  
  30.         }  
  31.     })  
  32.   
  33.     new Vue({  
  34.         el: '#a',  
  35.         computed: {  
  36.             num: function() {  
  37.                 return store.state.num + store.state.modA.num;// 根节点和moduleA节点状态叠加  
  38.             }  
  39.         },  
  40.         methods: {  
  41.             add: function() {  
  42.                 return store.dispatch('a.add');// 触发a.add  
  43.             }  
  44.         }  
  45.     })  
  46. </script>  
directive示例：(请注意和vue示例的数据交互使用的是 vnode.context， 待更新)
[html]  view plain  copy
  1. export default {  
  2.     data() {  
  3.         return {  
  4.             SC_outer_style: {  
  5.             },  
  6.             SC_inner_style: {  
  7.                 height: '50px',  
  8.                 background: 'red'  
  9.             }  
  10.         }  
  11.     },  
  12.     computed: {    
  13.         SC_outer_style() {  
  14.             return {  
  15.             }  
  16.         }  
  17.     },  
  18.     mounted() {  
  19.     },  
  20.     methods: {  
  21.         init() {  
  22.               
  23.         }  
  24.     },  
  25.     directives: {  
  26.         handle: {  
  27.             inserted: function(el, binding, vnode) {  
  28.                 if(Tool.getStyle(el, 'position') == 'static') {  
  29.                     vnode.context.SC_outer_style = {  
  30.                         position: 'relative'  
  31.                     }  
  32.                 }  
  33.             },  
  34.         }  
  35.     }  
  36. }  



vue-router示例：

a. 简单的单页应用

[html]  view plain  copy
  1. <body>  
  2.     <div id="app">  
  3.         <a v-link="{path: '/home'}">home</a>  
  4.         <a v-link="{path: '/about'}">about</a>  
  5.         <router-view></router-view>  
  6.     </div>  
  7. </body>  
  8. <script>  
  9.     window.onload = function() {  
  10.         var Home = Vue.extend({  
  11.             template: '<p>home content</p>'  
  12.         });  
  13.   
  14.         var About = Vue.extend({  
  15.             template: '<p>about content</p>'  
  16.         });  
  17.   
  18.         var App = Vue.extend();  
  19.   
  20.         var router = new VueRouter();  
  21.   
  22.         router.map({  
  23.             '/home': {component: Home},  
  24.             '/about': {component: About}  
  25.         });  
  26.   
  27.         router.redirect({// 首先展示此页面  
  28.             '/': '/about'  
  29.         })  
  30.   
  31.         router.start(App, '#app');  
  32.     }  
  33. </script>  
b.  嵌套路由
[html]  view plain  copy
  1. <body>  
  2.     <div id="app">  
  3.         <a v-link="{path: '/home'}">home</a>  
  4.         <a v-link="{path: '/about'}">about</a>  
  5.         <router-view></router-view>  
  6.     </div>  
  7.   
  8.     <template id="home">  
  9.         <p>home-content</p>  
  10.         <a v-link="{path: '/home/new'}">new</a>  
  11.         <a v-link="{path: '/home/old'}">old</a>  
  12.         <router-view></router-view>  
  13.     </template>  
  14.   
  15.     <template id="new">  
  16.         <p>new-content</p>  
  17.     </template>  
  18.   
  19.     <template id="old">  
  20.         <p>old-content</p>  
  21.     </template>  
  22.   
  23.     <template id="about">  
  24.         <p>about-content</p>  
  25.     </template>  
  26. </body>  
  27. <script>  
  28.     window.onload = function() {  
  29.         var Home = Vue.extend({  
  30.             template: '#home'  
  31.         });  
  32.   
  33.         var New = Vue.extend({  
  34.             template: '#new'  
  35.         });  
  36.   
  37.         var Old = Vue.extend({  
  38.             template: '#old'  
  39.         });  
  40.   
  41.         var About = Vue.extend({  
  42.             template: '#about'  
  43.         });  
  44.   
  45.         var App = Vue.extend();  
  46.   
  47.         var router = new VueRouter();  
  48.   
  49.         router.map({  
  50.             '/home': {  
  51.                 component: Home,  
  52.                 subRoutes: {// 子路由  
  53.                     '/new': {component: New},  
  54.                     '/old': {component: Old}  
  55.                 }  
  56.             },  
  57.             '/about': {  
  58.                 component: About  
  59.             }  
  60.         });  
  61.   
  62.         router.redirect({// 首先展示此页面  
  63.             '/': 'about'  
  64.         })  
  65.   
  66.         router.start(App, '#app');  
  67.     }  
  68. </script>  

b. 路由进阶

[html]  view plain  copy
  1. <!DOCTYPE html>    
  2.     <html lang="en">    
  3.     <head>    
  4.         <meta charset="UTF-8">    
  5.         <title>index</title>    
  6.         <style>    
  7.             * {    
  8.                 margin: 0;    
  9.                 padding: 0;    
  10.             }    
  11.             .v-link-active {/* 处于当前页面的含有 v-link 属性的元素自动加上 v-link-active 的 class */    
  12.                 background: red;    
  13.             }    
  14.             .customClass {/* 自定义选中时的 class */    
  15.                 background: blue;    
  16.             }    
  17.         </style>    
  18.         <script src="js/vue.js"></script>    
  19.         <script src="js/vue-router.js"></script>    
  20.     </head>    
  21.     <body>    
  22.         <div id="app">    
  23.             <a v-link="{path: '/home', activeClass: 'customClass'}">home</a>    
  24.             <a v-link="{path: '/about'}">about</a>    
  25.             <router-view></router-view>    
  26.         </div>    
  27.   
  28.         <template id="home">    
  29.             <p @click="say">home-content(点击输出 route 对象)</p>    
  30.             <p>route 对象：{{ $route | json }}</p>    
  31.             <a v-link="{path: '/home/new'}">new</a>    
  32.             <a v-link="{path: '/home/old'}">old</a>    
  33.             <router-view></router-view>    
  34.         </template>    
  35.   
  36.         <template id="new">    
  37.             <p>new-content</p>    
  38.         </template>    
  39.   
  40.         <template id="old">    
  41.             <p>old-content</p>    
  42.         </template>    
  43.   
  44.         <template id="about">    
  45.             <p>about-content</p>    
  46.         </template>    
  47.     </body>    
  48.     <script>    
  49.         window.onload = function() {    
  50.             var Home = Vue.extend({    
  51.                 template: '#home',    
  52.                 methods: {    
  53.                     say: function() {    
  54.                         console.log(this.$route)    
  55.                     }    
  56.                 },    
  57.                 route: {    
  58.                     data: function(transition) {// 此组件链接改变时的钩子  
  59.                         console.log(transition.from.path?'从'+ transition.from.path +'到'+ transition.to.path:'初始化');  
  60.                         transition.next({  
  61.                             currentPath: '/about'  
  62.                         })  
  63.                     }  
  64.                 }    
  65.             });    
  66.   
  67.             var New = Vue.extend({    
  68.                 template: '#new'    
  69.             });    
  70.   
  71.             var Old = Vue.extend({    
  72.                 template: '#old'    
  73.             });    
  74.   
  75.             var About = Vue.extend({    
  76.                 template: '#about'    
  77.             });    
  78.   
  79.             var App = Vue.extend({    
  80.                 data: function() {    
  81.                     return {    
  82.                     }    
  83.                 }    
  84.             });    
  85.   
  86.             var router = new VueRouter();    
  87.   
  88.             router.map({// 映射路由    
  89.                 '/home': {    
  90.                     component: Home,    
  91.                     subRoutes: {// 子路由    
  92.                         '/new': {component: New},    
  93.                         '/old': {component: Old}    
  94.                     }    
  95.                 },    
  96.                 '/about': {    
  97.                     component: About    
  98.                 }    
  99.             });    
  100.   
  101.             router.redirect({// 首先展示此页面    
  102.                 '/': 'about'    
  103.             });  
  104.   
  105.             router.beforeEach(function() {// 全局钩子  
  106.                 console.log('切换前');  
  107.             });  
  108.   
  109.             router.afterEach(function() {// 全局钩子  
  110.                 console.log('切换后');  
  111.             });  
  112.   
  113.             router.start(App, '#app');    
  114.         }    
  115.     </script>    
  116. </html>   

编写插件示例：(配合es6语法，待更新)

a. 自调用

myPlugin.js:

[html]  view plain  copy
  1. import Vue from 'vue';  
  2.   
  3. ;(function () {  
  4.     var MyPlugin = {};  
  5.   
  6.     MyPlugin.install = function (Vue, options) {  
  7.         Vue.directive('mySex', {  
  8.             inserted(el, binding) {  
  9.                 console.log(binding.value)  
  10.             }  
  11.         })  
  12.   
  13.         Vue.prototype.$sex = options.sex;  
  14.         Vue.prototype.$say = function() {  
  15.             console.log(this.$sex)  
  16.         };  
  17.     };  
  18.   
  19.     Vue.use(MyPlugin, {sex: 'male'});// 这里调用后，引用该文件无需再调用  
  20. })();  
main.js:
[html]  view plain  copy
  1. import Vue from 'vue';  
  2. import MyPlugin from 'js/myPlugin.js';  

b. export default

myPlugin.js:

[html]  view plain  copy
  1. import Vue from 'vue';  
  2.   
  3. export default {  
  4.     install(Vue, options) {  
  5.         Vue.directive('mySex', {  
  6.             inserted(el, binding) {  
  7.                 console.log(binding.value)  
  8.             }  
  9.         })  
  10.   
  11.         Vue.prototype.$sex = 'female';  
  12.         Vue.prototype.$say = function() {  
  13.             console.log(this.$sex)  
  14.         };  
  15.     }  
  16. }  
main.js:

[html]  view plain  copy
  1. import Vue from 'vue';  
  2. import MyPlugin from 'js/myPlugin.js';  
  3.   
  4. Vue.use(MyPlugin, {sex: 'male'});// 这里需要调用一次  

c. 自定义组件(也是一种插件方式)

myPlugin.vue:

[html]  view plain  copy
  1. <template>  
  2.     <div class="sexClass" @click="say"><slot name="ctn">{{ sex }}</slot></div>  
  3. </template>  
  4.   
  5. <script>  
  6.     import Vue from 'vue';  
  7.   
  8.     export default {  
  9.         data: function() {  
  10.             return {  
  11.                 sex: 'male'  
  12.             }  
  13.         },  
  14.         methods: {  
  15.             say: function() {  
  16.                 console.log(this.sex);  
  17.             }  
  18.         }  
  19.     }  
  20. </script>  
  21.   
  22. <style>  
  23.     .sexClass {  
  24.         background: red;  
  25.     }  
  26. </style>  
main.js:
[html]  view plain  copy
  1. import Vue from 'vue';  
  2. import MyPlugin from 'components/myPlugin.vue';  
  3.   
  4. new Vue({  
  5.     el: '#app',  
  6.     components: {  
  7.         'my-plugin': MyPlugin  
  8.     }  
  9. })  
index.html:

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8" />  
  5.     <title>demo</title>  
  6. </head>  
  7. <body>  
  8.     <div id="app">  
  9.         <my-plugin><div slot="ctn"><button>点击这里</button></div></my-plugin><!-- 在这里使用组件 -->  
  10.     </div>  
  11. </body>  
  12. </html>  
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue