属性，表单，条件，循环，斗篷指令及vue的项目环境
斗篷指令：
v-cloak 避免屏幕闪烁
原理：
1）属性选择器，会将v-cloak属性所在的标签隐藏
2）当vue环境加载后，会将v-clock属性解析移除，所以内容{{ num }}
就会显示出来
3)而现在vue已经准备完毕，所以用户会直接看到数值10，而不会看到页面从{{ num }}闪烁成10
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
<body>
<div id="app" v-cloak>
<button v-on:click="fn">{{ num }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num: 10
},
methods:{
fn () {
if(this.num !== 0){
this.num -= 2
}else {
}
}
}
})
</script>
属性指令：
1）语法：v-bind: 属性名=“变量” :后面不可以有空格
2）针对不同属性，使用方式有些区别
自定义属性以及title这些直接赋值的，使用方式为（t是变量， o是常量）：
<p class="a" style="color:blue" v-bind:title="t" v-bind:owen="o">段落</p>
1)标签属性没有被b-bind绑定时，基本使用
2）标签被v-bind绑定，就会被vue控制，‘值就会变成变量’
如果一个属性要被vue控制，填写变量，就要用v-bind
class属性：
绑定的变量，值可以为一个类名“p1”，也可以是多个类名“p2”
<p v-bind:class="pc">
</p>
new Vue({
data:{
pc:'p1 p2'
}
})
绑定的数组，数组的每一个成员都是一个变量
<p v-bind:class="[a, b]">
</p>
new Vue({
data:{
a:'p1',
b:'p2'
}
})
绑定的字典：key就是类名，value决定改类名是否起作用
<p v-bind:class="{p1:1， p2：0}"> 1为真，0为假
</p>
a是变量，值是类名| b是类名，不是变量| c是变量，值为布尔值
<p v-bind:class="[a, {b:c}]">
</p>
例题：
三个按钮，点击谁，样式显示
<div id="app">
<hr>
<button v-bind:class="{live: isLive == 1}" v-on:click="changeLive(1)">
1
</button>
<button v-bind:class="{live: isLive == 2}" v-on:click="changeLive(2)">
2
</button>
<button v-bind:class="{live: isLive == 3}" v-on:click="changeLive(3)">
3
</button>
<hr>
</div>
<script>
new Vue({
el:'#app',
data:{
isLive:1,
}
methods:{
changeLive(index) {
this.islive = index
}
}
})
</script>
style属性(了解)
绑定的变量：值是字典
<p v-bind:style="myStyle">
</p>
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映射给绑定的变量
<body>
<div id="app">
<form action="" method="post">
<!-- <input name='n1' type="text" v-model="v1">-->
<!-- <input name='n2' type="text" v-model="v1">-->
<input name='n2' type="text" :value="v1">
<input name='n2' type="text" :value="v1">
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
v1:' '
}
})
</script>
条件指令：
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个
上方分支成立，会屏蔽下方所有的分支，从上往下，以此类推
<div id="app">
<div>
<p v-show="isShow">show控制显隐</p>
<p v-if="isShow">if控制显隐</p>
</div>
<div>
<p v-if="0">你是第1个p</p>
<p v-else-if="0">你是第2个p</p>
<p v-else>你是第3个p</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: false,
}
})
</script>
条件指令案例：
vw：view width vh: view height
<style>
body {
margin: 0
}
button {
width: 60px;
line-height: 40px;
float: right;
}
.bGroup:after {
display: block;
content: '';
clear: both;
}
.box {
/* vw: view width vh: view height*/
width: 100vw;
height: 200px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
button.active {
background-color: cyan;
}
</style>
<div id="app">
<div class="bGroup">
<button :class="{active: isShow === 'red'}" @click="isShow = 'red'">红</button>
<button :class="{active: isShow === 'green'}" @click="isShow = 'green'">绿</button>
<button :class="{active: isShow === 'blue'}" @click="isShow = 'blue'">蓝</button>
</div>
<div>
<div v-if="isShow === 'red'" class="box red"></div>
<div v-else-if="isShow === 'green'" class="box green"></div>
<div v-else class="box blue"></div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: 'red'
}
})
</script>
循环指令：
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，父级改变子级也改变
<head>
<meta charset="UTF-8">
<title>循环指令</title>
</head>
<body>
<div id="app">
<!-- 遍历数字
5
【1】【2】【3】【4】【5】
-->
<p>{{ d1 }}</p>
<i v-for="e in d1">【{{ e }}】</i>
<hr>
<!-- 遍历字符串
abc
【a】【b】【c】
【0a】【1b】【2c】
-->
<p>{{ d2 }}</p>
<i v-for="e in d2">【{{ e }}】</i>
<i v-for="(e, i) in d2">【{{ i }}{{ e }}】</i>
<hr>
<!-- 遍历数组
[ 1, 3, 5 ]
【1】【3】【5】
【01】【13】【25】
-->
<p>{{ d3 }}</p>
<i v-for="e in d3">【{{ e }}】</i>
<i v-for="(e, i) in d3">【{{ i }}{{ e }}】</i>
<hr>
<!-- 遍历对象
{ "name": "Bob", "age": 17.5, "gender": "男" }
【Bob】【17.5】【男】
【name-Bob】【age-17.5】【gender-男】
【name-Bob-0】【age-17.5-1】【gender-男-2】
-->
<p>{{ d4 }}</p>
<i v-for="e in d4">【{{ e }}】</i>
<i v-for="(e, k) in d4">【{{ k }}-{{ e }}】</i>
<i v-for="(e, k, i) in d4">【{{ k }}-{{ e }}-{{ i }}】</i>
<hr>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
d1: 5,
d2: 'abc',
d3: [1, 3, 5],
d4: {
name: "Bob",
age: 17.5,
gender: "男"
}
}
})
</script>
商品循环案例
<style>
.box {
width: 280px;
border: 1px solid #eee;
border-radius: 5px;
overflow: hidden; /* 隐藏超出父级显示范围外的内容 */
text-align: center; /* 文本相关的属性大多默认值是inherit */
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
</style>
<div id="app">
<div class="box" v-for="obj in goods">
<img :src="obj.img" alt="">
<p>{{ obj.title }}</p>
</div>
</div>
<script>
let goods = [
{
"img": "https://***1.jpg",
"title": "纯种拆家专家1"
},
{
"img": "https://***2.jpg",
"title": "纯种拆家专家2"
},
];
new Vue({
el: '#app',
data: {
goods,
}
})
</script>
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 离开
案例：留言板
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
<div id="app">
<form>
<input type="text" v-model="info">
<button type="button" @click="sendInfo">留言</button>
</form>
<ul>
<li v-for="(info, index) in info_arr" @click="deleteInfo(index)">{{ info }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
info: '',
// 三目运算符： 条件 ? 结果1 : 结果2
info_arr: localStorage.info_arr ? JSON.parse(localStorage.info_arr) : [],
},
methods: {
sendInfo () {
// 完成留言：将info添加到info_arr
// 增 push unshift | 删 pop shift
if (this.info) {
// 留言
this.info_arr.push(this.info);
// 清空输入框
this.info = '';
// 前台数据持久化(缓存)
localStorage.info_arr = JSON.stringify(this.info_arr);
}
},
deleteInfo(index) {
// 删
this.info_arr.splice(index, 1);
// 同步给数据库
localStorage.info_arr = JSON.stringify(this.info_arr);
}
}
})
</script>
