摘要
昨天分享了vue的起步与体验。今天我们来看一下vue的基础语法。
主要有:
v-text、v-html、v-bind、v-on、v-if、v-show和v-model的使用。
1、v-text
v-text 就是设置标签的内容,但是会覆盖元素中原本的内容。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2 v-text="message">123</h2>
<!--全替换 v-text相当于textContent-->
<h2 v-text="info">123</h2>
<h2>{{ message }}123</h2>
<!--拼接在一起-->
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "dadadada",
info: "adadadadad"
}
});
</script>
</body>
</html>
效果:
2、 v-html
v-html和v-text一样都是设置标签的内容,都会覆盖元素中原本的内容,不过v-html会解析html格式。
代码:
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-text="content"></p>
<p v-html="content"></p>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
// content: "hello"//文本时二者毫无区别
content: "<a href='http://www.baidu.com'>hello</a>" //当是html表达式时,v-text不会解析,v-html会解析,就是设置innerHTML
}
});
</script>
</body>
</html>
效果:
3、 v-bind
v-bind就是绑定属性,可以绑定class、style等。
3.1、绑定class
使用方法是v-bind:class="{类名1: 布尔值,类名2: 布尔值}",如果有多个则用逗号隔开。简写方法是将v-bind换为:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active {
color: coral;
}
.aaa {
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<!-- class中的格式是类名:布尔值 -->
<div v-bind:class="{active : isactive , aaa : bbb}">{{ message }}</div>
<!-- 简写方法 -->
<div :class="{active : isactive , aaa : bbb}">{{ message }}</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "11111111",
isactive: true,
bbb: true //这个布尔值决定前面的类是否加上
},
});
</script>
</body>
</html>
效果:
3.2 、绑定style
使用方法是v-bind:style="{ 属性名: 属性值(或者data中的变量)}"
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 不加单引号会把red当成一个变量 -->
<div v-bind:style="{ color : red }">{{ message }}</div>
<div v-bind:style="{ color : 'red' }">{{ message }}</div>
<div v-bind:style="{ color : aaa }">{{ message }}</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "11111111",
aaa: 'blue',
// red: blue,//会报错
},
});
</script>
</body>
</html>
效果:
4、v-on
v-on 监听事件,就是我们使用js绑定事件的功能;使用方法v-on:事件类型="事件函数"
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{ count }}</h2>
<button v-on:click="count++">+</button>
<button v-on:click="count--">-</button><br>
<!-- 语法糖写法 -->
<button @click="count++">+</button>
<button @click="count--">-</button>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
count: 0
}
});
</script>
</body>
</html>
效果:
5、v-if、v-show
v-if、v-show都是用来控制显示和隐藏的;不同点在于v-if是直接将标签移除,v-show是使用display:none属性隐藏。
具体区别可以参考我讲小程序的一篇文章:小程序中if和hidden的区别及应用场景_回首&逝去~的博客-CSDN博客
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-if直接在dom树中删除 -->
<div v-if="isShow">xianshi</div>
<!-- v-show是在行内样式中加上display:none -->
<div v-show="isShow">xianshi</div>
<button @click="isShow = !isShow">切换显示</button>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isShow: true
}
});
</script>
</body>
</html>
效果:
6、v-model
v-model可以实现表单的双向数据绑定,可以随着文本框的输入来实时改变显示数据,具体实现方法今后会讲,今天我们先看它的使用。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- v-model实现双向绑定 -->
<input type="text" v-model="message"> {{ message }}
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello"
},
});
</script>
</body>
</html>
效果: