定义Vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：

• 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
• 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
  
  

全局组件定义的三种方式

• 使用 Vue.extend 配合 Vue.component 方法：
• [AppleScript] 纯文本查看 复制代码

  var login = Vue.extend({
        template: '<h1>登录</h1>'
      });
      Vue.component('login', login);

• 直接使用 Vue.component 方法：
• [AppleScript] 纯文本查看 复制代码

  Vue.component('register', {
        template: '<h1>注册</h1>'
      });

• 将模板字符串，定义到script标签种：
• [AppleScript] 纯文本查看 复制代码

  <script id="tmpl" type="x-template">
        <div><a href="#">登录</a> | <a href="#">注册</a></div>
      </script>

• 同时，需要使用 Vue.component 来定义组件：
• [AppleScript] 纯文本查看 复制代码

  Vue.component('account', {
        template: '#tmpl'
      });

• 注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

  组件中展示数据和响应事件
  • 在组件中，data需要被定义为一个方法，例如：
  • [AppleScript] 纯文本查看 复制代码

    Vue.component('account', {
          template: '#tmpl',
          data() {
            return {
              msg: '大家好！'
            }
          },
          methods:{
            login(){
              alert('点击了登录按钮');
            }
          }
        });

  • 在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问；
    
  
  

定义Vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：

• 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
• 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；
  
  

全局组件定义的三种方式

• 使用 Vue.extend 配合 Vue.component 方法：
• [AppleScript] 纯文本查看 复制代码

  var login = Vue.extend({
        template: '<h1>登录</h1>'
      });
      Vue.component('login', login);

• 直接使用 Vue.component 方法：
• [AppleScript] 纯文本查看 复制代码

  Vue.component('register', {
        template: '<h1>注册</h1>'
      });

• 将模板字符串，定义到script标签种：
• [AppleScript] 纯文本查看 复制代码

  <script id="tmpl" type="x-template">
        <div><a href="#">登录</a> | <a href="#">注册</a></div>
      </script>

• 同时，需要使用 Vue.component 来定义组件：
• [AppleScript] 纯文本查看 复制代码

  Vue.component('account', {
        template: '#tmpl'
      });

• 注意： 组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

  组件中展示数据和响应事件
  • 在组件中，data需要被定义为一个方法，例如：
  • [AppleScript] 纯文本查看 复制代码

    Vue.component('account', {
          template: '#tmpl',
          data() {
            return {
              msg: '大家好！'
            }
          },
          methods:{
            login(){
              alert('点击了登录按钮');
            }
          }
        });

  • 在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问；