2021-10-19--Vue学习记录第二天_localstorage.once()-CSDN博客

本文链接：https://blog.csdn.net/weixin_51222058/article/details/120863906

Vue学习记录第二天

一、本地存储

localStorage是长期存储，即使页面关闭了数据也还在，除非手动删除

sessionStorage是会话级别存储（临时存储），当页面关闭了数据就没了

添加数据：

localStorage.setItem(key,value) json字符串

获取数据：

localStorage.getItem(key) json字符串 
JSON.parse(localStorage.getItem(key))

删除数据：

loaclStorage.removeItem(key)

<script>
    // 添加数据
    window.localStorage.setItem("name","杨幂")
    window.localStorage.setItem("age",18)
    window.localStorage.setItem("sex","女")
    // 获取数据
    console.log(window.localStorage.getItem("name")) // 杨幂
    // 清除某个数据
    window.localStorage.removeItem("sex")
    // 清空所有数据
    window.localStorage.clear()
</script>

二、解决屏幕闪动

如果页面中有大量{{}}会导致加载页面时会闪动，解决方法如下：

// 方法一
使用v-html或v-text来代替{{}}

// 方法二
<style>
[v-cloak]{
	display: none;
}
</style>
<div id="app" v-cloak>	</div>

三、事件修饰符

事件冒泡：

在一个对象上触发某类事件，如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

stop（阻止冒泡事件，需要写在子的事件绑定上）：

<body>
    <div id="app">
        <div class="parent" @click="parent_fun">
            <div class="child" @click.stop="child_fun">
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{},
        methods: {
            parent_fun(){
                alert("我是父容器")
            },
            child_fun(){
                alert("我是子容器")
            }
        }
    });
</script>

self（阻止冒泡事件，需要写在父的事件绑定上）：

<body>
    <div id="app">
        <div class="parent" @click.self="parent_fun">
            <div class="child" @click="child_fun">
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{},
        methods: {
            parent_fun(){
                alert("我是父容器")
            },
            child_fun(){
                alert("我是子容器")
            }
        }
    });
</script>

prevent（取消默认事件，是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交）：

<body>
    <div id="app">
        <form>
            <input name="username">
            <button type="submit" @click.prevent="child_fun">提交</button>
        </form>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{},
        methods: {
            parent_fun(){
                alert("我是父容器")
            },
            child_fun(){
                alert("我是子容器")
            }
        }
    });
</script>

capture（在事件冒泡的过程当中，优先执行含有capture修饰符的事件，打乱了冒泡顺序）：

<body>
    <div id="app">
        <div class="parents" @click.capture="parents_fun">
            <div class="parent" @click.capture="parent_fun">
                <div class="child" @click.capture="child_fun">
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        data:{},
        methods: {
            parents_fun(){
                alert("我是爷辈容器")
            },
            parent_fun(){
                alert("我是父容器")
            },
            child_fun(){
                alert("我是子容器")
            }
        }
    });

once（阻止事件连续执行，只能执行一次）：

<body>
    <div id="app">
        <button @click.once="fun">点击</button>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{},
        methods: {
            fun(){
                console.log("来吧")
            }
        }
    });
</script>

passive(可以让滚动事件立即执行,尤其能够提升移动端的性能):

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

注意事项：

self只响应当前元素自身触发的事件，不会响应经过冒泡触发的事件，并不会阻止冒泡继续向外部触发

stop是从自身开始不向外部发射冒泡信号

如果.prevent和.passive同时使用，.prevent会被忽略

四、按键/表单修饰符

1、按键修饰符（在触发指定的按键后，触发事件）：

<body>
    <div id="app">
        <input @keydown.enter="fun">
        <input @keydown.13="fun">
        <input @keydown.hhh="fun">
    </div>
</body>
<script>
    Vue.config.keyCodes.hhh=13
    new Vue({
        el: '#app',
        data:{},
        methods: {
            fun(events){
                console.log(events)
            }
        }
    });
</script>

2、表单修饰符

.lazy		当失去光标后才修改模型中的数据
.number		只能输入数字，但是不太好使，比如第一个字符就是非数字
.trim		去掉首尾空格
<input type="text" v-model.lazy="obj.name">
<input type="number" v-model.number="obj.tel">
<input type="text" v-model.trim="obj.pass">

3、$set

在Vue中有一部分数据并不是双向绑定的，我就需要用到$set了，只要值的地址没有改变，Vue是检测不到数据变化的

// 方式一：使用js中操作数组方法
this.arr1.push("黄瓜")
this.arr1.pop()
this.arr1.unshift("苦瓜")
this.arr1.shift()
// 方式二：使用this.$set
// 添加
this.$set(this.arr1,3,"黄瓜")
// 修改
this.$set(this.arr1,1,"南瓜")
// 方式三：使用vm.$set
// 添加
vm.$set(vm.arr1,3,"黄瓜")
// 修改
vm.$set(vm.arr1,1,"南瓜")

五、事件处理

在vue开发当中，如果事件函数没有形参，那么在调用函数的时候，函数可以不加调用括号，这个时候调用函数，默认传递的第一个参数就是事件参数,但是如果有传参的必要（比如：分页，必须传递页码），vue提供了内置的变量$event来传递事件

<body>
    <div id="app">
        <button @click="fun($event,1,2)">按钮</button>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{},
        methods: {
            fun(event,a,b){
                //event
                console.log(a+b)
                event.target.style.color="red"
            }
        }
    });
</script>

六、template

如果设置了tempalte配置项，那么页面中就不会加载你原本的内容，而是将tempalte中的内容渲染到页面中

new Vue({
    el:"#app",
    data:{
        msg:"鲁迅"
    },
    template:"<h2>哈哈哈，我是template中的h2标签------{{msg}}</h2>"
})

七、render

在页面加载的时候，首先看你有没有render，如果有render那么就加载render中的内容，再看你有没有tempalte，如果有tempalte就加载tempalte中的内容。最后才是页面原本的内容

new Vue({
    el:"#app",
    data:{
        msg:"鲁迅"
    },
    template:"<h2>哈哈哈，我是template中的h2标签------{{msg}}</h2>",
    render(createElement){
        return createElement("h4","呵呵呵，我是render中的h4标签")
    }
})