Vue.js
[toc]
<body>
<div id="app">
{{message}}
</div>
<!--引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
message:"hello vue !"
}
});
</script>
</body>
1. vue 对象
app = new vue();
2. 模板语法
2.1 v-text
v-text
设置标签内容(textContent)
- 默认写法会替换==全部==内容
- 差值表达会替换==指定内容==
- 内部支持写表达式
- 仅 支持 内部
<body>
<div id="app">
<!-- 差值表达式 支持拼接 -->
<h2>{{message}}(test)</h2>
<!-- 全部覆盖 -->
<h2 v-text="info">(test)</h2>
</div>
<!--引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
message:"hello vue !",
info:"你好,世界!",
}
});
</script>
</body>
2.2 v-html
v-html
设置标签innerHTML
-
内容中由html 结构i会被==解析为标签==
-
需要解析html时用
<body>
<div id="app">
<p v-html="content"></p>
<h2 v-text="content">(test)</h2>
</div>
<!--引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
content:"<a href='www.baidu.com'>百度一下</a> ",
}
});
</script>
</body>
2.3 v-on
v-on
为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在==methods==属性中
- 方法内部可以用==this==关键字访问定义在data中的数据
- 支持自定义参数
- 支持事件修饰符(@keyup.enter="xxx”)
<body>
<div id="app">
<!-- 正常写法-->
<input type="button" value="v-on指令" v-on:click="doIt">
<!-- 简写 @method=xxxx -->
<input type="button" value="v-on简写" @click="doIt">
<input type="button" value="v-on简写" @dblclick="doIt">
<h2 @click="getFoodName">{{food}}</h2>
</div>
<!--引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
food:"西兰花炒蛋",
},
methods:{
doIt:function(){
alert("做it");
},
// 获取食物名字
getFoodName:function(){
// console.log(this.food);
this.food+="老好吃!";
}
},
});
</script>
</body>
2.4 v-show
v-show
根据表达式真假切换==元素==的显示和隐藏
<body>
<div id="app">
<input type="button" value="切换状态" v-on:click="changeState">
<div id="div1" v-show="isShow">
</div>
</div>
<!-- 引入 vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false,
},
methods: {
// 切换状态
changeState: function () {
console.log(this.isShow);
this.isShow = !this.isShow;
}
},
});
</script>
</body>
2.5 v-if
v-if
根据表达式真假切换元素的显示和隐藏
本质: 通过操作dom 元素来切换显示状态
- 当表达式值为 true,元素存在于dom树中,为false 从dom树中移除.
- ==在多次 高频率使用时 不推荐 使用==
<body>
<div id="app">
<input type="button" value="切换状态" v-on:click="changeState">
<!-- 性能开销相对较大 高频率操作不建议使用-->
<div id="div1" v-if="isShow">
</div>
</div>
<!-- 引入 vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: false,
},
methods: {
// 切换状态
changeState: function () {
console.log(this.isShow);
this.isShow = !this.isShow;
}
},
});
</script>
</body>
2.6 v-bind
v-bind
为元素==绑定==属性
- 完整写法 v-bind:属性名
- 简写可以忽略v-bind 只保留 :属性名
<body>
<div id="app">
<input type="button" value="打开图片" v-on:click="changeActive">
<img v-bind:src="imgSrc" v-bind:title="imgTitle" v-show="isActive">
</div>
<!-- 引入 vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
imgSrc:"https://www.baidu.com/img/bd_logo1.png?where=super",
imgTitle:"百度一下",
isActive:false,
},
methods:{
changeActive:function(){
this.isActive=!this.isActive;
}
},
});
</script>
</body>
2.7 v-for
v-for
根据数据生成==列表==结构
- 数组经常和 v-for 结合使用
- 语法:(item,index) in 数据
- item 和 index 可以结合 其他指令一起使用
- 数组长度更新回同步到页面上(==响应式==)
<body>
<div id="app">
<ul>
<!--没有索引的-->
<li v-for="item in arrFruit">
{{item}}
</li>
</ul>
<ul>
<!--带索引的-->
<li v-for="(item,index) in arrFruit">
{{index+1}}{{item}}
</li>
</ul>
</div>
<!-- 引入 vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
arrFruit: ["香蕉", "苹果", "梨", "葡萄"],
},
});
</script>
</body>
2.8 v-model
v-model
获取和设置表单元素的值 ==双向数据绑定==
3. vue实例
- el
挂载点
- data
数据
- methods
方法
this
关键字可以获取data 中 数据
- v-text
设置文本
- v-html
设置innerHTML
- v-on
事件 || @xxx
- v-show
元素是否可见
- v-if
元素是否存在
- v-bind
绑定元素属性
3.1 计数器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#app{
width: 60%;
margin: 150px auto ;
text-align: center;
}
[type="button"] {
background-color: gainsboro;
width:120px;
height: 60px;
font-size: 40px;
color: brown;
outline: none;
margin: 0;
}
#app [type="button"]:first-child{
border-radius: 20px 0 0 20px;
}
#app [type="button"]:last-child{
border-radius: 0 20px 20px 0;
}
#app span{
display: inline-block;
width: 100px;
height: 60px;
background-color: white;
border:1px solid #ccc;
font-size: 40px;
text-align: center;
margin: 0 ;
}
</style>
</head>
<div id="app">
<input type="button" value="-" @click="sub">
<span>{{num}}</span>
<input type="button" value="+" @click="add">
</div>
<body>
<!-- 引入 vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
num: 1,
},
methods: {
add: function () {
console.log("add");
if (this.num < 10) {
this.num++;
} else {
alert("别点了最大了!");
}
},
sub: function () {
console.log("sub");
if (this.num > 0) {
this.num--;
} else {
alert("别点了最小了!");
}
}
}
});
</script>
</body>
</html>
3.2 图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#wrapper {
background-color: #ccc;
width: 700px;
height: 500px;
margin: 100px auto;
border-radius: 30px;
}
#wrapper img {
position: relative;
top: 60px;
left: 100px;
width: 500px;
height: 300px;
}
#prev-btn {
position: relative;
display: inline-block;
width: 60px;
height: 100px;
background-color: black;
opacity: 30;
z-index: 10;
left: -480px;
top:-120px;
}
#next-btn {
position: relative ;
display: inline-block;
width: 60px;
height: 100px;
background-color: black;
opacity: 30;
z-index: 3;
top:-120px;
left: 0px;
}
</style>
</head>
<body>
<div id="app">
<div id="wrapper">
<img v-bind:src="imgArr[index]" alt="提示">
<a id="prev-btn" href="javascript:void(0)" @click="prev" v-show="index!=0">上一页</a>
<a id="next-btn" href="javascript:void(0)" v-on:click="next" v-show="index<imgArr.length-1">下一页</a>
</div>
</div>
<!-- 引入 vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
imgArr: ["http://img2.imgtn.bdimg.com/it/u=4140681179,1746829921&fm=26&gp=0.jpg",
"http://img3.imgtn.bdimg.com/it/u=3544763245,2194193016&fm=26&gp=0.jpg",
"http://img3.imgtn.bdimg.com/it/u=1891113743,2129264950&fm=26&gp=0.jpg",
"http://img2.imgtn.bdimg.com/it/u=31907179,2274252007&fm=11&gp=0.jpg",
"http://img5.imgtn.bdimg.com/it/u=1408543846,479797183&fm=26&gp=0.jpg",
"http://img0.imgtn.bdimg.com/it/u=1326892186,836646254&fm=26&gp=0.jpg",
"http://img4.imgtn.bdimg.com/it/u=1768870710,2903267606&fm=26&gp=0.jpg",
"http://img0.imgtn.bdimg.com/it/u=1295891434,1066665956&fm=26&gp=0.jpg",
"http://img3.imgtn.bdimg.com/it/u=2071263204,1441252515&fm=26&gp=0.jpg",
"http://img2.imgtn.bdimg.com/it/u=4072638143,818724319&fm=26&gp=0.jpg",
"http://img4.imgtn.bdimg.com/it/u=1761250919,1896060533&fm=26&gp=0.jpg",
"http://img5.imgtn.bdimg.com/it/u=1859447979,3566605488&fm=26&gp=0.jpg",
"http://img3.imgtn.bdimg.com/it/u=2622342178,3635393673&fm=26&gp=0.jpg",
"http://img2.imgtn.bdimg.com/it/u=1260288850,1826522086&fm=26&gp=0.jpg",
],
index: 0,
},
methods: {
// 上一张
prev: function () {
this.index--;
},
// 下一张
next: function () {
this.index++;
},
},
});
</script>
</body>
</html>