Vue.js基础知识小结
数据绑定
1.单向绑定
<divid="app">
{{massage}}
</div>
varapp=newVue({
el:"#app",
data:{
message:"Hello,vue.js!"
}
2.双向绑定
<divid="app">
<p>{{message}}</p>
<inputv-model="message"/>
</div>
varapp=newVue({
el:"#app",
data:{
message:"Hello,vue.js!"
}
3.v-for列表渲染
<divid="app">
<ul>
<liv-for="todointodos">
{{todo.text}}
</li>
</ul>
</div>
newVue({
el:"#app",
data:{
todos:[
{text:"abcdef"},
{text:"123456"},
{text:"qwerta"}
]}
})
3.处理用户输入
<divid="app">
<p>{{message}}</p>
<buttonv-on:click="reverseMessage">ReverseMessage</button>
</div>
newVue({
el:"#app",
data:{
message:"HelloVue.js!"
},
methods:{
reverseMessage:function()
{
this.message=this.message.split('').revserse().join('');
}
}
})
4.综合
<divid="app">
<inputv-model="newTodo"v-on:keyup.enter="addTodo"/>
<ul>
<liv-for="todointodos">
<span>{{todo.text}}</span>
<buttonv-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
<scripttype="text/javascript"src="js/vue.min.js"></script>
<script>
newVue({
el:"#app",
data:{
newTodo:"",
todos:[
{
text:'Addsometodos1'
},
{
text:'Addsometodos2'
},{
text:'Addsometodos3'
}
]
},
methods:{
addTodo:function(){
//去除首尾的空格
vartext=this.newTodo.trim();
//去除后非空的话
if(text){
this.todos.push({text:text})
this.newTodo=''
}
},
removeTodo:function(index){
this.todos.splice(index,1)
}
}
})
</script>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！