2019-07-23 记录

日常

1、荣获vue教程一套
2、食堂可以吃了
3、ion-slides 添加分页

<ion-slides pager></ion-slides>

vue 基本语法

  <div id="app">    
      <input type="text" v-model="value">    
      <button v-on:click="handleClick">提交</button>    
      <ul>      
     	 <li v-for="item in list">{{item}}</li>   
       </ul> 
   </div>

  

  var app = new Vue({      
        el: '#app',     
        data: {       
          content: 'hello',        
          list: [],        
          value: ''     
           },     
           methods: {        
           handleClick: function () {          
           this.list.push(this.value);          
           this.value = '';        
           }      
          }    
       })

vue组件间传值

<div id="app">    
<input type="text" v-model="value">    
<button @click="handleClick">提交</button>    
<ul>       
 <todo-item :item="item" @delete-i="deleteItem1" :index="index" :key="index" v-for="(item,index) in list">      
 </todo-item>    
 </ul>  
 </div>  
 <script>    
 var app = new Vue({    
   el: '#app',      
   data: {        
	   content: 'hello',       
	    list: [],        
	    value: ''      
    },      
    methods: {        
	    handleClick: function () {          
		    this.list.push(this.value);          
		    this.value = '';        
	    },        
	    deleteItem1: function () {          
	    console.log('收到')          
	    this.list.splice(index, 1)       
	     }      
	     },     
      components: {        
      TodoItem: {         
	       props: ['item', 'index'],        
	       template: '<li @click="delete2">{{item}}</li>',        
         	       methods: {            
	           delete2: function () {              
	           console.log(this.index);            
	             this.$emit('delete-i');          
             	 }      
                   }       
                 }     
              }  
        })
 console.log(app.$data.content); 
</script>

遇到问题

1、父组件监听事件不能驼峰，只能小写或者‘-’，
因为：HTML属性值不可以大写