前端页面开发过程中，页面间传递参数必不可少，在这里记录一下页面之间传递参数的过程。主要包括事件中函数传递参数、事件默认参数$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()

1. 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区别

1. 不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 msg 还没有发生改变，多次访问 newmsg

   计算属性会立即返回之前的计算结果，而不必再次执行函数。

2. 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;
}

更多绑定可参考官网

绑定内联样式

对象语法

更多绑定可参考官网

视图改变是有数据改变的。是有后端数据驱动前段视图的变化。