vueday03

1.1事件处理

事件的基本使用:
1.使用v-on:xxx 或 @xxx绑定事件，其中xxx是事件名:
2.事件的回调需要配置在methods对象中，最终会在vm上;
3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click="demo”和 @click="demo($event)"效果一致，但后者可以传参;@click="demo($event,'参数')。

<div id="root">
        <h2>hello{{name}}</h2>
        <button v-on:click="showMassage">点我不传参</button>
        <button @click="showMassage2($event,66)">点我传参66</button>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: 'zhangzhang',
                }
            },
            methods: {
                // showMassage()和showMassage2()没有数据代理，因为函数只用调用不用改数
                showMassage(event) {
                    //console.log(event.target);   //e.target：点击了那个元素就返回那个元素
                    // console.log(this);        //this指vm
                    // alert('你好')
                },
                showMassage2(event, number) {
                    console.log(number);
                    console.log(event);
                }
            },
        })
    </script>

1.2 事件修饰符

1.prevent: 阻止默认事件 (常用);
2.stop: 阻止事件冒泡 (常用);
3.once: 事件只触发一次(常用);
4.capture:使用事件的捕获模式;
5.self: 只有event.target是当前操作的元素是才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕；

<div id="root">
<!-- @click.prevent相当于e.preventDefault阻止链接跳转新页面  -->
<!-- 阻止默认事件 -->
<a href="http://www.baidu.com" @click.prevent="showMassage">点我提示信息</a>
</div>
<script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示。
        new Vue({
            el: '#root',
            data() {
                return {
                    name: 'zhangzhang'
                }
            },
            methods: {
                showMassage() {
                    alert('欢迎你！')
                },
            },
        })
 </script>

1.3 键盘事件

Vue中常用的按键别名:
回车 => enter
删除 =>delete(捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 =>tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

 <div id="root">
        <h2>hello{{name}}</h2>
        <!-- 按下键盘中的enter键触发 -->
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
        <!-- 同时按下Ctrl不动，在按下y键触发 -->
        <input type="text" placeholder="按下Ctrl和y键提示输入" @keyup.ctrl.y="showInfo">
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示。
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    name: 'zhangzhang',
                }
            },
            methods: {
                showInfo(e) {
                    // console.log(e.target.value);
                    console.log(e.key, e.keyCode);
                }
            },
        })
    </script>

1.4 计算属性

计算属性：
1、定义：
要用的属性不存在，要通过已有的属性计算得来的。data中是属性和属性名
2、原理：
底层借助了 Object.defineProperty方法提供的getter和setter。
3、get函数什么时候用？
(1)初次读取时会执行一次
(2)当依赖的数据发生改变时会别再次调用
4、优势：
与methods相比，内部有缓存机制(复用)，效率更高，调试方便
5、备注：
(1)计算属性最终会出现在vm上，之间读取使用即可
(2)如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算是依赖的数据发生改变。

    <div id="root">
        姓：<input type="text" placeholder="请输入姓" v-model="firstName"><br><br>
        名：<input type="text" placeholder="请输入名" v-model="lastName"><br><br>
        全名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示。

        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    firstName: '张',
                    lastName: '三'
                }
            },
            computed: {
                fullName: {
                    // get的作用：当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    // get什么时候调用？1.初次读取fullName时，2.所依赖的数据发生变化时。
                    get() {
                        console.log('get被调用了');
                        // this指的是vm
                        return this.firstName + '-' + this.lastName
                    },
                    // set什么时候调用？当fullName被修改时
                    set(value) {
                        console.log('set', value);
                        const arr = value.split('-')
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
    </script>

计算属性的简写：当计算属性不需要被修改的时候，就可以简写。

    <div id="root">
        姓：<input type="text" placeholder="请输入姓" v-model="firstName"><br><br>
        名：<input type="text" placeholder="请输入名" v-model="lastName"><br><br>
        全名：<span>{{fullName}}</span>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示。

        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    firstName: '张',
                    lastName: '三',
                }
            },
            computed: {
                // 简写，当计算属性不需要被修改的时候，就可以简写
                fullName() {
                    //里面相当于getter的内容
                    console.log('get被调用了');
                    return this.firstName + '-' + this.lastName
                }
            }
        })
    </script>