zoukankan      html  css  js  c++  java
  • 26. VUE组件开发分离写法

    VUE开发组件的时候 很不方便,现在我们吧 tempate 中的代码 和 声明、注册、绑定 分离开写:

    有两种方法分离,先说第一种:

     

    第一种是直接  用script标签,然后他的type属性一定要是 "text/x-template",然后可以注册个id,直接在template中调用即可:

    <script type="text/x-template" id="bihu">
        <div>
          <h2>分离写法</h2>
          <p>都是愚蠢的自己。</p>
        </div>
    </script>
    
    <div id="app">
    <m-cpn></m-cpn>
    </div>
    
    <script src="vue.js"></script>
    
    <script>
    
        //注册一个全局组件
        Vue.component('m-cpn',{
          template:'#bihu'
        })
    
        const app = new Vue({
          el:"#app"
        })
        
    </script>

     我尝试过用 class 来寻找,但是失败了,所以只能是id哦,这个方法就这样 ,其他那些父组件子组件都通用(要回去复习一下哦)

    第二种方法: 
      直接用 template 这个标签中写代码,然后配个ID  ,然后也是在template中直接调用:

      <template id="bihu">
          <div>
            <h2>分离写法</h2>
            <p>你懂我的期待。</p>
          </div>
      </template>
    
      <div id="app">
      <m-cpn></m-cpn>
      </div>
    
      <script src="vue.js"></script>
    
      <script>
    
          //注册一个全局组件
          Vue.component('m-cpn',{
            template:'#bihu'
          })
    
          const app = new Vue({
            el:"#app"
          })
    
      </script>

    其实就是 script 标签 换 template 标签。 第二种比较方便。


    局部绑定:

      <script>
          const app = new Vue({
            el:"#app",
            components:{
              'm-cpn':{
                template:'#xxid'
              }
            }
          })
    
      </script>

    本文来自博客园,作者:咸瑜,转载请注明原文链接:https://www.cnblogs.com/bi-hu/p/15022526.html

  • 相关阅读:
    pytest简介
    python @property的用法及含义全面解析
    python的各种推导式(列表推导式、字典推导式、集合推导式)
    python--random库基本介绍
    整理一下python中with的用法
    Python之路:进程、线程
    Python代码风格的良好养成
    Ubuntu 部署Python开发环境
    Python面向对象编程
    Python文件操作
  • 原文地址:https://www.cnblogs.com/bi-hu/p/15022526.html
Copyright © 2011-2022 走看看