vue div点击事件_Vue-组件化开发

一、组件化开发思想

不同的功能封装到不同的组件中，组件能够专业分工，重复使用，拼装组合。

二、组件注册

全局组件注册与使用

Vue.component(组件名称, {
     
    data: 组件数据, 
    template: 组件模板内容 
}) 

<组件名称></组件名称>

示例：点击后，显示累计的点击次数

<div id="app">
    <!-- 2使用 -->
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    // 1注册
    Vue.component('button-counter', {
    
        data: function(){
    
            return {
    
                count: 0
            }
        },
        template: '<button @click="handle">点击了{
    {count}}次</button>',
        methods: {
    
            handle: function(){
    
                this.count += 2;
           }
        }
    })
    var vm = new Vue({
    
        el: '#app',
        data: {
    
        }
    });
</script>

1. 组件参数的data值必须是函数

2. 组件模板必须是单个根元素

3. 组件模板的内容可以是模板字符串

template: `
        <div>
          <button @click="handle">点击了{
    {count}}次</button>
          <button>测试123</button>
        </div>
      `,

写到反引号里，可以更规范的写标签，不用写成一长串。

4. 组件命名方式，尽量用短横线，用驼峰命名，使用时也得是短横线。

最好就别用驼峰命名组件了

Vue.component('HelloWorld', ....... });
<hello-world></hello-world>

局部组件注册与使用

注册

Vue.component('test-com',{
    
    template: '<div>Test<hello-world></hello-world></div>'
});
    var HelloWorld = {
    
        data: function(){
    
            return {
    
                msg: 'HelloWorld'
            }
        },
        template: '<div>{
    {msg}}</div>'
    };
    var HelloTom = {
    
        data: function(){
    
            return {
    
                msg: 'HelloTom'
            }
        },
        template: '<div>{
    {msg}}</div>'
    };
    var vm = new Vue({
    
        el: '#app',
        data: {
    
        
        },
        components: {
    
            'hello-world': HelloWorld,
            'hello-tom': HelloTom
        }
    });

使用

局部组件只能在注册他的父组件中使用

<div id="app">
    <hello-world></hello-world>
    <hello-tom></hello-tom>
</div>

三、Vue调试工具用法

<