Vue学习2

todolist实例：

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>vue练习</title>
 6     
 7 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 9   </head>
10   <body> 
11   <div id="app">    
12 <input type="text" v-model="inputvalue">
13 <button @click="clickbutton">提交</button>
14 <ul>
15   <li v-for="(item,index) of list" :key="index">{{item}}</li>
16 </ul>
17 
18 </div>
19   </body>
20   <script type="text/javascript">
21    var app=new Vue({
22     el:'#app',
23     data:{
24       inputvalue:'',
25       list:[]
26       
27     },
28     methods:{
29       clickbutton:function(){
30         this.list.push(this.inputvalue);
31         this.inputvalue='';
32       }
33     }
34    })
35   </script>
36   </html>

全局组件：

//全局组件
   Vue.component('todo-item', { 
   template:'<li><item></li>'
   })
<ul>
  <todo-item></todo-item>
</ul>

局部组件：

var TodoItem={
  template:'<li>item</li>'
}
   var app=new Vue({
    el:'#app',
    components:{
      'todo-item':TodoItem
    },
    data:{
      inputvalue:'',
      list:[]
      
    },
    methods:{
      clickbutton:function(){
        this.list.push(this.inputvalue);
        this.inputvalue='';
      }
    }
   })
<ul>
  <todo-item></todo-item>
</ul>

 props：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue练习</title>
    
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body> 
  <div id="app">    
<input type="text" v-model="inputvalue">
<button @click="clickbutton">提交</button>
<ul>
  <todo-item v-for="item in list" 
  v-bind:message="item">   
  </todo-item>
</ul>

</div>
  </body>
  <script type="text/javascript">
  //局部组件
  Vue.component('todo-item', { 
     props:['message'],
     template:'<li>{{message}}</li>'
   })

   var app=new Vue({
    el:'#app',
    data:{
      inputvalue:'',
      list:[]
      
    },
    methods:{
      clickbutton:function(){
        this.list.push(this.inputvalue);
        this.inputvalue='';
      }
    }
   })
  </script>
  </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<child v-for="item in list" v-bind:message="item"><child>
</ul>
</div>

<script>
    Vue.component('child',{
        props:["message"],
        template:"<li>{{message}}</li>"
    })
new Vue({
    el:'#app',
    data:{
        list:['Runoob','Google','Taobao']
    }
})
</script>
</body>
</html>

 

posted @ 2018-12-17 14:24  L1230205  阅读(134)  评论(0)  编辑  收藏  举报