Vue - Vue指令
v-text
设置标签的文本值(textContent)
v-text指令的作用是:设置标签的内容(textContent)- 默认写法会替换全部内容,使用
差值表达式{{}}可以替换指定内容 - 内部支持写
表达式
<span v-text="msg+'...'">内容不显示被 msg... 覆盖span>
<span>{{msg+"..."}}内容span>
v-html
设置标签的innerHTML
v-html指令的作用是:设置元素的innerHTML- 内容中有
html结构会被解析为标签 v-text指令无论内容是什么,只会解析为文本- 解析文本使用
v-text,需要解析html结构使用v-html
v-on
为元素绑定事件
v-on指令的作用是:为元素绑定事件- 事件名不需要写
on - 指令可以简写为
@ - 绑定的方法定义在
methods属性中 - 方法内部通过
this关键字可以访问定义在data中数据
v-on 文档
- 事件绑定的方法写成
函数调用的形式，可以传入自定义参数 - 定义方法时需要定义
形参来接收传入的实参 - 事件的后面跟上
.修饰符可以对事件进行限制 .enter可以限制触发的按键为回车- 事件修饰符有多种
<div id="app">
<input type="button" value="绑定事件" v-on:click="fn1">
<input type="button" value="v-on简写" @click="fn1">
<input type="button" value="this" @click="fn2">
<input type="button" value="传参" @click="fn3(1,2)">
<input placeholder="键修饰符" @keyup.enter="fn4">
div>
var app = new Vue({
el: "#app",
data: {
msg: "vue"
},
methods: {
fn1: function() {
console.log('点击')
},
fn2: function() {
console.log(this.msg + ",你好") // vue,你好
},
fn3: function(p1, p2) {
var p3 = p1 + p2;
console.log(p3)
},
fn4: function() {
console.log("按下了enter键")
}
},
})
- 创建Vue示例时:
el(挂载点)，data(数据)，methods(方法) v-on指令的作用是绑定事件，简写为@- 方法中通过
this，关键字获取data中的数据 v-text指令的作用是：设置元素的文本值，简写为{{}}v-html指令的作用是：设置元素的innerHTML
【案例：计数器】
参考代码：
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>Documenttitle>
<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 @click="add"> + button>
div>
div>
body>
html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
/*
1. data中定义num属性,类型是数字,渲染到2个按钮中间
2. 减号绑定点击事件,对应的方法名叫sub,大于0之前递减
3. 加号绑定点击事件,对应的方法名叫add,小于0之前累加
*/
// 创建Vue实例
var app = new Vue({
el: "#app",
data: {
// 修改的数字
num: 1,
min: 0,
max: 10
},
methods: {
// 减
sub: function() {
// console.log("sub");
// 递减
if (this.num > this.min) {
this.num--;
} else {
alert("别点啦,太小啦!");
}
},
// 加
add: function() {
// console.log("add");
// 累加
if (this.num < this.max) {
this.num++;
} else {
alert("别点啦,太大啦!");
}
}
}
});
script>
演示图
v-show
根据表达值的真假,切换元素的显示和隐藏，（操纵样式display:none）
v-show指令的作用是:根据真假切换元素的显示状态- 原理是修改元素的display,实现显示隐藏
- 指令后面的内容,最终都会解析为
布尔值 - 值为
true元素显示,值为false元素隐藏 - 数据改变之后,对应元素的显示状态会
同步更新
v-if
根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)
v-if指令的作用是:根据表达式的真假切换元素的显示状态- 本质是通过操纵
dom元素来切换显示状态 - 表达式的值为
true，元素存在于dom树中；为false，从dom树中移除 - 频繁的切换使用
v-show，反之使用v-if。前者的切换消耗小
v-bind
设置元素的属性
v-bind指令的作用是:为元素绑定属性- 完整写法是
v-bind:属性名 - 简写的话可以直接省略
v-bind，只保留:属性名 - 需要动态的增删
class建议使用对象的方式
<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>
var app = new Vue({
el: "#app",
data: {
imgSrc: "https://profile.csdnimg.cn/1/D/6/1_wgh4318",
imgTitle: "凡小多",
isActive: false
},
methods: {
toggleActive: function() {
this.isActive = !this.isActive;
}
},
})
【案例：切换图片】
- 定义图片数组
- 添加图片索引
- 绑定src属性
- 图片切换逻辑
- 显示状态切换
参考代码
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>
<link rel="stylesheet" href="./css/index.css" />
head>
<body>
<div id="mask">
<div class="center">
<h2 class="title">
切换图片
h2>
<img :src="imgArr[index]" alt="" />
<a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
<img src="./images/prev.png" alt="" />
a>
<a href="javascript:void(0)" v-show="index" @click="next" class="right">
<img src="./images/next.png" alt="" />
a>
div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: "#mask",
data: {
imgArr: [
"https://img1.baidu.com/it/u=1137815027,607953685&fm=26&fmt=auto",
"https://img1.baidu.com/it/u=2455305453,1734302910&fm=26&fmt=auto",
"https://img2.baidu.com/it/u=1064652084,3363885202&fm=26&fmt=auto",
],
index: 0
},
methods: {
prev: function() {
this.index--;
},
next: function() {
this.index++;
}
},
})
script>
body>
html>
css页面代码
* {
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指令可以设置元素属性，比如srcv-show和v-if都可以切换元素的显示状态,频繁切换用v-show
v-for
根据数据生成列表结构
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
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">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<li v-for="(i,index) in arr">
{{ index+1 }}. 渲染内容: {{ i }}
li>
ul>
<h2 v-for="item in arrobj" v-bind:title="item.name">
{{ item.name }}
h2>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["内容1","内容2","内容3","内容4"],
arrobj:[
{name:"小多"},
{name:"图图"}
]
},
methods: {
add:function(){
this.arrobj.push({ name:"多多" });
},
remove:function(){
this.arrobj.shift();
}
},
})
script>
body>
html>
v-model
v-model其实是v-model:value的简写 获取和设置表单元素的值(双向数据绑定)
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">
<input type="text" v-model="message" @keyup.enter="getM">
<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: {
getM:function(){
alert(this.message);
}
},
})
script>
body>
html>
【案例：记事本】
- 列表结构可以通过
v-for指令结合数据生成 v-on结合事件修饰符可以对事件进行限制,比如.enterv-on在绑定事件时可以传递自定义参数- 通过
v-model可以快速的设置和获取表单元素的值 - 基于数据的开发方式
参考代码
html页面
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>记事本title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="./css/index.css" />
head>
<body>
<section id="todoapp">
<header class="header">
<h1>记事本h1>
<input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off"
placeholder="请输入任务" class="new-todo" />
header>
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{ index+1 }}.span>
<label>{{ item }}label>
<button class="destroy" @click="remove(index)">button>
div>
li>
ul>
section>
<footer class="footer">
<span class="todo-count" v-if="list.length!=0">
<strong>{{ list.length }}strong> items left
span>
<button v-show="list.length!=0" class="clear-completed" @click="clear">
Clear
button>
footer>
section>
<footer class="info">
<p>
<a href="https://blog.csdn.net/wgh4318"><img src="https://img-home.csdnimg.cn/images/20201124032511.png"
alt="" />a>
p>
footer>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var app = new Vue({
el: "#todoapp",
data: {
list: ["吃饭", "睡觉", "写代码"],
inputValue: "好好学习,天天向上"
},
methods: {
add: function() {
this.list.push(this.inputValue);
this.inputValue = '';
},
remove: function(index) {
console.log("删除");
console.log(index);
this.list.splice(index, 1);
},
clear: function() {
this.list = [];
}
},
})
script>
body>
html>
css页面
html,
body {
margin: 0;
padding: 0;
}
body {
background: #fff;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
}
:focus {
outline: 0;
}
.hidden {
display: none;
}
#todoapp {
background: #fff;
margin: 180px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
#todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
#todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: gray;
}
#todoapp h1 {
position: absolute;
top: -160px;
width: 100%;
font-size: 60px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, .8);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
.new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.new-todo {
padding: 16px;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}
.main {
position: relative;
z-index: 2;
border-top: 1px solid #e6e6e6;
}
.toggle-all {
width: 1px;
height: 1px;
border: none;
/* Mobile Safari */
opacity: 0;
position: absolute;
right: 100%;
bottom: 100%;
}
.toggle-all+label {
width: 60px;
height: 34px;
font-size: 0;
position: absolute;
top: -52px;
left: -13px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.toggle-all+label:before {
content: "❯";
font-size: 22px;
color: #e6e6e6;
padding: 10px 27px 10px 27px;
}
.toggle-all:checked+label:before {
color: #737373;
}
.todo-list {
margin: 0;
padding: 0;
list-style: none;
max-height: 420px;
overflow: auto;
}
.todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px solid #ededed;
height: 60px;
box-sizing: border-box;
}
.todo-list li:last-child {
border-bottom: none;
}
.todo-list .view .index {
position: absolute;
color: gray;
left: 10px;
top: 20px;
font-size: 16px;
}
.todo-list li .toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
border: none;
/* Mobile Safari */
-webkit-appearance: none;
appearance: none;
}
.todo-list li .toggle {
opacity: 0;
}
.todo-list li .toggle+label {
background-repeat: no-repeat;
background-position: center left;
}
.todo-list li .toggle:checked+label {}
.todo-list li label {
word-break: break-all;
padding: 15px 15px 15px 60px;
display: block;
line-height: 1.2;
transition: color 0.4s;
}
.todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
.todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 30px;
color: #cc9a9a;
margin-bottom: 11px;
transition: color 0.2s ease-out;
}
.todo-list li .destroy:hover {
color: #af5b5e;
}
.todo-list li .destroy:after {
content: "×";
}
.todo-list li:hover .destroy {
display: block;
}
.todo-list li .edit {
display: none;
}
.todo-list li.editing:last-child {
margin-bottom: -1px;
}
.footer {
color: #777;
padding: 10px 15px;
height: 20px;
text-align: center;
border-top: 1px solid #e6e6e6;
}
.footer:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
.todo-count {
float: left;
text-align: left;
}
.todo-count strong {
font-weight: 300;
}
.filters {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
right: 0;
left: 0;
}
.filters li {
display: inline;
}
.filters li a {
color: inherit;
margin: 3px;
padding: 3px 7px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
}
.filters li a:hover {
border-color: rgba(175, 47, 47, 0.1);
}
.filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}
.clear-completed,
html .clear-completed:active {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
cursor: pointer;
}
.clear-completed:hover {
text-decoration: underline;
}
.info {
margin: 50px auto 0;
color: #bfbfbf;
font-size: 15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-align: center;
}
.info p {
line-height: 1;
}
.info a {
color: inherit;
text-decoration: none;
font-weight: 400;
}
.info a:hover {
text-decoration: underline;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
.toggle-all,
.todo-list li .toggle {
background: none;
}
.todo-list li .toggle {
height: 40px;
}
}
@media (max-width: 430px) {
.footer {
height: 50px;
}
.filters {
bottom: 10px;
}
}
演示图
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>收集表单数据title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区option>
<option value="beijing">北京option>
<option value="shanghai">上海option>
<option value="shenzhen">深圳option>
<option value="wuhan">武汉option>
select>
<br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other">textarea> <br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》a>
<button>提交button>
form>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
script>
html>
v-cloak
/* css样式 */
[v-cloak]{
display:none;
}
<h2 v-cloak>{{name}}h2>
v-once
<h2 v-once>初始化的n值是:{{n}}h2> // 不变
<h2>当前的n值是:{{n}}h2>
<button @click="n++">点我n+1button>
v-pre
自定义指令
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2>{{name}}h2>
<h2>当前的n值是：<span v-text="n">span> h2>
<h2>放大10倍后的n值是：<span v-big="n">span> h2>
<button @click="n++">点我n+1button>
<hr/>
<input type="text" v-fbind:value="n">
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false
//定义全局指令
/* Vue.directive('fbind',{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}) */
new Vue({
el:'#root',
data:{
name:'多多',
n:1
},
directives:{
//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
/* 'big-number'(element,binding){
// console.log('big')
element.innerText = binding.value * 10
}, */
big(element,binding){
console.log('big',this) //注意此处的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind:{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}
}
})
script>
html>
