VUE第三天

今天是2022年6月20日,是我学习vue的第三天
过两天可能会学一下jQuery做个小项目 现在先把vue进度拉一拉吧

键盘事件

<div id="root">
    <h1>hello,{{name}}</h1>
    <input type="text" placeholder="按下回车键提示输入" @keydown.13="showInfo">
    <!-- <input type="text" placeholder="按下回车键提示输入" @keyup.enter="showInfo"> -->
</div>

<script>
    // Vue.config.productionTip = false;
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: '#root',
        data: {
            name: '我想giao啊'
        },
        methods: {
            showInfo(e) {
                console.log(e.target.value)
                // console.log(e.key, e.keyCode);
            },
        },
    })
</script>

1.Vue中常用的按键别名:
回车=> enter
删除=>delete(捕获"删除”和“退格”键)退出=>esc
空格=>space
换行=> tab(特殊，必须配合keydown去使用)
上=> up
下=> down
左=>left 
右=> right
2.Vue未提供别名的按健，可以使用按健原始的key值去绑定，但注意要转为kebab-case（短横线命名)
3.系统修饰键（用法特殊）: ctrl、alt、shift、meta
    (1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
   （2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐)
5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

姓名小案例

  <div id="root">
    姓：<input type="text" v-model:value="firstName"> <br><br>
    名：<input type="text" v-model:value="lastName"> <br><br>
    <!-- slice(0,3)会截取前三个字符 -->
    <!-- 姓名：<span>{{firstName.slice(0,3)+'-'+lastName}}</span> -->
    姓名：<span>{{fullName()}}</span>

</div>

<script>
    // Vue.config.productionTip = false;
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '我想giao啊',
            lastName: ''
        },
        methods: {
            fullName() {
                return this.firstName + '-' + this.lastName
            }
        },
    })
</script>

计算属性

 计算属性相较于methods而言有缓存
 
 <div id="root">
    姓：<input type="text" v-model:value="firstName"> <br><br>
    名：<input type="text" v-model:value="lastName"> <br><br>
    <!-- slice(0,3)会截取前三个字符 -->
    姓名：<span>{{fullName}}</span>

</div>

<script>
    // Vue.config.productionTip = false;
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: '#root',
        data: {
            firstName: '我想giao啊',
            lastName: ''
        },
        computed: {//计算属性
            fullName: {
                get() {
                    console.log('get被调用了')
                    return this.firstName + '-' + this.lastName //此处的this是vm
                },
                set(value) {        //改写fullName
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            },

        },
    })
</script>

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