Vue组件技术 | 杨先生の小破站

Template制作模版

直接写在选项里的模板

直接在构造器里的template选项后边编写。这种写法比较直观，但是如果模板Html代码太多，不建议这么写。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="assets/vue.js"></script>
    <title>template模板案例</title>
</head>
<body>
    <h2>template模板案例</h2>
   <hr>
   <div id="app">

   </div>

   <script>
       var app = new Vue({
           el:'#app',
           data:{},
           template:
                '<h2 style="color:red">这是第一个标签模板</h2>'
       });
   </script>
</body>
</html>

写在template标签里的模板

这种写法更像是在写HTML代码，就算不会写Vue的人，也可以制作页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="assets/vue.js"></script>
    <title>template模板案例</title>
</head>
<body>
    <h2>template模板案例</h2>
    <hr>
    <div id="app">
        <template id="demo2">
            <h2 id="demo2">这是第二种标签模板</h2>
        </template>
    </div>

    <script>
        var app =new Vue({
            el:'#app',
            data:{},
            template:'#demo2'
        });
    </script>
</body>
</html>

写在script标签里的模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="assets/vue.js" ></script>
    <title>template模板案例</title>
</head>
<body>
    <h2>template模板案例</h2>
    <hr>
    <div id="app">
    </div>
    <script type="x-template" id="demo3">
        <h2 style="color:red">这是第三种：script标签模板</h2>
    </script>

    <script>
        var app = new Vue({
            el:'#app',
            data:{},
            template:'#demo3'
        })
    </script>
</body>
</html>

Component初始组件

component组件是Vue学习的重点。所以必须学好Vue component。其实组件就是制作自定义的标签，这些标签在HTML中是没有的。

全局化注册组件

全局化就是在构造器的外部用Vue.component来注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局化组件注册</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h2>全局化组建注册</h2>
    <hr>
    <div id="app">
       <jeffrey></jeffrey>
    </div>
    <script>
        // 注册全局组件
        Vue.component('jeffrey',{
            template:`<h2 style="color:red">全局化组件注册</h2>`
        });
        var  app = new Vue({
         el:'#app'
         

     });
    </script>
</body>
</html>

局部注册组件局部

局部注册组件局部注册组件和全局注册组件是向对应的，局部注册的组件只能在组件注册的作用域里进行使用，其他作用域使用无效。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>全局化组件注册</title>

    <script src="../assets/js/vue.js"></script>

</head>

<body>

    <h2>全局化组建注册</h2>

    <hr>

    <div id="app">

       <jeffrey></jeffrey>

</div>

    <script>

            var  app = new Vue({

         el:'#app',

	//局部组件注册

         components:{

             'jeffrey': {

                 template:<h2 style="color:red">局部组件注册</h2>

             }

         }

     });

    </script>

</body>

</html>

组件和指令的区别

组件注册的是一个标签，而指令注册的是已有标签里的一个属性。在实际开发中还是用组件比较多，指令用的比较少。

Component 组件props 属性设置

props选项就是设置和获取标签上的属性值的，例如我们有一个自定义的组件,这时我们想给他加个标签属性写成意思就是熊猫来自中国，当然这里的China可以换成任何值。定义属性的选项是props。

定义属性并获取属性值

定义属性我们需要用props选项，加上数组形式的属性名称，例如：props:[‘myproperty’]。在组件的模板里读出属性值只需要用插值的形式，例如.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>局部组件定义属性</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h2>局部组件定义属性</h2>
    <hr>
    <div id="app">
        <jeffrey myproperty="西安" job="java讲师"></jeffrey>

    </div>
    <script>
     var  app = new  Vue({
         el:'#app',
         components:{
             'jeffrey':{
                 template:`<p style='color:red'>我来自{{myproperty}},职业{{job}}</p>`,
                 props:['myproperty','job']
             }
         }
     })
    </script>
</body>
</html>

上面的代码定义了jeffrey的组件，并用props设置了myproperty和job的两个属性值，在myproperty属性值里传递了“西安”给组件。
最后输出的结果是红色字体的：

我来自西安,职业java讲师

属性中带’-‘的处理方式

在写属性时经常会加入’-‘来进行分词，比如：，那这时我们在props里如果写成props:[‘my-job’]是错误的，必须用小驼峰式写法props:[‘myJob’]。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>局部组件定义属性</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <h2>局部组件定义属性</h2>
    <hr>
    <div id="app">
        <jeffrey myproperty="西安" my-job="java讲师"></jeffrey>

    </div>
    <script>
     var  app = new  Vue({
         el:'#app',
         components:{
             'jeffrey':{
                 template:`<p style='color:red'>我来自{{myproperty}},职业{{myJob}}</p>`,
                 props:['myproperty','myJob']
             }
         }
     })
    </script>
</body>
</html>

鉴于此种情况，不建议在属性名称中使用中’-‘字符；

Component 标签

Component 标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件。

定义组件

先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC.

 var componentA={
 template:`<div>I'm componentA</div>`
 }
 
  var componentB={
  template:`<div>I'm componentB</div>`
  }
var componentC={
template:`<div>I'm componentC</div>`
}

在构造器的components选项里加入这三个组件。

components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC,
}

3.我们在html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件。

1	<component v-bind:is="who"></component>

这就是我们的组件标签的基本用法。我们提高以下，给页面加个按钮，每点以下更换一个组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="assets/vue.js"></script>
    <title>Document</title>
</head>
<body>
    
    <div id="app">
    <component v-bind:is="who"></component>
    <button @click="changeComponent">change组件</button>
    </div>
    <script>
        var componentA = {
            template:"<div style='color:red'>I'm componentA</div>"
        }
        var componentB = {
            template:"<div style='color:green'>I'm componentB</div>"
        }
        var componentC ={
            template:"<div style='color:blue'>I'm componentC</div>"
        }

        var app = new Vue({
            el:'#app',
            data:{
                who:'componentA'
            },
            components:{
                "componentA":componentA,
                "componentB":componentB,
                "componentC":componentC
            },
            methods:{
                changeComponent:function(){
                    if(this.who=='componentA'){
                        this.who ='componentB';
                    }else if(this.who=='componentB'){
                        this.who = 'componentC';
                    }else{
                        this.who = 'componentA';
                    }
                }
            }
        });
    </script>
</body>
</html>