【Web - 框架 - Vue】随笔 - Vue的简单使用(01) - 快速上手
Vue模板代码
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板</title>
</head>
<body>
<div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>
let v = new Vue({
el: "",
data: {
},
methods: {
}
})
</script>
</body>
</html>
Vue文本相关
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue文本相关</title>
</head>
<body>
<div>
<!--插值,不依赖于标签-->
{{info}}
<p>{{info}}</p>
<!--让元素的文本内容和变量进行绑定-->
<p v-text="info"></p>
<!--让元素的标签内容和变量进行绑定-->
<p v-html="info"></p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>
let v = new Vue({
el: "div",
data: {
info: "<b>文本相关</b>"
}
})
</script>
</body>
</html>
结果
Vue属性绑定
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue属性绑定</title>
</head>
<body>
<div>
<!--属性绑定:v-bind-->
<a v-bind:href="url">超链接1</a>
<!--属性绑定简写(省略掉"v-bind")-->
<a :href="url">超链接2</a>
<input type="text" :value="info">
<img :src="imgUrl" alt="">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>
let v = new Vue({
el: "div",
data: {
url: "http://www.baidu.com",
info: "文本内容",
imgUrl: "https://img-blog.csdnimg.cn/direct/f4f51baf0fd64076975340d0bce02fbb.png"
}
})
</script>
</body>
</html>
结果
Vue双向绑定
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue双向绑定</title>
</head>
<body>
<div>
<input type="text" :value="info_a">
<!--双向绑定:v-model-->
<input type="text" v-model="info_b">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>
let v = new Vue({
el: "div",
data: {
info_a: "属性绑定",
info_b: "双向绑定"
}
})
setTimeout(function () {
alert(v.info_a + " " + v.info_b)
}, 8000)
</script>
</body>
</html>
结果
Vue事件绑定
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue事件绑定</title>
</head>
<body>
<div>
<!--事件绑定:v-on:事件名="方法名"-->
<input type="button" value="按钮1" v-on:click="f()">
<!--事件绑定简写-->
<input type="button" value="按钮2" @click="f">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>
let v = new Vue({
el: "div",
data: {},
methods: {
f() {
alert("按钮点击了");
}
}
})
</script>
</body>
</html>
结果
Vue循环遍历
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue循环遍历</title>
</head>
<body>
<div>
<ul>
<!--循环遍历:v-for-->
<li v-for="name in arr">{{name}}</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>
let v = new Vue({
el: "div",
data: {
arr: ["刘备", "关羽", "诸葛亮", "孙尚香", "刘禅"]
},
methods: {
}
})
</script>
</body>
</html>
结果
Vue显示隐藏
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue显示隐藏</title>
</head>
<body>
<div>
<!--显示删除:v-if-->
<h1 v-if="isVisible">刘德华</h1>
<!--显示删除:v-else-->
<h1 v-else>张三</h1>
<!--显示隐藏:v-show-->
<h1 v-show="isVisible">张学友</h1>
<h1>郭富城</h1>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>
let v = new Vue({
el: "body>div",
data: {
isVisible: true
},
methods: {
}
})
</script>
</body>
</html>
