【郑州校区】前端笔记Vue项目第3天 1

【郑州校区】前端笔记Vue项目第3天 1

组件

组件 (Component) 是 Vue.js 最强大的功能之一
组件可以扩展 HTML 元素，封装可重用的代
组件注册全局注册

Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象
全局组件注册后，任何vue实例都可以用
组件基础用

[AppleScript] 纯文本查看 复制代码

<div id="example">

  <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用  -->  

  <my-component></my-component>

</div>

<script>

    //   注册组件 

    // 1、 my-component 就是组件中自定义的标签名

    Vue.component('my-component', {

      template: '<div>A custom component!</div>'

    })

 

    // 创建根实例

    new Vue({

      el: '#example'

    })

 

</script>

组件注意事项

组件参数的data值必须是函数同时这个函数要求返回一个对象
组件模板必须是单个根元素
组件模板的内容可以是模板字符串

[AppleScript] 纯文本查看 复制代码

<div id="app">
     <!-- 
        4、  组件可以重复使用多次 
          因为data中返回的是一个对象所以每个组件中的数据是私有的
          即每个实例可以维护一份被返回对象的独立的拷贝   
    --> 
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
      <!-- 8、必须使用短横线的方式使用组件 -->
     <hello-world></hello-world>
  </div>
 
<script type="text/javascript">
    //5  如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件，
    // 7、但是在普通的标签模板中，必须使用短横线的方式使用组件
     Vue.component('HelloWorld', {
      data: function(){
        return {
          msg: 'HelloWorld'
        }
      },
      template: '<div>{{msg}}</div>'
    });
     
     
     
    Vue.component('button-counter', {
      // 1、组件参数的data值必须是函数 
      // 同时这个函数要求返回一个对象  
      data: function(){
        return {
          count: 0
        }
      },
      //  2、组件模板必须是单个根元素
      //  3、组件模板的内容可以是模板字符串  
      template: `
        <div>
          <button @click="handle">点击了{{count}}次</button>
          <button>测试123</button>
            #  6 在字符串模板中可以使用驼峰的方式使用组件   
           <HelloWorld></HelloWorld>
        </div>
      `,
      methods: {
        handle: function(){
          this.count += 2;
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
         
      }
    });
  </script>

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】前端笔记Vue项目 第3天 1

0 个回复

【郑州校区】前端笔记Vue项目第3天 1