二、vue指令

1、v-bind

⽬标: 给标签属性设置vue变量的值

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个指令, 都有独⽴的作⽤

语法：v-bind:属性名="vue变量"

简写：:属性名="vue变量"

<!-- vue指令-v-bind属性动态赋值 -->

<a v-bind:href="url">我是a标签</a>

<img :src="imgSrc">

总结: 把vue变量的值, 赋予给dom属性上, 影响标签显⽰效果

2、v-on

⽬标: 给标签绑定事件

语法

v-on:事件名="要执⾏的==少量代码=="

v-on:事件名="methods中的函数"

<!-- vue指令-v-bind属性动态赋值 -->

<a v-bind:href="url">我是a标签</a>

<img :src="imgSrc">v-on:事件名="methods中的函数(实参)"

简写: @事件名="methods中的函数"

<!-- vue指令: v-on事件绑定-->

<p>你要买商品的数量: {{count}}</p>

<button v-on:click="count = count + 1">增加1</button>

<button v-on:click="addFn">增加1个</button>

<button v-on:click="addCountFn(5)">⼀次加5件</button>

<button @click="subFn">减少</button>

<script>

export default {

// ...其他省略

methods: {

addFn(){ // this代表export default后⾯的组件对象(下属有data⾥return出来的属性)

this.count++

},

addCountFn(num){

this.count += num

},

subFn(){

this.count--

}

}

}

</script>

总结: 常⽤@事件名, 给dom标签绑定事件, 以及=右侧事件处理函数

3、v-on事件对象

⽬标: vue事件处理函数中, 拿到事件对象

语法:

⽆传参, 通过形参直接接收

传参, 通过$event指代事件对象传给事件处理函数

<!-- vue指令: v-on事件绑定-->

<p>你要买商品的数量: {{count}}</p>

<button v-on:click="count = count + 1">增加1</button>

<button v-on:click="addFn">增加1个</button>

<button v-on:click="addCountFn(5)">⼀次加5件</button>

<button @click="subFn">减少</button>

<script>

export default {

// ...其他省略

methods: {

addFn(){ // this代表export default后⾯的组件对象(下属有data⾥return出来的属性)

this.count++

},

addCountFn(num){

this.count += num

},

subFn(){

this.count--

}

}

}

</script>

<template>

<div>

<a @click="one" href="http://www.baidu.com">阻⽌百度</a>

<hr>

<a @click="two(10, $event)" href="http://www.baidu.com">阻⽌去百度</a>

</div>

</template>

<script>

export default

methods: {

one(e){

e.preventDefault()

},

two(num, e){

e.preventDefault()

}

}

}

</script>

4、vue指令-v-on修饰符

⽬的: 在事件后⾯.修饰符名 - 给事件带来更强⼤的功能

语法:

@事件名.修饰符="methods⾥函数"

.stop - 阻⽌事件冒泡

.prevent - 阻⽌默认⾏为

.once - 程序运⾏期间, 只触发⼀次事件处理函数

总结: 修饰符给事件扩展额外功能

methods: {

one(e){

e.preventDefault()

},

two(num, e){

e.preventDefault()

}

}

}

</script>

<template>

<div @click="fatherFn">

<!-- vue对事件进⾏了修饰符设置, 在事件后⾯.修饰符名即可使⽤更多的功能 -->

<button @click.stop="btn">.stop阻⽌事件冒泡</button>

<a href="http://www.baidu.com" @click.prevent="btn">.prevent阻⽌默认⾏为</a>

<button @click.once="btn">.once程序运⾏期间, 只触发⼀次事件处理函数</button>

</div>

</template>

<script>

export default {

methods: {

fatherFn(){

console.log("father被触发");

},

btn(){

console.log(1);

}

}

}

</script>

5、vue指令-v-on按键修饰符

⽬标: 给键盘事件, 添加修饰符, 增强能⼒

语法:

@keyup.enter - 监测回车按键

