Vue入门到关门之指令系统

本文主要是介绍Vue入门到关门之指令系统，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、引入

在 Vue.js 中，指令（Directives）是一种特殊的标记，用于向 Vue 实例提供特殊的行为。指令以 v- 开头，例如 v-if、v-for 等。

指令的本质就是语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。
注意：指令都是放在标签上的

二、指令

1、文本指令

（1）v-text

v-text是渲染字符串，会覆盖原先的字符串

（2）v-html

v-html是渲染为html。
但是，不建议使用v-html指令，因为它会导致被恶意者进行XSS攻击的潜在风险。

（3）示例

{{}}双大括号和v-text都是输出为文本。那如果想输出为html。使用v-html,如下例子

<div id="app"><div>{{innerHtml}}</div><div v-text="innerHtml">123</div><div v-html="innerHtml">123</div>
</div>
<script>new Vue({el:"#app",data:{innerHtml:'<button>一个按钮</button>'}})
</script>

2、事件指令

（1）v-on

v-on 事件绑定指令，用来辅助程序员为DOM 元素绑定事件监听，并提供处理逻辑。
语法:
- v-on:事件类型="methods中函数名"
- v-on:事件类型="内联语句"
由于v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的@）
常用的事件有：点击事件，双击事件，拖动事件，得到焦点，失去焦点。。。。

例如：

