VUE组件化开发

作者: 小黄不头秃 | 来源:发表于2023-06-05 10:49 被阅读0次

Vue 学习记录二
简单情况
Vue-基础语法（三）
vue项目实践后的一些体会感想
Vue源码阅读（二）
Vue单文件组件开发的基本套路--以常用的Modal模态框组件开
vue(2)
React组件一
如何开发vue、react、angular的组件库教程
vue 实现数据共享模式.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        组件化开发思想
        组件注册
        Vue调试工具用法
        组件间数据交互
        组件插槽
        基于组件的案例
     -->

     <!-- 
         组件规范：web components
      -->
      <!-- 
          组件的注册（全局组件注册法）
          Vue.component(组件名称,{
              data:组件数据,
              template:组件模板内容
          })
       -->
       <div id="app">
           <button-counter></button-counter>
           <hello-world></hello-world>
           <hello-tom></hello-tom>
       </div>
       <script src="./vue/vue.js"></script>
       <script>
        /*
        组件注册的注意事项：
        （1）data必须是一个函数：分析函数与普通对象的对比
        （2）组件模板内容必须是单个根元素
        （3）组件模板内容可以是模板字符串
            template:`
            <div>
                <button @click="handel">点击了{{count}}次</button>
            </div>
            `
        （4）如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符模板中使用驼峰式的方法使用组件，
            但是在普通标签中，必须使用短横线的方式使用组件
        **/    
           Vue.component('button-counter',{
               data:function(){
                   return {
                       count:0
                   }
               },
               template:'<button @click="handel">点击了{{count}}次</button>',
               methods:{
                   handel:function(){
                       this.count++;
                   }
               }
           });
        //    局部组件注册
        var HelloWorld = {
            data:function(){
                return {
                    msg:"hello world"
                    }
            },
            template:'<div>{{msg}}</div>'
        };
        var HelloTom = {
            data:function(){
                return {
                    msg:"hello tom"
                    }
            },
            template:'<div>{{msg}}</div>'
        };
           var vm = new Vue({
               el:"#app",
               data:{},
               methods:{},
               components:{
                   'hello-world':HelloWorld,
                   'hello-tom':HelloTom
               }
           });
       </script>
</body>
</html>