-
Vue的属性和方法以及双向绑定
一、Vue实例的属性和方法
1、、什么是Vue实例
Vue实例又称为Vue组件
1.1、Vue2.0创建Vue组件的方法：
new Vue({...})- 1
演示：
DOCTYPE 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> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14">script> head> <body> <div id="app"> {{ msg }} div> <script> new Vue({ el:'#app', data:{ msg:'西安' } }) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
1.2、Vue3.0创建Vue组件的方法
Vue.createApp({...})- 1
演示：
DOCTYPE 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> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <div>{{ count }}div> div> <script> const obj = { data(){ return{ count:1 } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
2、Vue组件的属性
2.1、存储属性(data)：是一个函数。在组件创建时会调用此函数来构建响应性的数据系统。是组件的存储属性。获取该属性值的方式：
Vue组件名.变量名
Vue组件名.$data.变量名
本质是访问的同一个数据块2.2、计算属性(computed)：通常可以将存储属性的值直接渲染到html的元素上。在有些场景下存储属性的值不适合直接渲染，需要处理之后再进行渲染。在Vue中使用计算属性对数据进行再处理.
注意：
a、存储属性主要用于数据的存取，我们可以通过赋值运算来修改它的属性值。通常,计算属性只用来取值,不会用来存值,因此计算属性默认提供的是取值方法(get方法);计算属性也可以通过赋值进行存数据,但是存数据的方法需要手动实现(set方法)
b、当使用计算属性时,默认调用get方法(该方法不能显式调用)当给计算属性赋值时,调用的是set方法(该方法不能显式调用)
DOCTYPE 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> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <div>{{ type }}div> <button @click="add">Addbutton> div> <script> const obj={ data(){ return{ count:0 } }, computed:{ type:{ get(){ return this.count>10?"大":"小" }, set(newVal){ if(newVal == "大"){ this.count=11 return newVal }else{ this.count=0 } } } }, methods:{ add(){ this.count++ } } } let instance = Vue.createApp(obj).mount("#app") console.log('count='+instance.count) console.log(instance.type) instance.type = '大' console.log('count='+instance.count) script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
2.3、侦听属性(属性侦听器)：以方便的监听某个属性的变化,以完成复杂的业务逻辑。在Vue中的属性侦听器是watch。演示：
DOCTYPE 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> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <input type="text" v-model="searchText"> div> <script> const obj = { data(){ return{ searchText:'' } }, //定义属性侦听器 watch:{ searchText(oldText,newText){ if(newText.length > 10){ alert('文本内容太长') } } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
2.4、定义方法的属性(methods)：在该属性下定义Vue组件的函数3、Vue组件的函数
3.1、限流函数
（1）、限流：
场景1：点击按钮向服务器发起数据请求,在请求的数据回来之前多次单击按钮是无效的且会消耗资源。
场景2：页面中某个按钮会导致页面的刷新，我们需要限制用户对该按钮进行频繁的操作
（2）、限流函数：在指定的时间间隔内不允许重复执行同一个函数
**示例：**页面中有一个按钮,单击按钮后在控制台输出当前的时间，要求这个按钮的两次事件触发间隔不能小于5秒
代码：（未封装前）
DOCTYPE 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> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <button @click="myclick">按钮button> div> <script> const obj = { data(){ return{ throttle:false } }, methods:{ myclick(){ if(!this.throttle){ console.log(Date()) }else{ return } this.throttle=true setTimeout(()=>{ this.throttle=false },2000) } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
结果：
将限流的逻辑封装成单独的工具方法 ----- 一次编写多次使用DOCTYPE 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> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <button @click="myclick">按钮button> div> <script> var throttle = false function throttleToll(callback,timeout){ if(!throttle){ callback() }else{ return } throttle =true setTimeout(()=>{ throttle=false },timeout) } const obj={ data(){ return{ throttle:false } }, methods:{ myclick(){ throttleToll(()=>{ console.log(Date()) },2000) } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
3.2、使用Lodash库进行函数限流：是一款高性能的JavaScript实用工具库。提供了大量的数组、对象、字符串等边界的操作方法,使开发者更简单的使用JavaScript。在Lodash库中提供了debounce函数进行方法的限流。<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js">script>- 1
依旧为上面的显示事件的例子：
DOCTYPE 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> <script src="https://unpkg.com/vue@next">script> <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js">script> head> <body> <div id="app"> <button @click="myclick">按钮button> div> <script> const obj={ methods:{ myclick:_.debounce(function(){ console.log(Date()) },2000) } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
二、表单数据的双向绑定：v-model
1、单行文本框绑定：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <input type="text" v-model="signleText"> <br><br> <p>文本框输入的内容是：{{ signleText }}p> div> <script> const obj = { data(){ return{ signleText:'' } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
2、多行文本区的绑定
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <textarea rows="10" cols="30" v-model="textarea">textarea> <br><br> <p>文本区输入的内容是：{{ textarea }}p> div> <script> const obj = { data(){ return{ textarea:'' } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
3、复选框的绑定：
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <input type="checkbox" v-model="checkbox" value="足球" name="hobby">足球 <input type="checkbox" v-model="checkbox" value="蓝球"name="hobby">蓝球 <input type="checkbox" v-model="checkbox" value="排球"name="hobby">排球 <br><br> <p>你的选择是：{{ checkbox }}p> div> <script> const obj = { data(){ return{ checkbox:[] } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
4、单选按钮的绑定
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <input type="radio" v-model="radio" value="男">男 <input type="radio" v-model="radio" value="女">女 <br><br> <p>你的选择的性别是：{{ radio }}p> div> <script> const obj = { data(){ return{ radio:'' } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
5、下拉列表框的绑定
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>Documenttitle> <script src="https://unpkg.com/vue@next">script> head> <body> <div id="app"> <select v-model="select" multiple> <option value="A">AAAAAoption> <option value="B">BBBBBoption> <option value="C">CCCCCoption> <option value="D">DDDDDoption> select> <br><br> <p>你的选择是：{{ select }}p> div> <script> const obj = { data(){ return{ signleText:'', textarea:'', checkbox:[], radio:'', select:[] } } } Vue.createApp(obj).mount('#app') script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
6、常用的两个修饰符
6.1、lazy：懒加载，当输入框失去焦点时再将输入框和变量进行绑定
6.2、trim：去掉绑定的文本数据前后的空格
-
相关阅读:
贪吃蛇项目实践！（下）
期刊论文如何降低重复率？
【MySQL】如何在Linux上安装MySQL
MySQL数据库管理基本操作
Kubernetes：（十一）KubeSphere的介绍和安装（华丽的篇章）
勇夺2022上半年新势力造车销冠的小鹏汽车有护城河吗？
[毕业设计源码】PHP计算机信息管理学院网站
工业物联网蓝牙安全及基于标识算法的分布式鉴权技术研究
WOODWARD 5466-425 确保一致、无差错的配置和实施
【C++ Exceptions】Catch exceptions by reference！
- 原文地址：https://blog.csdn.net/thwr1881/article/details/126140849
