Vue语法进阶

最新推荐文章于 2024-08-23 10:26:27 发布



最新推荐文章于 2024-08-23 10:26:27 发布

阅读量544

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44978043/article/details/121298766

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.事件操作

Vue中获取事件对象

普通的事件函数，在调用的时候人如果没有任何参数的情况下，事件处理函数的第一个形式参数默认接收事件对象的注入，即：事件函数的第一个参数就是事件对象

<div id='app'>
	<input @keyup='getKey' type='text'/>
</div>
...
<script>
	...
		methods: {
			getKey(e) {
				console.log(e.keyCode)
			}
		}
	...
</script>

Vue事件函数中接收参数

Vue给附带事件参数的事件函数，提供了显式的事件对象: $event

<div id='app'>
	<button @keyup='del($event,12)'>删除</button>
</div>
...
<script>
	...
		methods: {
			del(e,id) {
				console.log(e)
				console.log(id)
			}
		}
	...
</script>

Vue中操作事件对象

.stop 阻止事件冒泡

用法：@事件对象.stop=‘事件处理函数’

<div id='app'>
	<div @click='outer'>
		<div @click='middle'>
		    <!--阻止事件冒泡-->
			<div @click.stop='inner'>
		</div>
	</div>
</div>

.prevent 阻止事件默认行为

用法：@事件对象.prevent=‘事件处理函数’

<div id='app'>
	<div @click='outer'>
		<div @click='middle'>
		    <!--阻止事件默认行为-->
			<a @click.prevent='inner'>
		</div>
	</div>
</div>

.capture 将事件触发为捕获机制触发

用法：@事件对象.capture=‘事件处理函数’

<div id='app'>
	<!--改变事件触发机制-->
	<div @click.capture='outer'>
		<div @click='middle'>
			<div @click='inner'>
		</div>
	</div>
</div>

.self 绑定在节点上的事件，只能由自身触发（不能被捕获或者冒泡触发）

用法：@事件对象.self=‘事件处理函数’

<div id='app'>
	<div @click='outer'>
		<!--让事件只能由自身触发-->
		<div @click.self='middle'>
			<div @click='inner'>
		</div>
	</div>
</div>

注： .self修饰符，只让当前元素的事件由自身触发，不会影响内部元素的冒泡
.self可以和其他修饰符一起组合使用

<!--阻止事件冒泡的同时让事件只由自身触发-->
<div @click.self.stop='middle'></div>

.once 让绑定在节点上的事件只生效一次

用法：@事件对象.once=‘事件处理函数’

<button @click.once='onceGetMsg'>只生效一次的点击效果</button>

按键修饰符（将键盘按键功能绑定到对应的事件上）

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

.ctrl
.alt
.shift
.meta

自定义按键

Vue.config.keyCodes.a = 65

<!--同时按下enter 和 ctrl触发事件-->
<input type='text' @keyup.enter.ctrl='getDate'>
<!--同时按下ctrl 和 自定义keyCodes为65的按键(a) 触发事件-->
<input type='text' @keyup.ctrl.a='getDate'>

2.表单操作

数据双向绑定

数据双向绑定：描述了数据在实例中和视图进行了双向绑定，实例中的数据更新会影响视图中数据的展示，视图中的数据更新会同步到实例中

表单数据绑定

数据双向绑定（MVVM）主要体验在表单数据中，通过v-model指令进行数据绑定操作

<div id='app'>
	<input type='text' v-model.trim='msg'>
	<h2>{{msg}}</h2>
</div>
....
<script>
...
	data:{
		msg:''
	}
...
</script>

表单修饰符

.trim:用于剔除表单元素中输出数据的两侧无效空格
.number:用于将表单中输入的数据转换成数值
.lazy:用于让表单中的数据同步延迟到失去焦点

vm.$set() 和Vue.set()

通常情况下，数据的双向绑定，是底层监听了数据的操作函数，一旦操作函数发生调用就会重新渲染界面展示，但是操作数据时（数组、对象）包含查询语法的数据更新，并不会引数据的重新渲染
Vue中提供了实例函数$set（）和全局函数Vue.set()用于查询语法中数据的主动更新

vm.$set(目标对象，属性，值)
Vue.set(目标对象，属性，值)

<body>
    <div id="app">
        <button @click="arrAdd">数组中添加数据</button>
        <ul>
            <li v-for="n in names" :key="n">{{n}}</li>
        </ul>
    </div>
    
    <script src="./vue.js"></script>
    <script>
     ...
            data: {
                names: ["zhangsan", "lisi", "wangwu", "zhaolliu"],
            },
            methods: {
                arrAdd() {
                    // this.names.push("xuqi") // 调用数组函数添加数据
                    // this.names[4] = "wangba"  // 通过索引添加数据
                    // Vue提供了自己的实例函数$set，用于通过索引直接添加数据
                    this.$set(this.names, 4, "xuqi")
                    // Vue提供了通用函数set,用于通过索引直接添加数据
                    Vue.set(this.names, 5, "wangba")
                    console.log(this.names)
                },      
            }
    ...
    </script>

数据劫持（重点）

Vue2.x版本中，底层通过原生对象Object.defineProperty()完成数据的声明，将这样的声明方式称为数据劫持，被劫持的数据进行查询和编辑时是可以被监听的

// 声明一个变量：通过数据劫持的方式进行声明
// ① 数据存储容器
let temp= "zhangsan"
// ② 数据监听对象
Object.defineProperty(window, "myName", {
    get() {     // 监听读取数据
        console.log("get函数调用了")
        return temp
    },
    set(value) {
        console.log("set函数调用了")
       temp = value
    }
})

案例：通过数据劫持实现双向数据绑定

<div id="app"></div>
<input type="text">
<script>
	let app = document.getElementById('app')
	let inp = document.querySelector('input')
	let temp = '初始数据'
	Object.defineProperty(window,'content',{
		get() {
			return temp
		},
		set(val) {
			temp = val
			render(content)
		}
	})
	 function render(html) {
            app.innerHTML = html
        }
	  	render(content)
        inp.oninput = function(){
            content= this.value
            render(content)
        }
</script>

自定义Vue框架
 Vue语法基础
 Vue功能进阶
 Vue组件基础
 Vue脚手架
 Vue组件化开发（进阶）
VueRouter



关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue语法进阶

1.事件操作Vue中获取事件对象普通的事件函数，在调用的时候人如果没有任何参数的情况下，事件处理函数的第一个形式参数默认接收事件对象的注入，即：事件函数的第一个参数就是事件对象<div id='app'> <input @keyup='getKey' type='text'/></div>...<script> ... methods: { getKey(e) { console.log(e.keyCode) } }
复制链接

扫一扫