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标签")
}
})