当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue.js基础知识小结

Vue.js基础知识小结

2018年05月07日  | 移动技术网IT编程  | 我要评论

闻小炜,朗知传媒,松原汽车站

数据绑定

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>
<script type="text/javascript" src="js/vue.min.js"></script>
<script>
 new vue({
 el:"#app",
 data:{
  newtodo:"",
  todos:[
  {
   text:'add some todos 1'
  },
  {
   text:'add some todos 2'
  },{
   text:'add some todos 3'
  }
  ]
 },
 methods:{
  addtodo: function(){
  //去除首尾的空格
  var text = this.newtodo.trim();
  //去除后非空的话
  if(text){
   this.todos.push({ text: text })
   this.newtodo = ''
  }
  },
  removetodo: function(index){
  this.todos.splice( index, 1 )
  }
 }
 })
</script>

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网