vue定义全局组件

445 0
2019-11-6 18:01:41
显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  5.                 <meta charset="utf-8">
  6.                 <title>vue</title>
  7.         </head>
  8.         <body>
  9.         <div id="app">
  10.          <input type="text" v-model="inputText" />
  11.          <input v-on:click="click()" type="submit" value="提交" />
  12.          <ul>
  13.                 <!-- <li v-for="(item,k) in arr">{{item}}</li> -->
  14.                 <todo-item v-bind:content="item" v-for="item in arr"></todo-item>
  15.          </ul>

  16.         </div>
  17.                
  18.         </body>
  19.         <script>
  20.                 //定义全局组件
  21.                 Vue.component("TodoItem",{
  22.                     props:['content'],
  23.                         template:"<li>{{content}}</li>"
  24.                        
  25.                 })
  26.                 var app = new Vue({
  27.                         el:"#app",
  28.                         data:{
  29.                           message:'this is vue',
  30.                           inputText:'',
  31.                           arr:[],
  32.                         },
  33.                         methods:{
  34.                                 click:function(){
  35.                                         this.arr.push(this.inputText);
  36.                                         this.inputText="";
  37.                                 }
  38.                         }
  39.                 });
  40.                
  41.         </script>
  42.        
  43. </html>
复制代码