重新复习VUE.JS
2018-04-28 本文已影响0人
飞奔的小白
常用指令：扩展html标签功能，属性。
v-model 一般表单元素 双向绑定
v-for 循环
v-on:click="函数"
v-show ="true/false"
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
window.onload = function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue',
arr:['apple','banana','orange'],
json:{a:'apple',b:'banana',c:'orange'}
}
})
}
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg">
<input type="text" v-model="msg">
{{msg}}
<br>
{{arr}}
<br>
{{json}}
</div>
</body>
</html>```
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
window.onload = function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue',
arr:['apple','banana','orange'],
json:{a:'apple',b:'banana',c:'orange'}
}
})
}
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="(k,v,index) in json">{{k}} {{v}} {{index}}</li>
</ul>
</div>
</body>
</html>```
```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
window.onload = function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue',
arr:['apple','banana','orange'],
json:{a:'apple',b:'banana',c:'orange'}
},
methods:{
show:function(){
// alert(1);
// alert(this.arr);
this.arr.push('tool');
}
}
})
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="show(1)">
<ul>
<li v-for="value in arr">
{{value}}
</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
window.onload = function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue',
arr:['apple','banana','orange'],
json:{a:'apple',b:'banana',c:'orange'},
a:true
},
methods:{
show:function(){
// alert(1);
// alert(this.arr);
this.arr.push('tool');
}
}
})
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="按钮" v-on:click="a=false">
<div style="width:100px;height:100px;background:red" v-show="a">
</div>
</div>
</body>
</html>
