Vue之for列表渲染、methods事件和model表单绑定

文档：https://cn.vuejs.org/v2/guide/list.html

v-for指令可以绑定数组的数据来渲染一个项目列表

v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。

    
    
    
    



  

    

      {{ todo.text }}
    
  



var app = new Vue({
  el: '#app',
  data: {
   todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛X项目' }
    ]
  }
})

效果

  

    {{ todo.text }}-{{index}}
  

文档：https://cn.vuejs.org/v2/guide/list.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-for

    
    
    
    



  

    

      {{ value }}
    
  



var app = new Vue({
  el: '#app',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

效果

    
    
    
    



   

    

      {{ item.title }}~~~{{item.author}}~~~{{item.publishedAt}}
    
  



var app = new Vue({
  el: '#app',
  data: {
    items: [
       {
        title: 'Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      },
      {
        title: 'python',
        author: 'Ricky',
        publishedAt: '2019-04-10'
      },
      {
        title: 'itcast',
        author: 'itcast',
        publishedAt: '2006-05-08'
      }
    ]
  }
})

效果

文档：https://cn.vuejs.org/v2/guide/events.html

【methods事件一般包括鼠标点击、鼠标滑动和鼠标触碰等】

可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

    
    
    
    



  Add 1
  
The button above has been clicked {{ counter }} times.



var app = new Vue({
  el: '#app',
  data: {
    counter:0
  }
})

效果

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称

    
    
    
    



  Add 1



var app = new Vue({
  el: '#app',
  data: {
    counter:0
  },
  methods:{
    add:function(){
      counter+=1
      alert(this.counter)
    }
  }
})

    
    
    
    



  Add {{counter}} 



var app = new Vue({
  el: '#app',
  data: {
    counter:1
  },
  methods:{
    addnum:function(num){
      this.counter = num+this.counter
      alert(this.counter)
    }
  }
})

v-on: 简写 @

• 单行文本框

• 多行文本框

• 单选框

• 多选框
• 下拉框

文档：https://cn.vuejs.org/v2/guide/forms.html

可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的data选项中声明初始值

    
    
    
    



    
      用 户 名 
      密码 
      确认密码
      性别
        
          男 
          女 
        
      爱好
        
          足球  
          篮球 
          兵乓球 
        
      
      所在城市
        
          
            北京
            上海
            广州
            深圳
           
        
      
      个人简介 
    
    注册



var app = new Vue({
  el: '#app',
  data: {
      username:'',
      password1:'',
      password2:'',
      sex:'',
      like:[],
      city:'',
      desc:''

  },
  methods:{
    register:function(){

        alert(this.username+this.password1+this.password2+this.sex+this.like+this.city+this.desc)
    },
    checkusername:function(){
      alert(this.username)
    }
  }
})

效果