Vue.js基础知识小结

数据绑定

1.单向绑定

  {{massage}}

var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}

2.双向绑定

 
{{message}}


var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}

3.v-for列表渲染

    

      

       {{ todo.text }}
      
    

new Vue({
   el:"#app",
   data:{
      todos:[
       {text:"abcdef"},
       {text:"123456"},
       {text:"qwerta"}
    ]  }
})

3.处理用户输入

  
{{ message }}
  Reverse Message

new Vue({
   el: "#app",
   data:{
    message:"Hello Vue.js!"  
   },
   methods:{
    reverseMessage:function()
    {
      this .message = this.message.split('').revserse().join('');
    }
  }
})

4.综合

 
 

 

  {{ todo.text }}
  X
 
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！