Vue第五天（监听事件 nrm webpack）

Vue第五天

监听事件（keyup ，watch ，computed ）

nrm （简单介绍了下）

webpack （很重要！很关键！很实用！重点中的重点！知识点有点多，得慢慢品味！）

监听事件

需求：实现名称监听案例

1.keyup 事件监听

<div id="app">
    <input type="text" v-model="firstName" @keyup="getFullName">
    <input type="text" v-model="lastName" @keyup="getFullName">
    <input type="text" v-model="fullName">
</div>
<script>
    let vm = new Vue({
    
        el: '#app',
        data: {
    
            firstName:'',
            lastName:'',
            fullName:''
        },
        methods: {
    
            getFullName(){
    
                this.fullName=this.firstName+this.lastName
            }
        }
    })
</script>

2.使用 watch 监听 （ 更常用 – 用途更广 ）

<div id="app">
    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <input type="text" v-model="fullName">
</div>
<script>
    let vm = new Vue({
    
        el: '#app',
        data: {
    
            firstName: '',
            lastName: '',
            fullName: ''
        },
        //使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
        watch: