前端页面开发过程中,页面间传递参数必不可少,在这里记录一下页面之间传递参数的过程。主要包括事件中函数传递参数、事件默认参数$event、事件修饰符、按钮修饰符、数组更新检测、计算属性与观察者、表单输入绑定、修饰符、Class与Style绑定...
六、事件中函数传递参数(事件参数)
<ul>
<li v-for="(user ,index) in users" :key="index" @click="getUserData(index)">{{user}}</li>
</ul>
data() {
return {
users: ["zhangsan","lisi","wangwu'"]
}
},
methods: {
getUserData(data) {
console.log(this.users[data])
}
}
七、事件默认参数$event
<ul>
<li v-for="(user ,index) in users" :key="index" @click="getUserData(index,$event)">{{user}}</li>
</ul>
methods: {
getUserData(data,event) {
console.log(this.users[data]);
console.log(event);
}
}
$event:原生js对象
八、事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
event.preventDefault() :阻止默认事件,也就是.prevent
event.stopPropagation() :阻止事件冒泡,也就是.stop
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。
因此,用 v-on:click.prevent.self
会阻止所有的点击,
而 v-on:click.self.prevent
只会阻止对元素自身的点击。
可参考官网
九、按钮修饰符
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes 对象自定义按键修饰符别名:
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
可通过keyup事件来查看按钮对应的数字是多少,
如下: k字母对应的数字是75.
<input type="text" @keyup="getKeyNum">
getKeyNum (event){
console.log(event);
}
可参考官网
十、数组更新检测
data中的数据改变,会引起视图的改变。
变异方法
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
- push()
<button @click="adddata">插入数据</button>
export default {
data() {
return {
users: ["zhangsan","lisi","wangwu'"]
}
},
methods: {
getUserData(data,event) {
console.log(this.users[data]);
console.log(event);
},
getKeyNum (event){
console.log(event);
},
adddata() {
this.users.push("这是添加的数据");
}
}
}
替换数组
不会引起视图更新
注意:
filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组:
可参考官网
显示过滤与排序结果
nums: [1,2,34,5,6,8,54,31,34,4,2]
<button @click="getJishu">显示奇数</button>
getJishu() {
this.nums.filter(function(num){
if(num % 2 ==0){
console.log(num);
}
});
}
十一、计算属性与观察者
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
所以,对于任何复杂逻辑,你都应当使用计算属性。
computed()计算属性
与data()同级
{{msg}}
<br>
{{newmsg}}
msg: 'abcde'
computed: {
newmsg(){
return this.msg.split('').reverse().join('');
}
}
这样在很多需要翻转的地方直接调用newmsg就可以,不用在每个调用中在单独写翻转了。
计算属性与methods区别
不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 msg 还没有发生改变,多次访问 newmsg
计算属性会立即返回之前的计算结果,而不必再次执行函数。
methods则每次都会重新执行。
十二、表单输入绑定
v-model:双向数据绑定
{{msg}}
<br>
<input type="text" v-model="msg">
return {
msg: 'test'
}
watch() 监听数据
watch: {
msg(data){
console.log(data);
}
}
注意:watch监听数据必须和data中名字一样。
多行文本,单选框,复选框都可以使用v-model、watch
watch一般在input中使用。
十三、修饰符
.lazy
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
在默认情况下,v-model
在每次 input
事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy
修饰符,从而转变为使用 change
事件进行同步.
.number
<input v-model.number="age" type="number">
如果想自动将用户的输入值转为数值类型,可以给 v-model
添加 number
修饰符
.trim
<input v-model.trim="msg">
如果要自动过滤用户输入的首尾空白字符,可以给 v-model
添加 trim
修饰符
延迟操作,减轻服务器负担。
<template>
<div>
{{msg}}
<br>
<input type="text" v-model="msg">
{{msg1}}
</div>
</template>
export default {
name: 'formdata',
data() {
return {
msg: 'test',
msg1:''
}
},
watch: {
msg(data){
setTimeout(() =>{
this.msg1=data;
},1000)
}
}
}
<style>
</style>
十四、Class与Style绑定
对象语法
绑定单个
<template>
<div>
<p v-bind:class="{active:isActive,'demo':Demo}">{{msg}}</p>
</div>
</template>
export default {
data() {
return {
msg: 'test',
isActive: true,
Demo: true
}
}
}
<style>
.active{
color: aqua;
}
.demo{
font-size: 200px;
}
</style>
或者绑定一个对象
<p v-bind:class="styleObj">{{msg}}</p>
styleObj: {
active: true,
demo: true
},
msg: 'test'
<style>
.active{
color: aqua;
}
.demo{
font-size: 200px;
}
</style>
数组语法
msg: 'test',
demo1: 'demo11',
demo2: 'demo22'
<span v-bind:class="[demo1,demo2]">{{msg}}</span>
<ul>
<li v-bind:class="[{active:index%2 == 0}]" v-for="(user,index) in all">{{user.name}}----{{user.age}}-----{{user.sex}}
</li>
</ul>
all: [{name:"zhangsan",age:10,sex: '男'},
{name:"zhaoliu",age:23,sex: '女'},
{name:"wangwu",age:19,sex: '女'},
{name:"lisi",age:12,sex: '男'}]
.active{
color: aqua;
}
更多绑定可参考官网
绑定内联样式
对象语法
更多绑定可参考官网
视图改变是有数据改变的。是有后端数据驱动前段视图的变化。
Comments