@keyup.esc - 监测返回按键

更多修饰符

<template>

<div>

<input type="text" @keydown.enter="enterFn">

<hr>

<input type="text" @keydown.esc="escFn">

</div>

</template>

<script>

export default {

methods: {

enterFn(){

console.log("enter回⻋按键了");

},

escFn(){

console.log("esc按键了");

}

}

}

</script>

总结: 多使⽤事件修饰符, 可以提⾼开发效率, 少去⾃⼰判断过程

练习

<template>

<div>

<h1>{{ message }}</h1>

<button @click="btn">逆转世界</button>

</div>

</template>

<script>

export default {

data() {

return {

message: "HELLO, WORLD",

};

},

methods: {

btn(){

this.message = this.message.split("").reverse().join("")

}

}

};

</script>

6、vue指令 v-model

⽬标: 把value属性和vue数据变量, 双向绑定到⼀起

语法: v-model="vue数据变量"

双向数据绑定

数据变化 -> 视图⾃动同步

视图变化 -> 数据⾃动同步

演⽰: ⽤户名绑定 - vue内部是MVVM设计模式

<template>

<div>

<h1>{{ message }}</h1>

<button @click="btn">逆转世界</button>

</div>

</template>

<script>

export default {

data() {

return {

message: "HELLO, WORLD",

};

},

methods: {

btn(){

this.message = this.message.split("").reverse().join("")

}

}

};

</script><template>

<div>

<!--

v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令

-->

<div>

<span>⽤户名:</span>

<input type="text" v-model="username" />

</div>

<div>

<span>密码:</span>

<input type="password" v-model="pass" />

</div>

<div>

<span>来⾃于: </span>

<!-- 下拉菜单要绑定在select上 -->

<select v-model="from">

<option value="北京市">北京</option>

<option value="南京市">南京</option>

<option value="天津市">天津</option>

</select>

</div>

<div>

<!-- (重要)

遇到复选框, v-model的变量值

⾮数组 - 关联的是复选框的checked属性

数组 - 关联的是复选框的value属性

-->

<span>爱好: </span>

<input type="checkbox" v-model="hobby" value="抽烟">抽烟

<input type="checkbox" v-model="hobby" value="喝酒">喝酒

<input type="checkbox" v-model="hobby" value="写代码">写代码

</div>

<div>

<span>性别: </span>

<input type="radio" value="男" name="sex" v-model="gender">男

<input type="radio" value="⼥" name="sex" v-model="gender">⼥

</div>

<div>

<span>⾃我介绍</span>

<textarea v-model="intro"></textarea>

</div>

</div>

</template>

<script>

export default {

data() {

return {

username: "",

pass: "",

from: "",

hobby: [],

sex: "",

intro: "",

};

// 总结:

// 特别注意: v-model, 在input[checkbox]的多选框状态

// 变量为⾮数组, 则绑定的是checked的属性(true/false) - 常⽤于: 单个绑定使⽤

// 变量为数组, 则绑定的是他们的value属性⾥的值 - 常⽤于: 收集勾选了哪些值

}

};

</script>

总结: 本阶段v-model只能⽤在表单元素上, 以后学组件后讲v-model⾼级⽤法

7、vue指令 v-model

⽬标: 把value属性和vue数据变量, 双向绑定到⼀起

语法: v-model="vue数据变量"

双向数据绑定

数据变化 -> 视图⾃动同步

视图变化 -> 数据⾃动同步

演⽰: ⽤户名绑定 - vue内部是MVVM设计模式

<template>

<div>

<h1>{{ message }}</h1>

<button @click="btn">逆转世界</button>

</div>

</template>

<script>

export default {

data() {

return {

message: "HELLO, WORLD",

};

},

methods: {

btn(){

this.message = this.message.split("").reverse().join("")

}

}

};

</script><template>

<div>

<!--

v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令

-->

<div>

<span>⽤户名:</span>

