vue各种示例展示

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

vm.$mount()-挂载

组件示例(component)：

a. 不使用template标签

b. 使用template标签

c. 局部注册

d. 动态组件

  
    
  
        {{ cur }}  
          
    
  
      
  
 

e. 父子组件通信

  
    

        父：
        
    

    
  

f. 兄弟组件通信

g. 异步组件

	

		
		{{ btn }}
	

计算示例(computed)：

    

        
{{ intro }}
        
        
    

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

    
    
  
        
        点击切换输入框选中状态  
    
  
    

简单的todolist：

使用jquery调用接口数据：

  
    
  
        
{{ list }}
  
    
  
  

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

  
    
  
        
加载中...
  
        
{{ list }}
  
    
  

slot示例：

	

		
			
匿名slot1
			
匿名slot2
			
具名slot1
			
		
	

	
	

activate示例：

	

		
		{{ btn }}
	

vuex示例：

a. 简单计数

  
    

        
{{ num }}
        add
        reduce
    
  

b. 子组件获取Vuex状态

  
    

        父：{{ num }}
        
    
  

c. 拓展状态Getters

    
    
  
        
转换后：{{ num }}，长度：{{ len }}，点击换一换
  
    
  
    
  

d.mutations和actions区别

  
    

        
Time Travel状态正常{{ num }}
        
Time Travel状态不正常{{ num }}
    
  

e. actions中使用Promise

  
    

        
{{ num }}
    
  

f. 模块Modules和根节点状态rootState

  
    

        
{{ num }}
    
  

directive示例：(请注意和vue示例的数据交互使用的是 vnode.context， 待更新)

	export default {
		data() {
			return {
				SC_outer_style: {
				},
				SC_inner_style: {
					height: '50px',
					background: 'red'
				}
			}
		},
		computed: {  
			SC_outer_style() {
				return {
				}
			}
		},
		mounted() {
		},
		methods: {
			init() {
				
			}
		},
		directives: {
			handle: {
				inserted: function(el, binding, vnode) {
					if(Tool.getStyle(el, 'position') == 'static') {
						vnode.context.SC_outer_style = {
							position: 'relative'
						}
					}
				},
			}
		}
	}

vue-router示例：

a. 简单的单页应用

	

		home
		about
		
	

b.  嵌套路由

	

		home
		about
		
	

	

	

	

	

b. 路由进阶

  
      
      
          
          
          
          
          
      
      
        
  
            home  
            about  
              
        
  

          

          

          

          
      
      
 

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

a. 自调用

myPlugin.js:

import Vue from 'vue';

;(function () {
    var MyPlugin = {};

    MyPlugin.install = function (Vue, options) {
        Vue.directive('mySex', {
            inserted(el, binding) {
                console.log(binding.value)
            }
        })

        Vue.prototype.$sex = options.sex;
        Vue.prototype.$say = function() {
            console.log(this.$sex)
        };
    };

    Vue.use(MyPlugin, {sex: 'male'});// 这里调用后，引用该文件无需再调用
})();

main.js:

import Vue from 'vue';
import MyPlugin from 'js/myPlugin.js';

b. export default

myPlugin.js:

import Vue from 'vue';

export default {
    install(Vue, options) {
        Vue.directive('mySex', {
            inserted(el, binding) {
                console.log(binding.value)
            }
        })

        Vue.prototype.$sex = 'female';
        Vue.prototype.$say = function() {
            console.log(this.$sex)
        };
    }
}

main.js:

import Vue from 'vue';
import MyPlugin from 'js/myPlugin.js';

Vue.use(MyPlugin, {sex: 'male'});// 这里需要调用一次

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

myPlugin.vue:

main.js:

import Vue from 'vue';
import MyPlugin from 'components/myPlugin.vue';

new Vue({
	el: '#app',
	components: {
		'my-plugin': MyPlugin
	}
})

index.html:

	
	


	

		
点击这里