VUE -- 自定义控件(标签)

首先我们在 src目录下新建一个目录 叫”component”,建一个mycomponent.vue文件，然后也让他打2句话吧

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<template>   <div id= "mycomponent" >   <h1>我是第一个自定义控件</h1>   <p>{{ msg }}</p>   </div> </template>   <script type= "text/javascript" >   export default {   data(){    return {    msg : "hi i am wjj"    }   }   } </script>

然后在我们的app.vue里调用他

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<template> <div id= "app2" >   <p>{{ message }}</p>   <input v-model= "message" ></input>   <mycomponent></mycomponent> </div> </template>   <script> import mycomponent from './component/mycomponent.vue' export default {   name: 'app2' ,   data () {   return {    message: 'Hello Vue.js!'   }   }, components: { mycomponent } } </script>

这里 有几个知识点

1.Vue的导入操作是在<script></script>标签里。 

2.如果存在子/父控件的概念的话，一定要先初始化/加载子控件 。

效果如下：