<body><div id="app"><!-- 完整写法 v-on: -->// v-on:事件名 = "methods中的函数名"<div v-on:click="handleClick">点击事件</div>// v-on:事件名 = "内联语句"<button v-on:click="count++">按钮</button><!-- 缩写 @ --><div @click="handleClick">点击事件</div><button @click="count++">按钮</button></div>
</body>
<script>new Vue({el:"#app",data:{},methods:{// 定义一个 点击函数   handleClick:function(){console.dir('click event')}    },})
</script>

（2）es6的对象写法

var hobby=['抽烟','烫头']
var obj={'name':'lqz',  // 正常写法age:19,  // 1、key之可以不用加引号hobby,  // 2、数组可以直接写名字，但必须在外面定义好showName:function() {  // 3、定义函数console.log(this.name)},showName() {  // 4、函数简写console.log(this.name)}
}console.log(obj)
obj.showName()  // 外部直接调用内部函数

（3）v-on调用传参

函数有一个参数
- 如果在事件中触发函数，没有传参数，会自动把事件对象传入
- 定义好的参数，传的就是什么参数
- 把事件对象传入（$event）
函数有多个参数
- 少传不加括号，但是js里面的函数需要多个参数，结果是第一个是事件对象，其他为undefined
- 少传加括号，但是js里面的函数需要多个参数，不会把自动把事件对象传入，均为undefined
- 需要3个参数，但是多传了参数，结果是只接受自己的3个参数，多的不要
- 多个参数中，需要传入事件对象，方式为$event

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./vue/vue.js"></script><style>img {height: 300px;width: 200px;}</style>
</head>
<body>
<div id="app"><h1>事件指令--函数有参数</h1><button @click="handleFunc1">不传参数-函数有参数</button><br><button @click="handleFunc1(isShow)">传参数-函数有参数</button><br><button @click="handleFunc1($event)">传参数-函数有参数-把事件对象传入</button><br><button @click="handleFunc2">多个参数-少传不加括号</button><br><button @click="handleFunc2()">多个参数-少传-加括号event不会自动传入</button><br><button @click="handleFunc2(1,2,3,4,5,6,)">多个参数-多传</button><br><button @click="handleFunc2(1,$event)">多个参数-event作为第二个参数</button>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {isShow:true},methods: {handleFunc1(event){//1 如果在事件中触发函数，没有传参数，会自动把 事件对象传入console.log(event)},handleFunc2(a,b,c){console.log(a)console.log(b)console.log(c)}}})
</script>
</html>

3、属性指令

（1）v-bind

v-bind 属性绑定指令，用来动态的设置html的标签属性，比如：src、url、title。。。

语法：
- v-bind：属性名="表达式"
- 简写为 :属性名="表达式"

示例：

控制图片轮播

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./vue/vue.js"></script>
</head>
<body>
<div id="app"><button @click="toggleAutoChange">{{ isAutoChanging ? '停止' : '开始' }}自动切换美女图片</button><img :src="currentImage" alt="Beautiful Girl">
</div>
</body>
<script>var vm = new Vue({el: "#app",data: {isAutoChanging: false,images: ["http://img.netbian.com/file/2024/0416/004850qAPxg.jpg","http://img.netbian.com/file/2024/0411/0016435MJh0.jpg","http://img.netbian.com/file/2024/0409/002601sxcu4.jpg","http://img.netbian.com/file/2024/0323/001609whWN7.jpg"],currentIndex: 0,intervalId: null},computed: {currentImage() {return this.images[this.currentIndex];}},methods: {toggleAutoChange() {this.isAutoChanging = !this.isAutoChanging;if (this.isAutoChanging) {this.interval = setInterval(() => {this.currentIndex = (this.currentIndex + 1) % this.images.length;}, 1000);} else {clearInterval(this.interval);}}},destroyed() {clearInterval(this.interval);}})
</script>
</html>

点击按钮随机切换图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./vue/vue.js"></script>
</head>
<body>
<div id="d1"><button @click="handleChange">点我换一张</button><br><img :src="img_change" alt="">
</div>
</body>
<script>var vm = new Vue({el: "#d1",data: {img_change: './img/1.jpg', // 图片是以数字命名的},methods: {handleChange: function () {this.img_change = `./img/${Math.ceil(Math.random() * this.list1.length)}.jpg`}}})
</script>
</html>

（2）v-bind 对于样式控制的增强 - 操作class

语法：:class=字符串/数组/对象

class可以绑定的类型有字符串、数组、对象

var vm = new Vue({el: '#app',data: {// 1、绑定的可以是字符串形式str_class: 'background',// 2、绑定的也可以是数组形式(常用)list_class: ['background'],// 3、对象形式obj_class: {'background': true, 'fontsize': false},}，methods: {handleChangeBack1: function () {this.str_class = this.str_class + ' fontsize'},handleChangeBack2: function () {// this.list_class.push('fontsize')this.list_class.pop('background')},handleChangeBack3: function () {this.obj_class.fontSize = true},
}

（3）v-bind 对于样式控制的增强 - 操作style

var vm = new Vue({el: '#app',data: {// 1、字符串形式str_style: 'background-color: yellow',// 2、数组形式list_style: [{'background': 'yellow'}],// 3、对象形式(更合适),一般用对象是用来修改里面的值会好一点// obj_style: {'background-color': 'pink', 'font-size': '50px'},// js的key可以去掉'',到那时中间有 - 的要转成驼峰obj_style: {backgroundColor: 'pink', fontSize: '50px'},}，methods: {handleChangeBack4: function () {this.str_style = this.str_style + ';font-size: 60px'},handleChangeBack5: function () {// this.list_style.push({'font-size': '60px'})this.list_style.push({'margin': 'auto'})},handleChangeBack6: function () {// 对象或者数组新增加的属性，vm监控不到就无法实现响应式，于是页面就没有发生变化，但是数据已经变了// this.obj_style ['font-size'] = '90px'// 但是对象中原来有的属性，修改是能监控得到的// this.obj_style ['background-color'] = 'yellowgreen'//这么写的话原来对象没有的值，就能监控到了--> 如果改了对象没有影响到页面--> vm没有监控到的话--> 就使用Vue.setVue.set(this.obj_style, 'font-size', '90px')}
}

（4）完整示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./vue/vue.js"></script><style>.div1 {width: 300px;height: 300px;}.div2 {background-color: pink;}.div3 {font-size: 60px;}.div4 {margin: auto;}</style>
</head>
<body>
<div id="app"><h1>class属性</h1><!--    <div :class="class_str">我</div>--><!--    <div :class="class_list">我</div>--><div :class="class_obj">我是div</div><button @click="handleChange">点击变化</button><h2>style属性</h2><div :style="style_obj">我是div</div><button @click="handleChange2">点击变化</button>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {//1 class 属性可以是字符串，数组，对象class_str: 'div1 div2',class_list: ['div1', 'div2'],  // 类用它多class_obj: {div1: true, div2: true, div3: true, div4: false},  ////2 style 属性可以是字符串，数组，对象style_str: 'background-color: green;height: 300px;width: 300px',style_list: [{'background-color': 'green'}, {height: '300px'}, {width: '300px'}],style_obj: {backgroundColor: 'green', height: '330px', width: '300px'} // 用的多}, methods: {handleChange() {// 1 字符串形式// this.class_str='div1 div2 div3 div4'// 2 数组形式，用的多，可以追加，可以删除--》样式就变化了// this.class_list.push('div3')  // 数组.push()-->返回值是 数组大小// this.class_list.pop()// 3 对象形式this.class_obj.div4 = true},handleChange2() {// 1 字符串形式// this.style_str = 'background-color: green;height: 300px;width: 300px;margin:auto'// 2 数组形式// this.style_list.push({'margin':'auto'})// 3 对象形式// 换背景色// this.style_obj['backgroundColor'] = 'pink'// 居中// this.style_obj['margin'] = 'auto' // 对象中原来没有，后来加进去，就不会触发响应式// 使用set解决Vue.set(this.style_obj,'margin','auto')}}})
</script>
</html>

（5）问题补充

如果当你改了对象，或数组，发现页面没有变化，而实际上值真正的被改了，这是为什么呢？
- 这是因为对象或者数组新增加的属性，vm监控不到就无法实现响应式，于是页面就没有发生变化，但是数据已经变了
解决方案：使用Vue.set
Vue.set(object, key, value)
- object: 要向其添加属性的目标对象。
- key: 要添加的属性的键。
- value: 要添加的属性的值

4、条件渲染

（1）v-if v-else-if v-else

v-if指令，控制元素是否加载。
v-esle-if/v-else指令不能单独使用，必须配合v-if一起使用。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./vue/vue.js"></script>
</head>
<body>
<div id="app"><h1>条件判断</h1><h2>分数是：{{score}}</h2><h3 v-if="score>=90&&score<=100">优秀</h3><h3 v-else-if="score>=80&&score<90">良好</h3><h3 v-else-if="score>=60&&score<80">及格</h3><h3 v-else>不及格</h3>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {score: 80}})
</script>
</html>

（2）v-show

v-show 指令，控制元素的显示隐藏，元素存在并占据空间。
元素隐藏时，相当于给该元素添加了 CSS 样式：display:none;

<div v-show="show">hello vue</div>
<button @click="show = !show">changeShow</button>

（3）v-if 和 v-show的区别

v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。

5、列表渲染

（1）v-for

v-for 列表渲染指令，基于数据循环，多次渲染整个元素—> 数组、对象、数字。。。

语法：

<div v-for="item in items" :key="item.id">{{ item.text }}
</div>

v-for="item in items"：这里 items 是一个数组或者对象，item 是数组中的每个元素，或者对象中的每个属性值，你可以用 item 来引用当前遍历的元素。
:key="item.id"：为了给 Vue 提供一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

示例：

如果我们有一个存储了用户信息的数组：

data: {users: [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }]
}

我们可以使用 v-for 来循环渲染每个用户的名字：

<div v-for="user in users" :key="user.id">{{ user.name }}
</div>

这样就会生成如下 HTML 结构：

<div>Alice</div>
<div>Bob</div>
<div>Charlie</div>

（2）v-for的key的解释

语法：key属性 = “唯一标识”

作用：给列表项添加的唯一标识，便于Vue进行列表项的正确排序复用。vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）。[想深入了解的可以点击参考此文](vue 虚拟 DOM_vdom树-CSDN博客)

如果你不给 v-for 渲染的每个项添加 key，Vue 会发出警告，但并不会导致程序崩溃。没有为 v-for 添加 key 会导致 Vue 难以跟踪每个项的变化，可能会影响列表的性能和导致一些意外行为，特别是在涉及列表项的更新、删除和重新排序时。

注意点：

key的值只能是字符串或者数字类型
key的值必须具有唯一性
推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

（3）v-for可以循环的变量

在 Vue.js 中，v-for 指令可以用于循环遍历多种数据类型，包括：

数组：你可以直接在 v-for 中使用数组，循环渲染数组中的每一项。

<ul><li v-for="item in names" :key="item.id">{{ item.name }}</li>
</ul>

data: {names: ['张三', '彭于晏', 'quan', 'xiao'],
},

对象：你也可以在 v-for 中使用对象，循环渲染对象的属性值。

<ul><li v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</li>
</ul>

data: {userinfo: {name: 'xiao', age: 18, hobby: 'play'},
},

数字：你可以使用整数来指定循环的次数。
```
<ul><li v-for="n in 10" :key="n">{{ n }}</li>
</ul>
```

字符串：你可以在 v-for 中使用字符串。

<ul><li v-for="value in s" :key="value">{{value}}</li>
</ul>

data: {s: 'xiao is very handsome'
},

6、数据双向绑定

（1）v-model

作用：针对 input 标签，在页面中输入值，js中有对应变量，双向数据绑定，可以快速获取或设置表单元素内容

语法：v-model="变量"

数据单向绑定：变量变了页面也会变；但是页面变，变量不会变
数据双向绑定：变量变化，页面会自动更新；视图变化，数据也会自动更新

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./vue/vue.js"></script>
</head>
<body>
<div id="app"><h1>数据单向绑定</h1><input type="text" :value="name"><h1>数据双向绑定</h1><input type="text" v-model="name2"></div>
</body>
<script>var vm = new Vue({el: '#app',data: {name: 'xiao',name2:'sss'}})
</script>
</html>

（2）v-model 应用于其他表单元素

在 Vue.js 中，v-model 指令通常用于在表单元素上创建双向数据绑定。这意味着当表单元素的值发生变化时，与之关联的 Vue 实例的数据也会相应地更新，反之亦然。虽然 v-model 最常用于 <input> 元素，但它也可以应用于其他表单元素，如 <select> 和 <textarea>。

例如，你可以在 <select> 元素上使用 v-model 来创建双向数据绑定，示例如下：

<select v-model="selectedOption"><option value="option1">Option 1</option><option value="option2">Option 2</option><option value="option3">Option 3</option>
</select>

在上面的示例中，selectedOption 是 Vue 实例中的一个数据属性，它将与 <select> 元素的选定选项进行双向绑定。当用户选择不同的选项时，selectedOption 的值将更新，反之亦然。

同样地，你也可以在 <textarea> 元素上使用 v-model 来实现双向数据绑定，例如：

<textarea v-model="message" placeholder="Enter your message"></textarea>

在这个示例中，message 是 Vue 实例中的一个数据属性，它将与 <textarea> 元素的内容进行双向绑定。当用户在文本区域中输入内容时，message 的值将相应地更新，反之亦然。

总之，v-model 可以应用于不同类型的表单元素，以实现双向数据绑定，使得数据的更新能够与用户界面的交互实时同步。

三、事件处理

1、input 标签的事件处理

事件	说明
input	当输入框进行输入的时候触发的事件
change	当元素的值发生改变时触发的事件
blur	当输入框失去焦点的时候触发的事件
focus	当输入框获取焦点的时候触发的事件

change 和 blur 最本质的区别：

如果输入框为空，失去焦点后，change不会触发，但是blur会触发

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./vue/vue.js"></script>
</head>
<body>
<div id="app"><h1>input事件</h1><input type="text" v-model="name1" @input="handleInput">-->{{name1}}<h1>change事件</h1><input type="text" v-model="name2" @change="handleChange">-->{{name2}}<h1>blur事件</h1><input type="text" v-model="name3" @blur="handleBlur">-->{{name3}}<h1>focus事件</h1><input type="text" v-model="name4" @focus="handleFocus">-->{{name4}}
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {name1:'',name2:'',name3:'',name4:'asdfasd',},methods:{handleInput(event){console.log(event.data)},handleChange(){console.log('handleChange')},handleBlur(){console.log('handleBlur')},handleFocus(){console.log('Focus')this.name4=''}}})
</script>
</html>

2、过滤案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./Vue/vue.js"></script></head>
<body>
<div id="app"><h2>过滤案例</h2><input type="text" v-model="search" @input="handleSearch"><ul><li v-for="item in newDataList">{{item}}</li></ul></div>
</body>
<script>var vm = new Vue({el: '#app',data: {search: '',dataList: ['a', 'ac', 'bdsfc', 'ffaw', 'casdad', 'atnefk', 'fwead', 'fewfe'],newDataList: ['a', 'ac', 'bdsfc', 'ffaw', 'casdad', 'atnefk', 'fwead', 'fewfe']},methods: {// 1、笨办法handleSearch(event) {console.log(this)  // 这个this是vue实例var _this = this// 过滤dataList中每一个是否包含用户输入的 this.searchthis.newDataList = this.dataList.filter(function (item) {console.log(_this)  // this是window的对象,要换成_thisreturn item.indexOf(_this.search) >= 0})},// // 2、箭头函数的写法  把function去掉，在形参括号和函数体大括号之间加个 =>//  handleSearch(event) {//     this.newDataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)// },}})
</script>
</html>

在我们构造逻辑时存在两个问题

函数里面的this指向的是window对象—> 在外部定义一个_this=this就可以了
改数据是在dataList上改的，回退搜索的关键字时就无法显示了—> 再写一个newDataList，在这上操作就可以了

3、补充数组的过滤和判断子字符串是否在字符串中

// 补充1 数组的过滤
var dataList = ['a', 'ac', 'bdsfc', 'ffaw', 'casdad', 'atnefk', 'fwead', 'fewfe']
// 1、过滤掉所有
var newDataList = dataList.filter(function (item){return true// 2、只保留长度大于2的
var newDataList = dataList.filter(function (item){if (item.length > 2){return true}else{return false}
})
console.log(newDataList)// 3、只保留包含at的
var search = 'at'
var newDataList = dataList.filter(function (item){return item.indexOf(search) >= 0
})
console.log(newDataList)// 补充2 判断子字符串是否在字符串中
var search = 'at'
var s = 'attr'
var res = s.indexOf(search)  // 字符串在字符串的哪个位置
console.log(res)

四、箭头函数

箭头函数（Arrow Functions）是 ES6（ECMAScript 2015）引入的一种新的函数定义方式，它提供了一种更简洁的语法来定义函数。与传统的函数定义方式相比，箭头函数具有以下特点和优势：

简洁的语法：箭头函数可以让你用更短的代码来定义函数，尤其适合于简单的函数表达式。
更简洁的语法：当函数只有一个参数时，你可以省略参数周围的括号。当函数体只有一条语句时，你可以省略花括号和 return 关键字。
绑定 this：箭头函数的 this 值在函数创建时就已经确定，并且在整个函数生命周期内保持不变，它不会被函数的调用方式所影响。这解决了传统函数中 this 值难以理解和控制的问题，特别适合于在回调函数中使用。
不绑定 arguments 对象：箭头函数不绑定 arguments 对象，而是继承父级函数的 arguments 对象。如果你需要访问函数的参数，可以使用 rest 参数或者通过 ...args 来获取所有参数。
不能作为构造函数：箭头函数不能用作构造函数，也就是不能通过 new 关键字来调用，因为它没有自己的 this 值。
没有 arguments 对象：箭头函数没有自己的 arguments 对象，如果需要访问函数的参数，可以使用 rest 参数或者通过 ...args 来获取所有参数。

下面是一些箭头函数的示例：

// 正常的匿名函数
var f = function (name) {console.log(name)
}
f('xiao')// 箭头函数写法 把function去掉，在形参括号和函数体大括号之间加个 =>
// 1、无参数无返回值
var f = () => {console.log('fff')
}
f()// 2、有一个参数无返回值
var f = (name) =>{console.log(name)
}
f('xiao')
// 如果只有一个参数可以简写成  但是如果有多个那么就必须加在括号里
var f = name =>{console.log(name)
}
f('xiao')// 3、有多个参数无返回值（箭头函数的返回值是对象时，需要用括号包裹）
var f2 = (name,age) => {console.log(name,age)
}
f2()// 4、有一个参数有一个返回值
var f = name =>{return name+'nb'
}
var res = f('xiao')
console.log(res)
// 如果没有其他代码可以简写成
var f = name => name + 'nnb'
var res = f('xiao')
console.log(res)

重点：箭头函数内部，没有自己this，箭头函数内部用this—> 就是上一个作用域的this

五、指令的修饰符

1、事件修饰符

事件修饰符	释义
.stop	只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡），写在子标签上
.self	只处理自己的事件，子控件冒泡的事件不处理，写在父标签上
.prevent	阻止a链接的跳转
.once	事件只会触发一次（适用于抽奖页面）

使用修饰符时，使用顺序很重要；相应的代码会以同样的顺序产生

用 v-on:click.prevent.self 会阻止所有的点击
而 v-on:click.self.prevent 只会阻止对元素自身的点击

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./Vue/vue.js"></script></head>
<body>
<div id="app"><h1>事件修饰符</h1><h2>.once:只能点击一次</h2><button @click.once="handleClick">点我有惊喜</button><h2>.prevent:阻止a的跳转</h2><a href="https://www.baidu.com" @click.prevent="handleA">点我看美女</a><h2>.stop:只处理自己的事件，父控件冒泡的事件不处理(阻止事件冒泡)</h2><h3>写在子标签上</h3><ul @click="handleUl"><li @click.stop="handleLi">li01</li><li>li02</li></ul><h2>.self:只处理自己的事件，子控件冒泡的事件不处理(阻止事件冒泡)</h2><h3>写在父标签上</h3><ul @click.self="handleUl"><li @click="handleLi">li01</li><li>li02</li></ul>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {},methods: {handleClick() {alert('我是弹窗')},handleA() {console.log('点过了')location.href = 'https://www.cnblogs.com'},handleUl() {console.log('我是ul')},handleLi() {console.log('我是li')},}})
</script>
</html>

2、按键修饰符

按键修饰符是 Vue.js 中用于监听键盘事件的一种方式。它们可以让你在处理键盘事件时更加灵活和方便。以下是一些常用的按键修饰符及其作用：

.enter：监听 Enter 键。
.tab：监听 Tab 键。
.delete 或 .backspace：监听删除键。
.esc：监听 Esc 键。
.space：监听空格键。
.up：监听上箭头键。
.down：监听下箭头键。
.left：监听左箭头键。
.right：监听右箭头键。
.ctrl：监听 Ctrl 键。
.alt：监听 Alt 键。
.shift：监听 Shift 键。

这些按键修饰符可以与事件监听指令（如 @keydown、@keyup、@keypress）一起使用，以便在特定的键被按下时触发相应的事件处理函数。例如：

<input @keydown.enter="submitForm">
<input @keyup.tab="focusNextInput">
<input @keypress.space="playPauseVideo">

六、表单控制

1、checkbox选中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>checkbox</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app"><h3>用户登录示例</h3><p>用户名：<input type="text" v-model="username"></p><p>密码：<input type="password" v-model="pwd"></p><p>是否记住密码：<input type="checkbox" v-model="rem"></p>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {username: '',pwd: '',rem: '',  // 只做选中或者不选中判断，使用布尔},})
</script>
</html>

2、radio单选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>单选</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app"><p>性别：<input type="radio" v-model="gender" value="男">男<input type="radio" v-model="gender" value="女">女<input type="radio" v-model="gender" value="保密">保密</p>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {gender: ''},})
</script>
</html>

3、checkbox多选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多选</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app"><p>爱好：<input type="checkbox" v-model="hobbys" value="足球">足球<input type="checkbox" v-model="hobbys" value="篮球">篮球<input type="checkbox" v-model="hobbys" value="乒乓球">乒乓球</p>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {hobbys: [],  // 放多个元素需要使用数组},})
</script>
</html>

4、购物车案例 - 结算

选中商品并自动计算总价数量 * 价格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./Vue/vue.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app"><div class="row"><div class="col-md-6 col-md-offset-3"><h1 class="text-center">购物车</h1><table class="table table-bordered table-striped"><thead><tr><th scope="col">商品id</th><th scope="col">商品名字</th><th scope="col">商品数量</th><th scope="col">商品价格</th><th scope="col">操作</th></tr></thead><tbody><tr v-for="good in goodsList"><td>{{good.id}}</td><td>{{good.name}}</td><td>{{good.count}}</td><td>{{good.price}}</td><td><input type="checkbox" v-model="checkGoodList" :value="good"></td></tr></tbody></table><hr><h3>选中的商品：{{checkGoodList}}</h3>
<!--            插值插入的方法的返回值--><h3>总价格：{{getPrice()}}</h3></div></div>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {goodsList: [{id: 1, name: '键盘', count: 2, price: 133},{id: 2, name: '鼠标', count: 10, price: 12},{id: 3, name: '背包', count: 34, price: 34},{id: 4, name: '冲锋衣', count: 3, price: 67},{id: 5, name: '显示器', count: 9, price: 89}],checkGoodList: []},methods: {getPrice() {// 计算选中的总价格var total = 0// 循环选中的，计算总价格this.checkGoodListfor (var item of this.checkGoodList) {console.log(item)total += item.price * item.count}return total}}})
</script>
</html>

5、购物车案例 - 全选/全不选

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./Vue/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app"><div class="row"><div class="col-md-6 col-md-offset-3"><h1 class="text-center">购物车</h1><table class="table table-bordered table-striped"><thead><tr><th scope="col">商品id</th><th scope="col">商品名字</th><th scope="col">商品数量</th><th scope="col">商品价格</th><th scope="col">全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th></tr></thead><tbody><tr v-for="good in goodsList"><td>{{good.id}}</td><td>{{good.name}}</td><td>{{good.count}}</td><td>{{good.price}}</td><td><input type="checkbox" v-model="checkGoodList" :value="good" @change="handleCheckOne"></td></tr></tbody></table><hr><h3>选中的商品：{{checkGoodList}}</h3><h3>是否全选：{{checkAll}}</h3><!--            插值插入的方法的返回值--><h3>总价格：{{getPrice()}}</h3></div></div></div>
</body>
<script>var vm = new Vue({el: '#app',data: {goodsList: [{id: 1, name: '键盘', count: 2, price: 133},{id: 2, name: '鼠标', count: 10, price: 12},{id: 3, name: '背包', count: 34, price: 34},{id: 4, name: '冲锋衣', count: 3, price: 67},{id: 5, name: '显示器', count: 9, price: 89}],checkGoodList: [],checkAll: false,},methods: {getPrice() {// 计算选中的总价格var total = 0// 循环选中的，计算总价格this.checkGoodListfor (var item of this.checkGoodList) {console.log(item)total += item.price * item.count}return total},handleCheckAll() {if (this.checkAll) {// 全选了this.checkGoodList = this.goodsList} else {// 全不选this.checkGoodList = []}},handleCheckOne() {// 如果checkGoodList等于商品总长度，说明权限了，让checkAll等于trueif (this.checkGoodList.length == this.goodsList.length) {this.checkAll = true} else {// 只要长度不等，都是falsethis.checkAll = false}},}})
</script>
</html>

6、购物车案例 - 数量加减

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./Vue/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app"><div class="row"><div class="col-md-6 col-md-offset-3"><h1 class="text-center">购物车</h1><table class="table table-bordered table-striped"><thead><tr><th scope="col">商品id</th><th scope="col">商品名字</th><th scope="col">商品数量</th><th scope="col">商品价格</th><th scope="col">全选/全不选 <input type="checkbox" v-model="checkAll" @change="handleCheckAll"></th></tr></thead><tbody><tr v-for="good in goodsList"><td>{{good.id}}</td><td>{{good.name}}</td><td><span class="btn" @click="handleAdd(good)">+</span><input type="text" v-model="good.count"><span class="btn" @click="handleMin(good)">-</span></td><td>{{good.price}}</td><td><input type="checkbox" v-model="checkGoodList" :value="good" @change="handleCheckOne"></td></tr></tbody></table><hr><h3>选中的商品：{{checkGoodList}}</h3><h3>是否全选：{{checkAll}}</h3><!--            插值插入的方法的返回值--><h3>总价格：{{getPrice()}}</h3></div></div>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {goodsList: [{id: 1, name: '键盘', count: 2, price: 133},{id: 2, name: '鼠标', count: 10, price: 12},{id: 3, name: '背包', count: 34, price: 34},{id: 4, name: '冲锋衣', count: 3, price: 67},{id: 5, name: '显示器', count: 9, price: 89}],checkGoodList: [],checkAll: false,},methods: {getPrice() {// 计算选中的总价格var total = 0// 循环选中的，计算总价格this.checkGoodListfor (var item of this.checkGoodList) {console.log(item)total += item.price * item.count}return total},handleCheckAll() {if (this.checkAll) {// 全选了this.checkGoodList = this.goodsList} else {// 全不选this.checkGoodList = []}},handleCheckOne() {// 如果checkGoodList等于商品总长度，说明权限了，让checkAll等于trueif (this.checkGoodList.length == this.goodsList.length) {this.checkAll = true} else {// 只要长度不等，都是falsethis.checkAll = false}},handleAdd(good) {   // 传的是对象  不是数字或者idgood.count++},handleMin(good) {if (good.count > 1) {good.count--} else {alert('不能再减了')}},}})
</script>
</html>

七、v-model进阶用法

属性	说明
lazy	等待input框的数据绑定失去焦点之后再变化
number	数字开头，只保留数字，后面的字母不保留；字母开头，都保留
trim	去除首尾的空格

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-model 之 lazy、number、trim</title><script src="./Vue/vue.js"></script>
</head>
<body>
<div id="box"><input type="text" v-model="myText1" placeholder="normal"> {{myText1}}<br><input type="text" v-model.lazy="myText2" placeholder="lazy"> {{myText2}}<br><input type="text" v-model.number="myText3" placeholder="number"> {{myText3}}<br><input type="text" v-model.trim="myText4" placeholder="trim"> {{myText4}}
</div>
</body>
<script>var vm = new Vue({el: '#box',data: {myText1: '',myText2: '',myText3: '',myText4: '',},})
</script>
</html>

八、前后端交互的三种方式

思维逻辑：前后端要打通----> 从前端发送ajax—> 核心：使用js发送http请求，接收返回

1、使用 jQuery 的 Ajax 方法

jQuery 提供了方便的 $.ajax() 方法，封装了原生的 XMLHttpRequest 对象，简化了开发者的操作流程。
它支持跨浏览器兼容性，并提供了丰富的功能选项，如设置请求类型、请求头、处理错误等。
然而，由于现代前端框架（如 Vue.js）一般不推荐使用 jQuery，因此在与这些框架结合使用时可能不太适合。

后端

# # flask框架构建后端入口
from flask import Flask, jsonifyapp = Flask(__name__)@app.route('/userinfo', methods=['GET'])
def userinfo():res = jsonify({'username': 'xiao', 'age': 13})res.headers = {'Access-Control-Allow-Origin':'*'}return resif __name__ == '__main__':app.run()

前端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./Vue/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app"><h1>与后端交互</h1><button @click="handleLoad">加载用户信息</button><p>用户名：{{username}}</p><p>年龄：{{age}}</p>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {username: '',age: '',},methods: {handleLoad() {// 后端发送请求，拿到数据，赋值给username和age 页面就有了// 1.发送请求方式1：使用jq的ajax$.ajax({url: 'http://127.0.0.1:5000/userinfo',method: 'get',success: data => {// 会导致CORS policy 跨域问题---> 解决方案：在后端响应头里加入：Access-Control-Allow-Origin即可// console.log(data)data = JSON.stringify(data)this.username = data.usernamethis.age = data.age}})}}})
</script>
</html>

2、使用原生js的fetch发送ajax请求

这是一种传统的方式，通过使用 JavaScript 的 XMLHttpRequest 对象来发送和接收数据。
开发者需要手动处理请求和响应的各个阶段，包括请求参数的拼装、请求头的设置、监听响应事件等。
尽管这种方法具有灵活性，但是编写和维护复杂度较高，需要考虑不同浏览器的兼容性问题。

<script>var vm = new Vue({el: '#app',data: {username: '',age: '',},methods: {handleLoad() {// 后端发送请求，拿到数据，赋值给username和age 页面就有了// 1.发送请求方式2：使用原生js的fetch发送ajax请求fetch('http://127.0.0.1:5000/userinfo').then(response => {return response.json();}).then(data => {this.username = data.usernamethis.age = data.age});}}})
</script>

3、使用第三方库（如 Axios 或 Fetch）

第三方库如 Axios 和 Fetch 提供更简洁、易用且功能强大的方式来发送 Ajax 请求。它们以 Promise 或 async/await 为基础，使得异步请求代码更加清晰和易于维护。
Axios 是一个流行的第三方库，广泛应用于前端项目中。同时，原生的 Fetch API 也是一种现代的标准方式，但需要注意兼容性问题
axios官网：http://www.axios-js.com/

<script>var vm = new Vue({el: '#app',data: {username: '',age: '',},methods: {handleLoad() {// 后端发送请求，拿到数据，赋值给username和age 页面就有了// 1.发送请求方式3：使用axios发送请求axios.get('http://127.0.0.1:5000/userinfo').then(res => {console.log(res.data) //真正的响应体数据是在res.data中this.username = res.data.usernamethis.age = res.data.age}).catch(error => {console.log(error)});}}})
</script>

九、补充

1、JS中的for循环操作

（1）基于索引的循环–> 最基本的

for (var i = 0; i < 10; i++){console.log(i)
}

（2）in 循环

var names = ['xiao','quan','zha']  // 数组
for (items in names)  // 循环索引console.log(items)
console.log(names[items])
}var userinfo = {'name':'xiao','age':13}  // 对象
for (items in userinfo){  // 循环的是keyconsole.log(userinfo[items])
}var s = 'xiao'  // 字符串
for(items in s){    // 循环的是索引console.log(s[items])
}

（3）of循环

var names = ['xiao','quan','zha']  // 数组
for (items of names)  // 循环 具体值console.log(items)
}var s = 'xiao'  // 字符串
for (items of s) {    // 循环具体值console.log(items)
}var userinfo = {'name':'xiao','age':13}  // of不能循环对象
for (items of userinfo){console.log(items)
}for (items of 10) {    // of不能循环数字console.log(items)
}

（4）数组的forEach方法，实现循环

 var names = ['xiao','quan','zha']names.forEach(function (value,index){console.log(index)console.log(value)})

（5）jquery的each循环

var names = ['xiao','quan','zha'] // 数组
$.each(names,function (value,index){console.log(value)console.log(index)
})var userinfo = {'name':'xiao','age':13}  // 对象
$.each(userinfo,function (key,value){console.log(key)console.log(value)
})var  s = 'xiao'   // 字符串不行
$.each(s,function (index,value){console.log(index)console.log(value)
})

2、vm对象介绍

<body>
<div id="app"><!--插值语法--><h1>{{name}}</h1><br><h2> 方法中的 this 对象 </h2><button @click="handleClick1">点我</button>
</div>
</body><script><!--  将创建的Vue对象封装到 vm 变量里面。控制台全局可以通过 vm.name 取值  -->// 写在 data 或 methods 中的属性或方法，可以从 vm 中直接 通过 vm.属性取值// methods的函数中，如果想使用data或methods中的属性，直接this.名字  就可以了var vm = new Vue({el: "#app",data: {name: "dream",},methods: {handleClick1() {console.log(this) // this 就是当前的 实例的 vm 对象// xr {_uid: 0, _isVue: true, __v_skip: true, _scope: t, $options: {…}, …}}},})
</script>

vm是一个Vue实例对象的变量名。
Vue实例对象是Vue.js框架中最核心的概念之一，它扮演着连接数据和视图的桥梁作用。
数据绑定：
通过将vm对象传递给模板语法，可以实现数据的动态渲染。
例如，在模板中使用{{name}}的插值语法，name会被vm对象中的data属性中的name所替换，从而实现了name数据的动态展示。

方法调用：
在vm对象的methods属性中定义的方法，可以通过模板中的事件绑定（如@click="handleClick1"）来进行调用。
在这个例子中，当点击按钮时，会触发handleClick1方法，输出this对象。
在方法中，this指向当前的Vue实例对象vm，通过this可以访问到vm实例中的属性和方法。

总结起来，vm对象是Vue实例对象的引用，通过这个对象可以访问和操作Vue实例的数据和方法。
它的作用是管理数据和行为，实现数据的双向绑定，以及处理用户交互和响应。
在模板中可以通过vm对象来访问数据，并触发相应的方法来实现业务逻辑的处理。

十、小练习

要求：点击按钮，加载最新电影
前端：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./vue/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app"><h1>点击按钮，获取数据，显示</h1><button @click="handleLoad">获取电影信息</button><div v-for="item in filmList"><p>电影名：{{item.name}}</p><p>介绍：{{item.synopsis}}</p><p>图片： <img :src="item.poster" alt="" height="300px" width="150px"></p><hr></div>
</div>
</body>
<script>var vm = new Vue({el: '#app',data: {filmList: [],},methods: {handleLoad() {axios.get('http://127.0.0.1:5000/films').then(res => {this.filmList=res.data.result}).catch(error => {console.log(error);});}}})
</script>
</html>

后端：

# pip install flask
from flask import Flask, jsonify
import jsonapp = Flask(__name__)@app.route('/films')
def films():with open('./fiml.json', 'r', encoding='utf-8') as f:res_dict = json.load(f)res = jsonify(res_dict)res.headers['Access-Control-Allow-Origin'] = '*'return resif __name__ == '__main__':app.run()

这篇关于Vue入门到关门之指令系统的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

Vue入门到关门之指令系统

一、引入

二、指令

1、文本指令

（1）v-text

（2）v-html

（3）示例

2、事件指令

（1）v-on

（2）es6的对象写法

（3）v-on调用传参

3、属性指令

（1）v-bind

（2）v-bind 对于样式控制的增强 - 操作class

（3）v-bind 对于样式控制的增强 - 操作style

（4）完整示例

（5）问题补充

4、条件渲染

（1）v-if v-else-if v-else

（2）v-show

（3）v-if 和 v-show的区别

5、列表渲染

（1）v-for

（2）v-for的key的解释

（3）v-for可以循环的变量

6、数据双向绑定

（1）v-model

（2）v-model 应用于其他表单元素

三、事件处理

1、input 标签的事件处理

2、过滤案例

3、补充 数组的过滤和判断子字符串是否在字符串中

四、箭头函数

五、指令的修饰符

1、事件修饰符

2、按键修饰符

六、表单控制

1、checkbox选中

2、radio单选

3、checkbox多选

4、购物车案例 - 结算

5、购物车案例 - 全选/全不选

6、购物车案例 - 数量加减

七、v-model进阶用法

八、前后端交互的三种方式

1、使用 jQuery 的 Ajax 方法

2、使用原生js的fetch发送ajax请求

3、使用第三方库（如 Axios 或 Fetch）

九、补充

1、JS中的for循环操作

（1）基于索引的循环–> 最基本的

（2）in 循环

（3）of循环

（4）数组的forEach方法，实现循环

（5）jquery的each循环

2、vm对象介绍

十、 小练习

相关文章

3、补充数组的过滤和判断子字符串是否在字符串中

十、小练习