Vue基础
简介:本文旨在用最短的篇幅和例子,代入大家入门vue,也是本博主的一个学习记录,本文主要介绍的组件有,v-text
,v-html
,v-on
,v-if
。
入门案例
学习代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue入门</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>
{{username}}
<h1>{{msg}}</h1>
</p>
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
msg:"Vue欢迎你!",
username:"Jerry"
},
});
</script>
</html>
运行结果:
v-text
功能:给标签中的文本添加内容
学习代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{message}}</span>
<span v-text="message"></span>
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好,Vue!"
},
});
</script>
</html>
运行结果:
v-html
功能:相比v-text,也是文本替换,只是对于v-html它可以把文本转换成html标签。
学习代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-html</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{message}}</span>
<br>
<span v-text="message"></span>
<br>
<span v-html="message">随便</span>
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
message:"<a href=''>vue欢迎您</a>"
},
methods:{
}
});
</script>
</html>
v-on(@click)
简介:绑定点击事件。
学习代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>年龄:{{number}}</h2>
<br>
<input type="button" value="点我改变数字" v-on:click="changenumber">
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello,vue!",
number:8
},
methods:{
changenumber(){
this.number = 10;
}
}
});
</script>
</html>
简写版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on(简化版)</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{count}}</span>
<input type="button" value="改变count的值" @click="changenumber">
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
count:1
},
methods:{
changenumber(){
this.count ++;
}
}
});
</script>
</html>
运行结果:
v-if
简介:类比与Java里面的if,判断语句。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="current=='search'">显示搜索框</div>
<div v-else-if="current=='keywords'">显示搜索关键字</div>
<div v-else>显示搜索结果</div>
<button @click="current='search'">显示搜索框</button>
<button @click="current='keywords'">显示关键字</button>
<button @click="current='results'">显示搜索结果</button>
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
current:'search'
},
methods:{
}
});
</script>
</html>
运行结果: