您的位置：首页 > Web前端 > Vue.js

Vue.js基础知识小结

2017-01-13 15:16 585 查看

数据绑定

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>

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Vue.js

相关文章推荐

新的分享

章节导航