基本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class='itany'>
{{msg}}
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'.itany',
data:{
msg:'hello vue'
}
})
</script>
<div class="itany"></dov>
<script src=''></script>
</body>
</html>
二：用V-for做table表格
body代码：
编号
名字
价格
{{value.num}}
{{value.name}}
{{value.price}}
js代码：
new Vue({
el:'#app',
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},
]
}
})
三：v-model
dody代码:
//v-model 双向绑定 一般只用于表单{{message}}
js代码:
new Vue({
el:'#app',
data:{
message:''
}
})
四：v-on
点击button会弹出111
body部分:
按钮
js部分:
new Vue({
el:'#app',
data:{
message:'hello World'
},
methods:{
alt:function(){
alert(111)
}
}
})
网友评论