2020 零基础 Vue快速入门 Vue指令 本地应用篇【整理】
文章目录
- 1、引言
- 2、内容绑定，事件绑定
- 2.1 简单计数器应用
- 3、显示切换，属性绑定
- 4、列表循环，表单元素绑定
- 点击进入Vue❤学习专栏~
1、引言
本地应用：
- 通过Vue实现常见的网页效果
- 学习Vue指令，以案例巩固知识点
- Vue指令指的是，以v-开头的一组特殊语法
2、内容绑定，事件绑定
① v-text指令
能替换整个标签的内容，另字符串拼接格式详见代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3 v-text="message+'!'"> 你好，Vue</h3>
<h3>{{message+'!'}} 你好，Vue</h3>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message: "Hello Vue"
}
});
</script>
</body>
</html>
- 显示效果
② v-html指令
- 能解析html内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-html='content'></p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
content: '点击进入博主主页并关注！'
}
});
</script>
</body>
</html>
- 显示效果
v-on指令
- 为元素绑定事件
但是我们平常更习惯性的把v-on:直接替换为@ 方便写也方便记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点击事件" @click="clickIt"/>
<h3 @click="clickIt">{{message}}</h3>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message:"点击一下?"
},
methods:{
clickIt:function(){
this.message+="点个关注呗~"
}
}
});
</script>
</body>
</html>
- 显示效果
2.1 简单计数器应用
步骤：
- 1.data中定义数据：比如num
- 2.methods中添加两个方法：比如add（递增），sub（递减）
- 3.使用v-text将num设置给span标签
- 4.使用v-on将add和sub分别绑定给+,-按钮
- 5.累加的逻辑：小于10累加，否则提示“不能再加了！”
- 6.递减的逻辑：大于0递减，否则提示“不能再减了！”
ps:目前主要还是学的方法，所以没有去整理css，用的原生态的样子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="add">+</button>
<span>{{num}}</span>
<button @click="sub">-</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
num:1
},
methods:{
add:function(){
if(this.num<10){
this.num++
}else{
alert('不能再加了！')
}
},
sub:function(){
if(this.num>0){
this.num--
}else{
alert('不能再减了！')
}
}
}
});
</script>
</body>
</html>
- 显示效果
3、显示切换，属性绑定
v-show指令
- 根据表达值的真假，切换元素的显示和隐藏
ps:下面就展示一个例子，用到了上一章讲到的事件绑定，可以进行图片显示或隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img src="https://s2.ax1x.com/2019/06/14/V5R7od.png" v-show="isShow"/>
<img src="https://s2.ax1x.com/2019/06/14/V5R7od.png" v-show="age>=18"/>
<button @click="cc">点击显示或隐藏</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
isShow:false,
age:16
},
methods:{
cc:function(){
this.isShow=!this.isShow
}
}
});
</script>
</body>
</html>
-
显示效果
v-if指令 -
根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）
表面上和v-show差不多，但是实际上有点区别：
具体详细如下： -
v-show操纵的是display 看这个标签显示不显示
-
而v-if操纵的是标签 如果为false 则会删除这整个标签（也就是html不会显示这个标签）然后v-show则不会
v-bind指令
使用方式：
v-bind:属性名=表达式
但vue里面我们能够省去v-bind 即为 :属性名=表达式 的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active{
border: 5px solid orangered;
}
</style>
</head>
<body>
<div id="app">
<img :src="imgSrc" :title="imgTitle+'!'" @click="cclick" :class="{active:isActive}"/>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
imgSrc:"https://s2.ax1x.com/2019/06/14/V5R7od.png",
imgTitle:"追风筝的人",
isActive:false
},
methods:{
cclick:function(){
this.isActive=!this.isActive
}
}
});
</script>
</body>
</html>
- 显示效果
点击前：
点击后：
4、列表循环，表单元素绑定
v-for指令
根据数据生成列表结构
之前我们在基础篇里面有一个关于数组的，这里我们就可以通过循环来取值了，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<li v-for="(item,index) in array">
{{item}}
</li>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
array:['计算机','市场营销','信息管理','医学信息工程']
}
});
</script>
</body>
</html>
-
显示效果
v-on补充ps:我们可以通过回车键来绑定事件，还可以进行参数传递，具体如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点击事件" @click="cclick('yangchaoyi')"/>
<input type="text" @keyup.enter="hello" />
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
methods:{
cclick:function(p1){
alert('你好! '+p1);
},
hello:function(){
alert('Hello');
}
}
});
</script>
</body>
</html>
- 显示效果
v-model指令
-
获取和设置表单元素的值（双向数据绑定）
-
v-model指令的作用是便捷的设置和获取表单元素的值
-
绑定的数据会和表单元素值相关联
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<!-- 开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" @click="setMessage" value="设置message值" />
<input type="text" v-model="message" @keyup.enter="getMessage">
<h3>{{message}}</h3>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
message:'一百个Chocolate'
},
methods:{
getMessage:function(){
alert(this.message);
},
setMessage:function(){
this.message="你好 Vue !";
}
}
});
</script>
</body>
</html>
- 显示效果
最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~
点击进入Vue❤学习专栏~
学如逆水行舟，不进则退