Vue是一套用于构建用户界面的渐进式框架。 （作者：尤雨溪）
<div id='itany'> {{ message }} </div>
new Vue(){ //el是element的简写 el后面跟的是选择器
el:'#itany',
data:{
message:'Hello Vue.js!'
}
}
一：v-for
<body>
<div id="itany">
<li v-for='value in arr'> {{Value}} </li>
<li v-for='value in obj'> {{Value}} </li>
<li v-for='(value,index) in arr'> {{index}}
==>{{value}}</li>
<li v-for='(value,index) in obj'> {{index}}==>{{value}}</li>
<li v-for='value in arrs'>
{{value.name}}
{{value.name}}
{{value.price}}
</li>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#itany,
data:{
arr:[1,2,3,4,5],
obj:{name:'jack',old:'18'},
arrs:[
{num:1,name:'香蕉',price:3},
{num:2,name:'苹果',price:2},
{num:3,name:'鸭梨',price:1},
]
}
})
</script>
</body>
二：v-model
<body>
<div id="itany">
<input type='text' v-model='message'>
<p>{{message}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
message:''"
}
})
</script>
</body>
效果:表单下面的文字会随着表单中的文字的变化而变化
三：v-on
<body>
<div id="itany">
<button v-on:click='alt'>按钮</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
message:'hello World'
},
methods:{
alt:function(){
alert(hello vue)
}
}
})
</script>
</body>
效果图：
网友评论