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.如果存在子/父控件的概念的话，一定要先初始化/加载子控件 。

效果如下：