Vue组件化开发

最新推荐文章于 2024-05-02 08:06:07 发布

别影响我打怪

最新推荐文章于 2024-05-02 08:06:07 发布

阅读量56

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43370373/article/details/118897491

版权

vue javascript

Vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<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>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件注册</title>
</head>
<body>
  <div id="app">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
  /*
    组件注册
  */
  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>
</body>
</html>

在这里插入图片描述

  <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>

别影响我打怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件化开发

组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素，封装可重用的代组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象全局组件注册后，任何vue实例都可以用<div id="example"&gt
复制链接

扫一扫