day42 vue基础04 插槽表达式和组件化

2022-07-29 22:32:14 阅读：146 来源： 互联网

标签：vue aaa name 04 app Vue var data day42

1 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>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
         
      </div>
    </div>

    <script>
           var app = new Vue({
        el: "#app",
        props: [],
        created() {},
        components:{
            
        },
        beforeMount() {},
        mounted() {},
        beforeUpdate() {},
        updated() {},
        beforeDestroy() {},
        destroyed() {},
        data: {
          name: "Vue.js",
        },

        methods: {
          bbb() {},
          aaa() {},
        },
        computed: {},
        watch: {},
        filters: {},
      });

      
    </script>
  </body>
</html>

2 全局组件以及局部组件 1 组件化开发优点1 非常适合多人开发每个同事开发不同的模块 2 代码的复用性 2 有些相同模块甚至不同项目都可用用举例相同项目的不同页面都可以用header模块但是header模块只开发一次

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <aaa></aaa>
        <bbb></bbb>
      </div>
    </div>
    <script>
        Vue.component('aaa',{
            data:function(){
                return {
                    name:'hello wolrd'
                }
            },
            template:'<div>{{name}}</div>'
        })
        var bbb = {
            template:'<div>我是局部组件</div>'
        }
 var app = new Vue({
        el: "#app",
        props: [],
        created() {},
        components:{  
            bbb    
        },
        beforeMount() {},
        mounted() {},
        beforeUpdate() {},
        updated() {},
        beforeDestroy() {},
        destroyed() {},
        data: {
          name: "Vue.js",
        },

        methods: {
          bbb() {},
          aaa() {},
        },
        computed: {},
        watch: {},
        filters: {},
      });  
    </script>
  </body>
</html>

2 模板中为什么要return data数据为了解释这个谜题我们看下面这段代码第一种是 vue里面尤雨溪设计的用法

 function a() {
            return {
                name:'cluo',
                age:18
            }
        }

        let vuecomponent1 = a ()
        let vuecomponent2 = a ()
        let vuecomponent3 = a ()
        vuecomponent1.name = '梅西'
        console.log(vuecomponent1)
        console.log(vuecomponent2)
        console.log(vuecomponent3)

第二种是我们想试验的是否可行的用法

const obj = {
            name:'cluo',
            age:18
        }

        function a(){
            return obj
        }
        let vuecomponent1 = a()
        let vuecomponent2 = a()
        let vuecomponent3 = a()

        vuecomponent1.name ='梅西'
        console.log(vuecomponent1)
        console.log(vuecomponent2)
        console.log(vuecomponent3)

防止变量污染,形成独立的对象

3 父子组件传值之父传子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <child :dfdfdf="day"></child>
      </div>
    </div>
    <script>
        //局部组件
        var child = {
            props:['dfdfdf'],
            template:'<p>{{dfdfdf}}</p>'
        }
      var app = new Vue({
        el: "#app",
        props: [],
        created() {},
        components:{  
            child    
        },
        beforeMount() {},
        mounted() {},
        beforeUpdate() {},
        updated() {},
        beforeDestroy() {},
        destroyed() {},
        data: {
          name: "Vue.js",
          day:'星期12345我都给你零花钱'
        },

        methods: {
          bbb() {},
          aaa() {},
        },
        computed: {},
        watch: {},
        filters: {},
      });

      
    </script>
  </body>
</html>

4 父子组件传值之子传父

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
          <child @anlarge-text='bigger'>
          </child>  
          <p :style="{fontSize:fontSize+'px'}">
                aaa
          </p>
    </div>
    <script>
        // 子组件
        var child = {
            template:`<button @click="$emit('anlarge-text',9)">我是一个子组件</button>`
        }
      // 父组件
      var app = new Vue({
        el: "#app",
        props: [],
      
        created() {},
        components:{
            child    
        },
        beforeMount() {},
        mounted() {},
        beforeUpdate() {},
        updated() {},
        beforeDestroy() {},
        destroyed() {},
        data: {
         msg:'hello vue',
         fontSize:24
        },

        methods: {
          bbb() {},
          aaa() {},
          bigger(n){
              console.log('进入bigger里面了')
              this.fontSize +=n
          }
        },
        computed: {},
        watch: {},
        filters: {},
      });

      
    </script>
  </body>
