属性,表单,条件,循环,斗篷指令及vue的项目环境

斗篷指令:

​ 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 }}

你可能感兴趣的:(属性,表单,条件,循环,斗篷指令及vue的项目环境)