• vue.js 组件引用之初级


    1. 构造组件,及组件引用:1.1 构造一个组件,1.2 注册一个组件,1.3  实例化Vue()即引用Vue()

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <script src="./vue/vue.js"></script>
     8     <title>Document</title>
     9 </head>
    10 <body>
    11     <div id="box">
    12         <ccc></ccc>
    13     </div>
    14     <ccc></ccc>
    15     <script>
    16         // 构造组件,使用extend()字样进行
    17         var c = Vue.extend({
    18             template: '<h3>这是一个H3标题标签</h3>'
    19         });
    20         // 注册组件,注册一个名称为ccc ,内容为c的组件
    21         Vue.component('ccc', c);
    22         new Vue({
    23             el: "#box",
    24         });
    25     </script>
    26 </body>
    27 </html>

    运行结果:

    2. 引用几次,就调用几次

     1 <body>
     2     <div id="box1">
     3         <ccc></ccc>
     4     </div>
     5     <div id="box2">
     6         <ccc></ccc>
     7     </div>
     8     <ccc></ccc>
     9     <script>
    10         // 构造组件
    11         var c = Vue.extend({
    12             template: "<h3>这是一个测试字符串</h3>"
    13         });
    14         // 注册组件
    15         Vue.component("ccc", c);
    16         // 引用Vue
    17         new Vue({
    18             el: "#box1",
    19         });
    20         new Vue({
    21             el: "#box2",
    22         });
    23     </script>
    24 </body>

    运行结果:

    3. 局部注册,只有局部才能引用

     1 <body>
     2     <div id="box1">
     3         <ccc></ccc>
     4     </div>
     5     <div id="box2">
     6         <ccc></ccc>
     7     </div>
     8     <ccc></ccc>
     9     <script>
    10         // 构造组件
    11         var c = Vue.extend({
    12             template: "<h3>这是一个测试字符串</h3>"
    13         });
    14         // 引用Vue + 局部注册
    15         new Vue({
    16             el: "#box1",
    17             components: {
    18                 'ccc': c,
    19             },
    20         });
    21         // 虽然有引用,但是没有注册,所以也不会进行替换
    22         new Vue({
    23             el: "#box2",
    24         });
    25     </script>
    26 </body>

    运行结果:

    4. 父组件与子组件,即在父组件下注册子组件,同样可以实现替换

    5.注册全局组件

     1 <body>
     2     <div id="box1">
     3         <ccc></ccc>
     4     </div>
     5     <div id="box2">
     6         <ccc></ccc>
     7     </div>
     8     <ccc></ccc>
     9     <script>
    10         Vue.component('ccc', {
    11             template: "这是一个测试组件,这是ccc",
    12         });
    13 
    14         new Vue({
    15             el: "#box1"
    16         });
    17     </script>
    18 </body>

    运行结果:

    6. 简化组件的注册

     1 <body>
     2     <div id="box1">
     3         <aaa></aaa>
     4         <bbb></bbb>
     5     </div>
     6 
     7     <ccc></ccc>
     8     <script>
     9         var a = Vue.extend({
    10             template: "<h3>这是组件a 的内容</h3>",
    11         });
    12         var b = Vue.extend({
    13             template: "<h3>这是组件b 的内容</h3>",
    14         });
    15         new Vue({
    16             el: "#box1",
    17             components: {
    18                 'aaa': a,
    19                 'bbb': b,
    20             }
    21         });
    22     </script>
    23 </body>

    运行结果:

    7. 使用script 标签分离模板:

     1 <body>
     2     <div id="box1">
     3         <aaa></aaa>
     4         <bbb></bbb>
     5     </div>
     6     <script type="x-template" id="a">
     7         <h3>我是组件a</h3>
     8         <p>我是段落a</p>
     9     </script>
    10     <script type="x-template" id="b">
    11         <h3>我是组件b</h3>
    12         <p>我是段落b</p>
    13     </script>
    14     <script>
    15         new Vue({
    16             el: "#box1",
    17             components: {
    18                 'aaa': {
    19                     template: '#a',
    20                 },
    21                 'bbb': {
    22                     template: '#b'
    23                 }
    24             }
    25         });
    26     </script>
    27 </body>

    运行结果:

  • 相关阅读:
    JavaScript学习心得(六)
    JavaScript学习心得(五)
    JavaScript学习心得(四)
    JavaScript学习心得(三)
    JavaScript学习心得(二)
    JavaScript学习心得(一)
    socket异步接收信息
    DataTable将行转成列
    highcharts的柱状图边线
    w3cSchool jquery学习
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8530345.html
Copyright © 2020-2023  润新知