学习视频
【B站学习视频】黑马程序员vue前端基础教程
整体思维导图
基础
<!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>Document</title>
</head>
<body>
<div id="app">
{{ message }}
<div>{{student.name}}</div>
<div>{{campus[0]}} {{student.sex}}</div>
<ul>
<li>{{campus[1]}}</li>
<li>{{campus[2]}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
student: {
name: "wyl",
sex: "man",
},
campus: ["hah1", "hah2", "hha3"],
},
});
</script>
</body>
</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>Document</title>
</head>
<body>
<div id="app">
<h2 v-text="message+'!'"></h2>
<h2>{{message+'!'}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello vue",
},
});
</script>
</body>
</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>Document</title>
</head>
<body>
<div id="app">
<h2 v-text="message+'!'"></h2>
<h2>{{message+'!'}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello vue",
},
});
</script>
</body>
</html>
V-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>Document</title>
</head>
<body>
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
content: "<a href='http://www.baidu.com'>baidu</a>",
},
});
</script>
</body>
</html>
V-ON指令
<!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>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="确认" v-on:click="eat" />
<input type="button" value="简要确认" @click="eat" />
<h2 @dblclick="change">{{food}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
food: "肉",
},
methods: {
eat: function () {
alert("hahah");
},
change: function () {
this.food += "好吃";
},
},
});
</script>
</body>
</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>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="anniu" @click="qaq" />
<input type="text" @keypress.enter="qaqtwo(1,2)" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {},
methods: {
qaq: function () {
alert("qaq");
},
qaqtwo: function (a, b) {
alert(a);
alert(b);
},
},
});
</script>
</body>
</html>
V-SHOW指令
<!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>Document</title>
</head>
<body>
<var id="app">
<input type="button" value="显示" @click="changeisshow" />
<input type="button" value="累加年龄" @click="addage" />
<img v-show="isshow" src="/6.jpg" alt="图片" />
<img v-show="age>=18" src="/6.jpg" alt="图片" />
</var>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isshow: false,
age: 17,
},
methods: {
changeisshow: function () {
this.isshow = !this.isshow;
},
addage: function () {
this.age++;
},
},
});
</script>
</body>
</html>
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>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="切换" @click="toisshow" />
<input type="button" value="up" @click="up" />
<p v-if="isshow">www</p>
<p v-show="isshow">vshow</p>
<p v-if="t>=35">rerer</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isshow: false,
t: 34,
},
methods: {
toisshow() {
this.isshow = !this.isshow;
},
up() {
this.t++;
},
},
});
</script>
</body>
</html>
V-BIND指令
<!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>Document</title>
</head>
<body>
<var id="app">
<img v-bind:src="imgsrc" alt="" :title="imgti" />
<br />
<img
:src="imgsrc"
alt=""
:title="imgti"
:class="{active:isact}"
@click="toact"
/>
</var>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgsrc: "/6.jpg",
imgti: "www",
isactive: flase,
},
methods: {
toact: function () {
isactive = !isactive;
},
},
});
</script>
</body>
</html>
V-FOR指令
<!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>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr">{{index + 1}} 123:{{item}}</li>
</ul>
<input type="button" value="+" @click="add" />
<input type="button" value="-" @click="jian" />
<h2 v-for="item in math" :title="123">{{item.m}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
arr: ["q", "w", "e"],
math: [{ m: "1" }, { m: "2" }],
},
methods: {
add: function () {
this.math.push({ m: "4" });
},
jian: function () {
this.math.shift();
},
},
});
</script>
</body>
</html>
V-MODEL指令
<!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>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="123" @click="setm" />
<input type="text" v-model="message" @keyup.enter="getm" />
<h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "123",
},
methods: {
getm: function () {
alert(this.message);
},
setm: function () {
this.message = "321";
},
},
});
</script>
</body>
</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>Document</title>
<style>
button {
width: 70px;
height: 40px;
}
span {
width: 50px;
height: 20px;
}
</style>
</head>
<body>
<div id="app">
<button @click="sub">-</button>
<span> {{num}} </span>
<button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
num: 1,
},
methods: {
sub: function () {
if (this.num > 0) {
this.num--;
} else {
alert("最小啦");
}
},
add: function () {
if (this.num < 10) {
this.num++;
} else {
alert("最大啦");
}
},
},
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