<input type="text" v-model="username" />

</div>

<div>

<span>密码:</span>

<input type="password" v-model="pass" />

</div>

<div>

<span>来⾃于: </span>

<!-- 下拉菜单要绑定在select上 -->

<select v-model="from">

<option value="北京市">北京</option>

<option value="南京市">南京</option>

<option value="天津市">天津</option>

</select>

</div>

<div>

<!-- (重要)

遇到复选框, v-model的变量值

⾮数组 - 关联的是复选框的checked属性

数组 - 关联的是复选框的value属性

-->

<span>爱好: </span>

<input type="checkbox" v-model="hobby" value="抽烟">抽烟

<input type="checkbox" v-model="hobby" value="喝酒">喝酒

<input type="checkbox" v-model="hobby" value="写代码">写代码

</div>

<div>

<span>性别: </span>

<input type="radio" value="男" name="sex" v-model="gender">男

<input type="radio" value="⼥" name="sex" v-model="gender">⼥

</div>

<div>

<span>⾃我介绍</span>

<textarea v-model="intro"></textarea>

</div>

</div>

</template>

<script>

export default {

data() {

return {

username: "",

pass: "",

from: "",

hobby: [],

sex: "",

intro: "",

};

// 总结:

// 特别注意: v-model, 在input[checkbox]的多选框状态

// 变量为⾮数组, 则绑定的是checked的属性(true/false) - 常⽤于: 单个绑定使⽤

// 变量为数组, 则绑定的是他们的value属性⾥的值 - 常⽤于: 收集勾选了哪些值

}

};

</script>

总结: 本阶段v-model只能⽤在表单元素上, 以后学组件后讲v-model⾼级⽤法

8、vue指令 v-model修饰符

_vue指令 v-model修饰符

⽬标: 让v-model拥有更强⼤的功能

语法:

• v-model.修饰符="vue数据变量"
• .number 以parseFloat转成数字类型
• .trim 去除⾸尾空⽩字符
• .lazy 在change时触发⽽⾮inupt时

</script>

<template>

<div>

<div>

<span>年龄:</span>

<input type="text" v-model.number="age">

</div>

<div>

<span>⼈⽣格⾔:</span>

<input type="text" v-model.trim="motto">

</div>

<div>

<span>⾃我介绍:</span>

<textarea v-model.lazy="intro"></textarea>

</div>

</div>

</template>

<script>

