vue基础(二)
本地应用
1. 内容绑定,事件绑定
- v-text
- v-html
- v-on
2. 显示切换,属性绑定
- v-show
- v-if
- v-bind
3. 列表循环,表单元素绑定
- v-for
- v-on补充
- v-model
v-text
<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>datatitle>
head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script><div id="app" ><p>h2><h2>{{message+'打工人'}}h2>p><h3 v-text="message+'打工人'">h3><h4 v-text="info+'打工人'">h4><h5>{{message+'打工人'}}h5>div><script>var app = new Vue({el:"#app",data:{message:"今天也要加油哦!", info:"加油"}})script>
body>
html>
- v-text指令的作用是:设置标签的内容(textContent)
- 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
- 内部支持写表达式
v-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>Documenttitle>
head>
<body>
<div id="app"><p v-text="content">p><p v-html="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:"今天也要加油哦！"}})script>
body>
html>
- v-html指令的作用是:设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
- 解析文本使用v-text,需要解析html结构使用v-html
v-on基础
<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>Documenttitle>
head>
<body><div id="app"><input type="button" value="v-on指令" v-on:click="doit">input><input type="button" value="v-on简写" @click="doit">input><input type="button" value="双击事件" @dblclick="doit">sinput> div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script><script>//创建实例var app =new Vue({el:"#app",methods:{doit:function(){alert("做IT");}},})script>
body>
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>Documenttitle>
head>
<body><div id="app"><input type="button" value="v-on指令" v-on:click="doit">input><input type="button" value="v-on简写" @click="doit">input><input type="button" value="双击事件" @dblclick="doit">input><h2 @click="changeFood">{{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:{doit:function(){alert("做IT");},changeFood:function(){//console.log(this.food);this.food+="很好吃！"}}})script>
body>
html>
- v-on指令的作用是:为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据
Vue本地应用-计数器
<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><link rel="stylesheet" href="./css/index.css" />
head><body><div id="app"><div class="input-num"><button @click="sub">-button><span>{{ num }}span><button @click="add">+button>div><img src="./images/logo.svg" alt="" width="30%" />div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>// 创建Vue实例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>
- data中定义数据:比如num
- methods中添加两个方法:比如add(递增),sub(递减)
- 使用v-text将num设置给span标签
- 使用v-on将add,sub分别绑定给+,-按钮
- 累加的逻辑:小于10累加,否则提示
- 递减的逻辑:大于0递减,否则提示
- 创建Vue示例时:el(挂载点),data(数据),methods(方法)
- v-on指令的作用是绑定事件,简写为@
- 方法中通过this,关键字获取data中的数据
- v-text指令的作用是:设置元素的文本值,简写为{{}}
- v-html指令的作用是:设置元素的innerHTML
v-show
<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>Documenttitle>
head><body><div id="app"><input type="button" value="切换显示状态" @click="changeIsShow">input><input type="button" value="累加年龄" @click="addAge">input><img src="images/logo.svg" alt="hhh" v-show="isShow"><img src="images/logo.svg" alt="hhhhh" v-show="age>=18">div><script src="https://cdn.jsdelivr.net/npm/vue/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-show指令的作用是:根据真假切换元素的显示状态
- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终都会解析为布尔值
- 值为true元素显示,值为false元素隐藏
- 数据改变之后,对应元素的显示状态会同步更新
v-show
<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>Documenttitle>
head><body><div id="app"><input type="button" value="切换显示" @click="toggleIsShow"><p v-if="isShow">今天也要加油哦！p><p v-show="isShow">今天也要加油哦！p><h3 v-if="temperature>=35">好热呀！h3>div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new Vue({el: "#app",data: {isShow: false,temperature: 40},methods: {toggleIsShow: function () {this.isShow = !this.isShow;}}})script>
body>html>
- v-if指令的作用是:根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示状态,v-show通过display，v-if移除
- 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
- 频繁的切换v-show,反之使用v-if,前者的切换消耗小
v-bind
<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-bind指令title><style>.active {border: 1px solid red;}style>
head><body><div id="app"><img v-bind:src="imgSrc" alt=""><br><img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive"><br><img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new Vue({el: "#app",data: {imgSrc: "images/logo.png",imgTitle: "黑马程序员",isActive: false},methods: {toggleActive: function () {this.isActive = !this.isActive;}},})script>
body>html>
- v-bind指令的作用是:为元素绑定属性
- 完整写法是 v-bind:属性名
- 简写的话可以直接省略v-bind,只保留 :属性名
- 需要动态的增删class建议使用对象的方式
巩固练习——图片切换
1.定义图片数组
2.索引（添加图片索引）
3.v-bind（绑定src属性）
4.v-on（图片切换逻辑）
5.v-show（显示状态切换）
<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>Documenttitle><link rel="stylesheet" href="./css/changeimg.css" />
head><body><div id="mask"><div class="center"><h2 class="title"><img src="./images/logo@2x.png" alt=""> 图片切换h2><img :src="imgList[index]" alt="" /><a href="javascript:void(0)" @click="prev" class="left" v-show="index>0"><img src="./images/prev.png" alt="" />a><a href="javascript:void(0)" @click="next" class="right" v-show="index" ><img src="./images/next.png" alt="" />a>div>div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>const app = new Vue({el: "#mask",data: {imgList: ["./images/sheep1.jpeg","./images/sheep2.jpeg","./images/sheep3.jpeg","./images/sheep4.jpeg","./images/sheep5.jpeg","./images/sheep6.jpeg","./images/sheep7.jpeg","./images/sheep8.jpeg","./images/sheep9.jpeg","./images/sheep1.jpeg","./images/sheep1.jpeg",],index: 0},methods: {// 上一张prev() {this.index--;},// 下一张next() {this.index++;}}});script>
body>html>
* {margin: 0;padding: 0;
}html,
body,
#mask {width: 100%;height: 100%;
}#mask {background-color: #c9c9c9;position: relative;
}#mask .center {position: absolute;background-color: #fff;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 10px;
}
#mask .center .title {position: absolute;display: flex;align-items: center;height: 56px;top: -61px;left: 0;padding: 5px;padding-left: 10px;padding-bottom: 0;color: rgba(175, 47, 47, 0.8);font-size: 26px;font-weight: normal;background-color: white;padding-right: 50px;z-index: 2;
}
#mask .center .title img {height: 40px;margin-right: 10px;
}#mask .center .title::before {content: "";position: absolute;width: 0;height: 0;border: 65px solid;border-color: transparent transparent white;top: -65px;right: -65px;z-index: 1;
}#mask .center > img {display: block;width: 700px;height: 458px;
}#mask .center a {text-decoration: none;width: 45px;height: 100px;position: absolute;top: 179px;vertical-align: middle;opacity: 0.5;
}
#mask .center a :hover {opacity: 0.8;
}#mask .center .left {left: 15px;text-align: left;padding-right: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;
}#mask .center .right {right: 15px;text-align: right;padding-left: 10px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;
}
- 列表数据使用数组保存
- v-bind指令可以设置元素属性,比如src
- v-show和v-if都可以切换元素的显示状态,频繁切换用v-show
v-for
<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>v-fortitle>
head><body><div id="app"><input type="button" value="添加数据" @click="add">input><input type="button" value="移除数据" @click="remove">input><ul><li v-for="(it,index) in arr">{{ index+1 }}一线城市:{{ it }}li><p v-for="item in vagetables" v-bind:title="item.name">{{item.name}}p>ul>div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new Vue({el: "#app",data: {arr: ["北京", "上海", "成都", "杭州", "深圳"],vagetables: [{name: "黄瓜",},{name: "西红柿",}]},methods: {add: function () {this.vagetables.push({ name: "娃娃菜" });},remove: function () {this.vagetables.shift();}},})script>
body>html>
添加数据
移除数据
- v-for指令的作用是:根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是( item,index ) in 数据
- item 和 index 可以结合其他指令一起使用
- 数组长度的更新会同步到页面上,是响应式的
v-on补充
<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"><input type="button" value="点击" @click="doIt(666,'老铁')"><input type="text" @keyup.enter="sayHi">div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new Vue({el: "#app",methods: {doIt: function (p1, p2) {console.log("做it");console.log(p1);console.log(p2);},sayHi: function () {alert("吃了没");}},})script>
body>html>
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上 .修饰符 可以对事件进行限制
- .enter 可以限制触发的按键为回车
- 事件修饰符有多种
v-model
<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"><input type="button" value="修改message" @click="setMessage"><input type="text" v-model="message" @keyup.enter="getMessage"><h2>{{ message }}h2>div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script><script>var app = new Vue({el: "#app",data: {message: "今天也要加油！"},methods: {getMessage: function () {alert(this.message);},setMessage: function () {this.message = "每天都要加油";}},})script>
body>html>
- v-model指令的作用是便捷的设置和获取表单元素的
- 绑定的数据会和表单元素值相关联
- 绑定的数据←→表单元素的值
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！