本人已参与[新人创作礼]活动，一起开启掘金创作之路。
一、Vue
二、Vue快速入门
三、Vue常用指令
V-bind ; v-model
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<div id="app">
<a v-bind:href="url">点击一下</a>
<a :href="url">点击一下</a>
<input v-model="url">
</div>
<script src="js/vue.js"></script>
<script>
/*创建vue核心对象*/
new Vue({
el: "#app",
data() {
return {
username: "",
url: "https://www.baidu.com"
}
}
});
</script>
<body>
</body>
</html>
v-on
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<div id="app">
<input type="button" value="一个按钮" v-on:click="show()">
<input type="button" value="一个按钮" @click="show()">
</div>
<script src="js/vue.js"></script>
<script>
/*创建vue核心对象*/
new Vue({
el: "#app",
data() {
return {
username: "",
url: "https://www.baidu.com"
}
},
methods:{
show(){
alert("我被点了")
}
}
});
</script>
<body>
</body>
</html>
v-if; v-else; v-else-if ; v-show
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<div id="app">
<div v-if="count==3">div1</div>
<div v-else-if="count==4">div2</div>
<div v-else>div3</div>
<hr>
<div v-show="count==3">div4</div>
<br>
<input v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
/*创建vue核心对象*/
new Vue({
el: "#app",
data() {
return {
username: "",
url: "https://www.baidu.com",
count: 3
}
},
methods: {
show() {
alert("我被点了")
}
}
});
</script>
<body>
</body>
</html>
v-for
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<div id="app">
<div v-for="addr in addrs">
{{addr}} <br>
</div>
<hr>
<div v-for="(addr,i) in addrs">
{{i+1}}--{{addr}}<br>
</div>
</div>
<script src="js/vue.js"></script>
<script>
/*创建vue核心对象*/
new Vue({
el: "#app",
data() {
return {
username: "",
url: "https://www.baidu.com",
count: 3,
addrs:["北京","上海","郑州"]
}
},
methods: {
show() {
alert("我被点了")
}
}
});
</script>
<body>
</body>
</html>