export default {

data() {

return {

age: "",

motto: "",

intro: ""

</script>

总结: v-model修饰符, 可以对值进⾏预处理, ⾮常⾼效好⽤

9、vue指令 v-text和v-html

⽬的: 更新DOM对象的innerText/innerHTML

语法:

• v-text="vue数据变量"
• v-html="vue数据变量"
• 注意: 会覆盖插值表达式

</script>

<template>

<div>

<p v-text="str"></p>

<p v-html="str"></p>

</div>

</template>

<script>

export default {

data() {

return {

str: "<span>我是⼀个span标签</span>"

}

}

}

</script>

总结: v-text把值当成普通字符串显⽰, v-html把值当做html解析

10、_vue指令 v-show和v-if

⽬标: 控制标签的隐藏或出现

语法:

• v-show="vue变量"
• v-if="vue变量"
• 原理
• v-show ⽤的display:none隐藏 (频繁切换使⽤)

v-else使⽤

<template>

<div>

<h1 v-show="isOk">v-show的盒⼦</h1>

<h1 v-if="isOk">v-if的盒⼦</h1>

<div>

<p v-if="age > 18">我成年了</p>

<p v-else>还得多吃饭</p>

</div>

</div>

</template>

<script>

export default {

data() {

return {

isOk: true,

age: 15

}

}

}

</script>

总结: 使⽤v-show和v-if以及v-else指令, ⽅便通过变量控制⼀套标签出现/隐藏

案例-折叠⾯板

⽬标: 点击展开或收起时，把内容区域显⽰或者隐藏

此案例使⽤了less语法, 项⽬中下载模块

yarn add less@3.0.4 less-loader@5.0.0 -D

只有标签和样式

<template>

<div id="app">

<h3>案例：折叠⾯板</h3>

<div>

<div class="title">

<h4>芙蓉楼送⾟渐</h4>

<span class="btn" >

收起

</span>

</div>

<div class="container">

<p>寒⾬连江夜⼊吴,</p>

<p>平明送客楚⼭孤。</p>

<p>洛阳亲友如相问，</p>

<p>⼀⽚冰⼼在⽟壶。</p>

</div>

</div>

</div>

</template>

<script>

export default {

data() {

return {

}

}

}

</script>

<style lang="less">

body {

background-color: #ccc;

#app {

width: 400px;

margin: 20px auto;

background-color: #fff;

border: 4px solid blueviolet;

border-radius: 1em;

box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);

padding: 1em 2em 2em;

h3 {

text-align: center;

}

.title {

display: flex;

justify-content: space-between;

align-items: center;

border: 1px solid #ccc;

padding: 0 1em;

}

.title h4 {

line-height: 2;

margin: 0;

}

.container {

border: 1px solid #ccc;

padding: 0 1em;

}

.btn {

/* ⿏标改成⼿的形状 */

cursor: pointer;

}

}

}

</style>

正确答案

<template>

<div id="app">

<h3>案例：折叠⾯板</h3>

<div>

<div class="title">

<h4>芙蓉楼送⾟渐</h4>

<span class="btn" @click="isShow = !isShow">

{{ isShow ? '收起' : '展开' }}

</span>

</div>

<div class="container" v-show="isShow">

<p>寒⾬连江夜⼊吴, </p>

<p>平明送客楚⼭孤。</p>

<p>洛阳亲友如相问，</p>

<p>⼀⽚冰⼼在⽟壶。</p>

</div>

</div>

</div>

</template>

<script>

export default {

data() {

return {

isShow: false

}

}

}

</script>

11、vue指令-v-for

⽬标: 列表渲染, 所在标签结构, 按照数据数量, 循环⽣成

语法

•       v-for="(值, 索引) in ⽬标结构"
•       v-for="值 in ⽬标结构"

⽬标结构:

•       可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)

注意:

•       v-for的临时变量名不能⽤到v-for范围外

<template>

<div id="app">

<div id="app">

<!-- v-for 把⼀组数据, 渲染成⼀组DOM -->

<!-- ⼝诀: 让谁循环⽣成, v-for就写谁身上 -->

<p>学⽣姓名</p>

<ul>

<li v-for="(item, index) in arr" :key="item">

{{ index }} - {{ item }}

</li>

</ul>

<p>学⽣详细信息</p>

<ul>

<li v-for="obj in stuArr" :key="obj.id">

<span>{{ obj.name }}</span>

<span>{{ obj.sex }}</span>

<span>{{ obj.hobby }}</span>

</li>

</ul>

<!-- v-for遍历对象(了解) -->

<p>⽼师信息</p>

<div v-for="(value, key) in tObj" :key="value">

{{ key }} -- {{ value }}

</div>

<!-- v-for遍历整数(了解) - 从1开始 -->

<p>序号</p>

<div v-for="i in count" :key="i">{{ i }}</div>

</div>

</div>

</template>

<script>

export default {

data() {

return {

arr: ["⼩明", "⼩欢欢", "⼤⻩"],

stuArr: [

{

id: 1001,

name: "孙悟空",

sex: "男",

hobby: "吃桃⼦",

},

{

id: 1002,

name: "猪⼋戒",

sex: "男",

hobby: "背媳妇",

},

],

tObj: {

name: "⼩⿊",

age: 18,

class: "1期",

},

count: 10,

};

},

};

</script>

总结: vue最常⽤指令, 铺设页⾯利器, 快速把数据赋予到相同的dom结构上循环⽣成