vue快速学习02、基础用法
目录
1、数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--视图层-->
<div id="app">
<input type="text" v-model="Msg"><br/>
<p>{
{Msg}}</p>
</div>
<!--引入vue环境-->
<script src="js/vue.js"></script>
<!--视图模型层-->
<script>
/* Vue的基础使用方法，内部参数格式为json*/
new Vue({
el: "#app",
data: {
Msg: "天使之吻"
}
})
</script>
</body>
</html>2、数据绑定
<!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">
<fieldset>
<legend>姓名栏</legend>
<p>姓：<input type="text" v-model="xing" /></p>
<p>名：<input type="text" v-model="ming" /></p>
<p>{
{xing}}_{
{ming}}</p>
</fieldset>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
xing: "",
ming: ""
}
});
</script>
</body>
</html>3、钩子函数
<!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"></div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: ""
},
created() {
console.log("初始化");
},
mounted() {
console.log("完成初始化");
},
beforeDestroy() {
console.log("销毁前执行，看不到。");
}
});
</script>
</body>
</html>4、created函数用法1
<!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">
<div id="show">{
{ShowText}}</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
StrArray: ["北京第三区交通委提醒您",
"道路千万条",
"安全第一条",
"行车不规范",
"亲人两行泪"
],
index: 0,
ShowText: ""
},
created() {
var _this = this;
_this.ShowText = _this.StrArray[0];
setInterval(() => {
_this.index++;
if (_this.index == _this.StrArray.length) {
_this.index = 0;
}
_this.ShowText = _this.StrArray[_this.index];
}, 2000);
}
});
</script>
</body>
</html>5、created函数用法2
<!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">
<div>{
{ShowTime}}</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
ShowTime: "" //Vue里data数据不能给null
},
created() {
//时间的处理
var _this = this;
setInterval(() => {
var str = "当前日期时间是：";
var d = new Date();
var year = d.getFullYear();
var month = (d.getMonth() + 1).toString().padStart(2, '0');
var day = d.getDate().toString().padStart(2, '0');
var hour = d.getHours().toString().padStart(2, '0');
var min = d.getMinutes().toString().padStart(2, '0');
var se = d.getSeconds().toString().padStart(2, '0');
_this.ShowTime = str + year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + se;
}, 1000);
}
});
</script>
</body>
</html>6、filters过滤器
<!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="text" v-model="showText" />
<hr/>
<p>{
{showText|filterText}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
showText: ""
},
filters: {
filterText: function(o) {
var isf = o.indexOf("傻") == -1;
return isf ? o : "*";
}
}
})
</script>
</body>
</html>7、v-once与v-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{
{Msg}}</span>
<hr/>
<span v-once>{
{Msg}}</span>
<hr/>
<span v-text>{
{Msg}}</span>
<hr/>
<input type="text" v-model="Msg" />
</div>
<script>
new Vue({
el: "#app",
data: {
Msg: "我是基础的参数"
}
})
</script>
</body>
</html>8、数据计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 视图层 -->
<div id="app">
<fieldset>
<legend>个人薪资计算器</legend>
<p>基本工资：<input type="text" v-model="a1" /></p>
<p>岗位工资：<input type="text" v-model="a2" /></p>
<p>月度奖金：<input type="text" v-model="a3" /></p>
<p>综合补贴：<input type="text" v-model="a4" /></p>
<p>扣款金额：<input type="text" v-model="a5" /></p>
<p>应发工资：￥{
{parseFloat(a1)+parseInt(a2)+parseInt(a3)+parseInt(a4)-parseInt(a5)}}元</p>
</fieldset>
</div>
<!-- 引入环境 -->
<script src="js/vue.js"></script>
<!-- 视图模型 -->
<script>
new Vue({
el: "#app",
data: {
a1: 0,
a2: 0,
a3: 0,
a4: 0,
a5: 0
}
})
</script>
</body>
</html>9、数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<img :src="url" v-bind:style="sty" />
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
url: "imgs/1 (10).png",
sty: "width:300px;height:250px;border:5px solid red"
}
})
</script>
</body>
</html>10、样式控制1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.co {
color: red;
}
.bgc {
background-color: skyblue;
}
.fs {
font-size: 2rem;
}
.bo {
border: 2px solid hotpink;
}
.bor {
border-radius: 50%;
}
.fc {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<p><input type="checkbox" v-model="state1" />字体颜色</p>
<p><input type="checkbox" v-model="state2" />背景颜色</p>
<p><input type="checkbox" v-model="state3" />文字大小</p>
<p><input type="checkbox" v-model="state4" />添加边框</p>
<p><input type="checkbox" v-model="state5" />圆角边框</p>
<p><input type="checkbox" v-model="state6" />文字居中</p>
<hr/>
<p v-bind:class="{co:state1,bgc:state2,fs:state3,bo:state4,bor:state5,fc:state6}">安杰有一个美丽、大方、端庄、孝心的女朋友</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
state1: false,
state2: false,
state3: false,
state4: false,
state5: false,
state6: false
}
})
</script>
</body>
</html>11、样式控制2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<img :src="url" style="width:100%;height:100vh" />
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
Imgs: [
"imgs/1 (1).png",
"imgs/1 (2).png",
"imgs/1 (3).png",
"imgs/1 (4).png",
"imgs/1 (5).png",
"imgs/1 (6).png",
"imgs/1 (7).png",
"imgs/1 (8).png",
"imgs/1 (9).png",
"imgs/1 (10).png",
"imgs/1 (11).png",
"imgs/1 (12).png",
"imgs/1 (13).png"
],
index: 0,
url: ""
},
created() {
//影分身之术
var _this = this;
_this.url = _this.Imgs[0];
//轮播
setInterval(() => {
_this.index++;
if (_this.index == _this.Imgs.length) {
_this.index = 0;
}
//将每次递增或归零的下角标赋值到数组上
_this.url = _this.Imgs[_this.index];
}, 2500);
}
})
</script>
</body>
</html>12、v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="isf" />登录/注册<br/>
<button v-on:click="change">切换</button>
<div v-if="isf">
<p>登录</p>
</div>
<div v-else>
<p>注册</p>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isf: true
},
methods: {
change: function() {
//bool值相互切换
this.isf = this.isf ? false : true;
}
}
})
</script>
</body>
</html>13、v-if、v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-on:click="change" style="cursor: pointer">切换</h1>
<hr/>
<div v-if="isf">
<h1>注册</h1>
<p>账号：<input type="text" placeholder="请输入账号"></p>
<p>密码：<input type="password" placeholder="请输入密码"></p>
<p>二次输入密码：<input type="password" placeholder="请输入密码"></p>
<button>注册提交</button>
</div>
<div v-else>
<h1>登录</h1>
<p>账号：<input type="text" placeholder="请输入账号"></p>
<p>密码：<input type="password" placeholder="请输入密码"></p>
<button>登录提交</button>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isf: true
},
methods: {
change: function() {
//反向切换bool值方法
this.isf = this.isf ? false : true;
}
}
})
</script>
</body>
</html14、v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1><span v-on:click="choose(1)">选项卡一</span><span v-on:click="choose(2)">选项卡二</span></h1>
<div v-if="show1">
某人拥有十个雍容华贵，沉鱼落雁，闭月羞花的姐姐。
</div>
<div v-if="show2">
某人需要一个善解人意，手下过百将的巾帼红颜。
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
show1: true,
show2: false
},
methods: {
choose: function(o) {
console.log(o);
var _this = this;
if (o == "1") {
_this.show1 = true;
_this.show2 = false;
} else {
_this.show2 = true;
_this.show1 = false;
}
}
}
})
</script>
</body>
</html>