斗篷指令:
v-cloak 避免屏幕闪烁
原理:
1)属性选择器,会将v-cloak属性所在的标签隐藏
2)当vue环境加载后,会将v-clock属性解析移除,所以内容{{ num }}
就会显示出来
3)而现在vue已经准备完毕,所以用户会直接看到数值10,而不会看到页面从{{ num }}闪烁成10
Title
属性指令:
1)语法:v-bind: 属性名=“变量” :后面不可以有空格
2)针对不同属性,使用方式有些区别
自定义属性以及title这些直接赋值的,使用方式为(t是变量, o是常量):
段落
1)标签属性没有被b-bind绑定时,基本使用
2)标签被v-bind绑定,就会被vue控制,‘值就会变成变量’
如果一个属性要被vue控制,填写变量,就要用v-bind
class属性:
绑定的变量,值可以为一个类名“p1”,也可以是多个类名“p2”
new Vue({
data:{
pc:'p1 p2'
}
})
绑定的数组,数组的每一个成员都是一个变量
new Vue({
data:{
a:'p1',
b:'p2'
}
})
绑定的字典:key就是类名,value决定改类名是否起作用
1为真,0为假
a是变量,值是类名| b是类名,不是变量| c是变量,值为布尔值
例题:
三个按钮,点击谁,样式显示
style属性(了解)
绑定的变量:值是字典
new Vue({
myStyle:{
width: '50px',
height: '50px',
backgroundColor: 'green',
}
})
表单指令:
1) 语法:v-model=“变量”
2)v-model绑定的变量控制的其实就是value属性值
3)v-model要比v-bind:value要多一个监听机制
4)数据的双向绑定:
v-model可以将绑定的变量值映射给表单元素的value
v-model还可以将表单元素的新的value映射给绑定的变量
条件指令:
1)语法:v-show="变量" v-if="变量"
2)两者的区别:
v-show在隐藏标签时,采用display:none渲染标签,标签通过css隐藏
v-if在隐藏标签时,不会渲染在页面上
3)v-if有家族:v-if | v-else-if | v-else
v-if 是必须的 必须设置条件
v-else-if可以为1-n个 必须设置条件
v-else可以为0或1个
上方分支成立,会屏蔽下方所有的分支,从上往下,以此类推
show控制显隐
if控制显隐
你是第1个p
你是第2个p
你是第3个p
条件指令案例:
vw:view width vh: view height
循环指令:
1)语法: v-for="ele in obj" obj是被遍历的对象,ele是遍历得到的每一次的结果
2) 遍历可迭代对象的首要结果,都是可迭代对象容器中的值,其次还可以遍历得到索引和键
字符串: v-for=“ v in str” | v-for=" (v,i) in str"
数组: v-for=“ v in arr” | v-for=" (v,i) in arr"
对象: v-for=“ v in obj” | v-for=" (v,k) in obj" | v-for="(v,k,i) in obj"
ps:v-for遍历要依赖于一个所属标签,该标签及内部所有的内容都会被循环复用
text-align: center 文本相关的属性大多数默认值是inherit,父级改变子级也改变
循环指令
{{ d1 }}
【{{ e }}】
{{ d2 }}
【{{ e }}】
【{{ i }}{{ e }}】
{{ d3 }}
【{{ e }}】
【{{ i }}{{ e }}】
{{ d4 }}
【{{ e }}】
【{{ k }}-{{ e }}】
【{{ k }}-{{ e }}-{{ i }}】
商品循环案例
{{ obj.title }}
Array操作:
"""
尾增:arr.push(ele)
首增:arr.unshift(ele)
尾删:arr.pop()
首删:arr.shift()
增删改插:arr.splice(begin_index, count, args)
"""
前台数据库:
"""
// 存
// 持久化化存储,永远保存
localStorage.name = "Bob";
// 持久化化存储,生命周期同所属标签(页面),页面关闭,重新打开就会丢失
sessionStorage.name = "Tom";
// 取
console.log(localStorage.name);
console.log(sessionStorage.name);
// 清空
localStorage.clear();
sessionStorage.clear();
// 短板:只能存储字符串,所有对象和数组需要转换为json类型字符串,再进行存储
let a = [1, 2, 3];
localStorage.arr = JSON.stringify(a);
let b = JSON.parse(localStorage.arr);
console.log(b);
"""
重点:事件指令与属性指令都可以简写
1.v-bind: 可以简写为:
2.v-on: 可以简写为@
https是在http协议之上增加了ssl加密规则
伪类与事件
@click 点击事件
@mouseover 悬浮事件
@mousedown 鼠标按下去事件
@dbclick 双击
@mouseup 抬起
@mouseout 离开
案例:留言板
- {{ info }}