Vue.js基础知识小结

(编辑：jimmy 日期: 2025/9/28 浏览：2)

数据绑定

1.单向绑定

<div id="app">
  {{massage}}
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}

2.双向绑定

<div id="app">
 <p>{{message}}</p>
<input v-model="message" />
</div>
var app = new Vue({
el:"#app",
data:{
message:"Hello,vue.js!"
}

3.v-for列表渲染

<div id="app">
    <ul>
      <li v-for="todo in todos">
       {{ todo.text }}
      </li>
    </ul>
</div>
new Vue({
   el:"#app",
   data:{
      todos:[
       {text:"abcdef"},
       {text:"123456"},
       {text:"qwerta"}
    ]  }
})

3.处理用户输入

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
new Vue({
   el: "#app",
   data:{
    message:"Hello Vue.js!"  
   },
   methods:{
    reverseMessage:function()
    {
      this .message = this.message.split('').revserse().join('');
    }
  }
})

4.综合

<div id="app">
 <input v-model="newTodo" v-on:keyup.enter="addTodo" />
 <ul>
 <li v-for = "todo in todos">
  <span>{{ todo.text }}</span>
  <button v-on:click="removeTodo($index)">X</button>
 </li>
 </ul>
</div>

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

上一篇：JavaScript利用闭包实现模块化

下一篇：canvas实现流星雨的背景效果