</html>

5 vue中dom操作的超好用的语法糖ref

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <p ref='p'>
                我是p标签
            </p>
            <h1 ref='fdfdfdfe'>
                fdfsdfsdfsdf
            </h1>
            <aaa ref='aaa'></aaa>
        </div>
    </div>
    <script>
        Vue.component('aaa', {
            data: function () {
                return {
                    name: 'hello wolrd'
                }
            },
            template: '<h1>{{name}}</h1>'
        })
        var app = new Vue({
            el: "#app",
            props: [],
            created() { },
            components: {
            },
            beforeMount() { },
            //页面渲染完成之后
            mounted() { 
                console.log(this.$refs.p)
                console.log(this.$refs.fdfdfdfe)
                this.$refs.aaa.name ='你好世界'
                console.log(this.$refs.aaa.name  )
            },
            beforeUpdate() { },
            updated() { },
            beforeDestroy() { },
            destroyed() { },
            data: {
                name: "Vue.js",
            },

            methods: {
                bbb() { },
                aaa() { },
            },
            computed: {},
            watch: {},
            filters: {},
        });


    </script>
</body>

</html>

新增两个新生命周期

  activated(){
  },
  deactivated(){},

7 插槽1 匿名插槽

   <header1>共享单车后台管理</header1>
   <header1>小米手机后台管理</header1>
   <h1>我是主页面的东西 pro商品页面</h1>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
           <aaaa> fgdgfdfg dfg fgd d</aaaa>
      </div>
    </div>

    <script>
       
       Vue.component('aaaa',{
           template:`
           <div>
               <h1>我是上面</h1>
               <slot></slot>
           </div>
           `
       })
      var app = new Vue({
        el: "#app",
        props: [],
        created() {},
        components:{
            
        },
        beforeMount() {},
        mounted() {},
        beforeUpdate() {},
        updated() {},
        beforeDestroy() {},
        destroyed() {},
        data: {
          name: "Vue.js",
        },

        methods: {
          bbb() {},
          aaa() {},
        },
        computed: {},
        watch: {},
        filters: {},
      });

      
    </script>
  </body>
</html>

8 具体名字的插槽实际用法可用锁死页面的格式然后传入不同的数据可用得到完全不同的页面极大的复用了代码并且还可以锁死格式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <aaa>
            <h1 slot='header'>slot=header我要往这个里面跳</h1>
              <p>
                没人要的我要跳
              </p> 
            <h1 slot='footer'>slot=footer我要往这个里面跳</h1>
        </aaa>
      </div>
    </div>
    <script>
        Vue.component('aaa',{
            template:`
            
            <div>
             <header>
                 <slot name='header'></slot>
             </header>
             <main>
                 <slot></slot>
             </main>
             <footer>
                <slot name='footer'></slot>
             </footer>
         </div>
            `
        })



    
      var app = new Vue({
        el: "#app",
        props: [],
        created() {},
        components:{      
        },
        beforeMount() {},
        mounted() {},
        beforeUpdate() {},
        updated() {},
        beforeDestroy() {},
        destroyed() {},
        data: {
          name: "Vue.js",
        },

        methods: {
          bbb() {},
          aaa() {},
        },
        computed: {},
        watch: {},
        filters: {},
      });

      
    </script>
  </body>
</html>

9 作用域插槽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <aaa>
            <div slot-scope='props'>
                <h1>dfdfdfdfdfdfdfdfdfdf   {{props.text}}</h1>
            </div>
        </aaa>
      </div>
    </div>
    <script>
        Vue.component('aaa',{
            template:`
            <div>
              <slot text='我有个文本 想传给你'></slot>
          </div>
            `
        })
    
      var app = new Vue({
        el: "#app",
        props: [],
        created() {},
        components:{      
        },
        beforeMount() {},
        mounted() {},
        beforeUpdate() {},
        updated() {},
        beforeDestroy() {},
        destroyed() {},
        data: {
          name: "Vue.js",
        },

        methods: {
          bbb() {},
          aaa() {},
        },
        computed: {},
        watch: {},
        filters: {},
      });

      
    </script>
  </body>
</html>

标签：vue,aaa,name,04,app,Vue,var,data,day42
来源： https://www.cnblogs.com/he-maoke/p/16533697.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

day42 vue基础04 插槽表达式和组件化