- 第一次接触vue，前端的html,css,jquery,js学习也有段时间了，就照着B站的视频简单看了一些，了解了一些简单的用法，这边做一个记录。
官网
工具：使用VSCode以及Live Server插件（能够实时预览）
第一个Vue程序
<!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>Vue基础</title>
</head>
<body>
<div id="app">
{{message}}
</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>
el:挂载点：设置Vue实例
<!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>el挂载点</title>
</head>
<body id="body">
{{messgae}}
<div id="app" class="abc">
{{message}}
<p>{{message}}</p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
//el:".abc",
//el:"div",
//el:"#body",
data:{
message:" hello Vue!"
}
})
</script>
</body>
</html>
Vue实例的作用范围是什么呢？
- Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其它的选择器
- 可以使用其它的选择器，但是建议使用ID选择器
是否可以设置其它的dom元素呢
- 可以使用其它的双标签，不能使用html和body
data数据对象
<!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>data数据对象</title>
</head>
<body>
<div id="app">
{{message}}
<h2>{{student.name}} ---{{student.mobile}}</h2>
<ul>
<li>{{hobbies[0]}}</li>
<li>{{hobbies[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:"张三",
mobile:"16789028"
},
hobbies: ["学习","喝酒","打球"]
}
})
</script>
</body>
</html>
常见指令
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>v-text</title>
</head>
<body>
<div id="app">
{{message}}
<h2 v-text="message+'a'">zhh</h2>
<h2>{{message+'sd'}} asd</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
-
作用：设置元素的innerHTML
-
内容中有HTML结构会被解析成标签
-
v=text指令无论内容时什么.只会解析成文本
-
解析文本使用v=text,需要解析html结构使用v-html
<!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>v-html</title>
</head>
<body>
<div id="app">
{{message}}
<h2 v-text="title"></h2>
<h2 v-html="title"></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!",
title:"<h3>abc<h3>"
}
})
</script>
</body>
</html>
v-on
-
v-on指令的作用是为元素绑定事件
-
事件名不需要写on
-
指令可以简写为@
-
绑定的方法定义字methods属性中
-
方法内部通过this关键字可以访问定义在data中数据
<!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>v-on</title>
</head>
<body>
<div id="app">
{{message}}
<input type="button" value="测试事件绑定" v-on:click="func1">
<input type="button" value="测试事件绑定简写" @click="func2">
</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!"
},
methods: {
func1() {
console.log("1");
alert("2")
},
func2:function() {
alert(this.message)
}
}
})
</script>
</body>
</html>
v-on补充
-
传递自定义参数，事件修饰符
-
事件绑定的方法写成函数调用的形式，可传入自定义参数
-
定义方法时需要定义形参来接收传入的实参
-
事件的后面跟上.修饰符可以对事件进行限制
-
.enter可以限制触发的按键为回车
-
事件修饰符有多种
<!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>v-on补充</title>
<!-- -->
</head>
<body>
<div id="app">
<button @click="add(3,2)">加法计算</button>
<input type="text" @keyup.enter="sayHi">
</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!"
},
methods: {
add: function(a1,a2) {
alert(a1+a2)
},
sayHi:function() {
alert(666)
}
}
})
</script>
</body>
</html>
v-bind
-
v-bind指令的作用是为元素绑定属性
-
完整写法是v-bind:属性名
简
-
写的可以直接省略v-bind,只保留:属性名
-
需要动态的增删改class建议使用对象的方式
<!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">
<style>
.active{
border: 1px solid red;
}
</style>
<title>v-bind</title>
<!-- -->
</head>
<body>
<div id="app">
{{message}}
<img v-bind:src="imgSrc" alt=""><br>
<img :src="imgSrc" alt="" :title="message+'404'" :class="isActive?'active':''">
<img :src="imgSrc" alt="" :title="message+'404'" :class="{active:isActive}">
</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!",
imgSrc:"../img/monkey.gif",
isActive:true
}
})
</script>
</body>
</html>
v-show
-
v-show指令的作用是根据真假切换元素的显示状态
-
原理是修改元素的display，实现显示隐藏
-
指令后面的内容，最终都会被解析为布尔值
-
值为true元素显示，值为false，元素隐藏
-
数据改变之后，对应元素的显式状态会同步更新
<!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>v-show</title>
<!--
-->
</head>
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeInShow">
<button @click="addAge">累加年龄</button>
<br>
<img src="../img/monkey.gif" alt="" v-show="isShow">
<br>
<img src="../img/monkey.gif" alt="" v-show="age>40">
</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!",
isShow:true,
age:34
},
methods:{
changeInShow: function() {
this.isShow=!this.isShow;
},
addAge:function() {
this.age++;
}
}
})
</script>
</body>
</html>
v-if
-
v-if指令的作用是：根据表达式的真假切换元素的显式状态
-
本质是通过操控dom元素来切换显示状态
-
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
-
频繁的切换v-show,反之使用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>v-if</title>
<!--
v-if指令的作用是：根据表达式的真假切换元素的显式状态
本质是通过操控dom元素来切换显示状态
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
频繁的切换v-show,反之使用v-if,前者的切换消耗小
-->
</head>
<body>
<div id="app">
<button @click="changeShow">切换显示状态</button>
<button @click="changeAge">增加年龄</button>
<img src="../img/monkey.gif" alt="" v-if="true">
<img src="../img/monkey.gif" alt="" v-if="isShow">
<img src="../img/monkey.gif" alt="" v-if="age>40">
</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!",
isShow:true,
age:30
},
methods: {
changeShow: function() {
this.isShow=!this.isShow;
},
changeAge: function() {
this.age++;
console.log(this.age)
}
}
})
</script>
</body>
</html>
v-for
-
v-for指令的作用是根据数据生成列表结构
-
数组经常与它结合使用
-
语法是(item,index) in数据
-
item和index可以结合其它指令一起使用
-
数组长度的更新会同步到页面上，是响应式的
<!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>v-for</title>
<!--
-->
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in hobbies" :title="item">
{{index+1}}兴趣有：{{item}}
</li>
</ul>
<h2 v-for="it in students">
{{it}}
{{it.name}} {{it.age}}
</h2>
{{message}}
</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!",
hobbies:["打球","睡觉","打游戏"],
students:[
{name: "abc",
age:"34"},
{name:"rty",
age: "45"}
]
}
})
</script>
</body>
</html>
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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model</title>
<!-- -->
</head>
<body>
<div id="app">
{{message}}
<button @click="setM">修改message</button>
<input type="text" v-model="message" @keyup.enter="getM">
</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!"
},
methods: {
getM:function() {
alert(this.message)
},
setM:function(){
this.message="aaaa"
}
}
})
</script>
</body>
</html>
使用常用指令实现小功能
计数器
<!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>计数器</title>
<style>
#app {
width: 480px;
height: 100px;
margin: 200px auto;
}
.input-num {
margin-top: 20px;
height: 100%;
display: flex;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 4px black;
}
.input-num button {
width: 150px;
height: 100%;
font-size: 40px;
color: gray;
cursor: pointer;
border: none;
outline: none;
}
.input-num span {
height: 100%;
font-size: 40px;
flex: 1;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="app">
<div class="input-num">
<button @click="sub">-</button>
<span>{{num}}</span>
<button v-on:click="add">+</button>
</div>
</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>
图片切换
<!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">
<!-- <link rel="stylesheet" href="../css/index.css"/> -->
<title>图片切换</title>
</head>
<body>
<div id="app">
<!-- <button @click="next">测试</button> -->
<img src="../img/prev.png" alt="" @click="prev" v-if="num>0">
<img v-for="(item,index) in imgSrcs"
:src="item" alt="" v-show="num==index" >
<img src="../img/next.png" alt="" @click="next" v-if="num!=10">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el: "#app",
data: {
message: "hi",
num:0,
imgSrcs:["../img/00.jpg",
"../img/01.jpg",
"../img/02.jpg",
"../img/03.jpg",
"../img/04.jpg",
"../img/05.jpg",
"../img/06.jpg",
"../img/07.jpg",
"../img/08.jpg",
"../img/09.jpg",
"../img/10.jpg",
]
},
methods: {
prev:function() {
// if(this.num>0){
// //alert("--")
// }
this.num--;
},
next:function() {
// if(this.num<10){
// //alert("++")
// }
this.num++;
}
}
})
</script >
</body>
</html>
