vue综合案例02 Vue快速入门03文本插值04绑定属性05条件渲染06列表渲染07事件绑定08表单绑定

98 阅读 0 评论 65 点赞

我是靠谱客的博主糟糕豆芽，最近开发中收集的这篇文章主要介绍vue综合案例02 Vue快速入门03文本插值04绑定属性05条件渲染06列表渲染07事件绑定08表单绑定，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Vue.js下载地址:
vue.js

02 Vue快速入门

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>快速入门</title>
</head>
<body>
<div id="div">
<div>姓名: {{name}}</div>
<div>班级: {{classRoom}}</div>
</div>
<button onclick="hi()">打招呼</button>
<button onclick="update()">修改班级</button>
</body>
<script src="js/vue.js"></script>
<script>
//脚本
let vm = new Vue({
el: "#div",
data:{
name:"张三",
classRoom:"黑马"
},
methods:{
study(){
alert(this.name+"正在学习"+this.classRoom);
}
}
});
function hi(){
vm.study();
}
function update(){
vm.classRoom = "传智播客";
}
</script>
</html>

03文本插值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>快速入门</title>
</head>
<body>
<div id="div">
<div>{{msg}}</div>
<div v-html="msg"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//脚本
new Vue({
el:"#div",
data:{
msg:"<b>Hello Vue</b>"
}
});
</script>
</html>

04绑定属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>快速入门</title>
<style>
.my{
border: 1px solid red;
}
</style>
</head>
<body>
<div id="div">
<a v-bind:href="url">百度一下</a>
<div :class="cls">我是DIV</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//脚本
new Vue({
el:"#div",
data:{
url:"http://www.baidu.com",
cls:"my"
}
});
</script>
</html>

05条件渲染

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>快速入门</title>
</head>
<body>
<div id="div">
<!--判断num取余-->
<div v-if="num % 3 == 0">div1</div>
<div v-else-if="num % 3 == 1">div2</div>
<div v-else="num % 3 == 2">div3</div>
<div v-show="flag">div4</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//脚本
new Vue({
el:"#div",
data:{
num:1,
flag:false
}
});
</script>
</html>

06列表渲染

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>快速入门</title>
</head>
<body>
<div id="div">
<ul>
<li v-for="name in names">
{{name}}
</li>
<li v-for="value in student">
{{value}}
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//脚本
new Vue({
el:"#div",
data:{
names:["张三","李四","王五"],
student:{
name:"张三",
age:23
}
}
});
</script>
</html>

07事件绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>快速入门</title>
</head>
<body>
<div id="div">
{{name}}
<button v-on:click="change()">改变div的内容</button>
<button @click="change()">改变div的内容</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//脚本
new Vue({
el:"#div",
data:{
name:"黑马程序员"
},
methods:{
change(){
this.name = "传智播客"
}
}
});
</script>
</html>

08表单绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>快速入门</title>
</head>
<body>
<div id="div">
<form autocomplete="off">
姓名:<input type="text" name="username" v-model="username"><br>
年龄:<input type="number" name="age" v-model="age"><br>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//脚本
new Vue({
el:"#div",
data:{
username:"张三",
age:23
}
});
</script>
</html>