1.v-cloak斗篷指令
由于html页面是从上到下执行并渲染，页面上会先显示{{ num }}，然后再被Vue替换，加上v-cloak的类将会被隐藏，然后Vue在渲染时再将v-cloack类移除。
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
<p>{{ num }}</p>
</div>
2.属性指令
1.用法: v-bind:属性名='变量'
简写 ==> :属性名='变量'
2.针对不同属性，使用方式会稍有不同
v-bind:title='t'
v-bind:class='变量'
v-bind:class='[变量1,变量2,....]' // 绑定多个变量
v-bind:class='{类名:开关变量}' // 开关变量决定类名是否生效
v-bind:style='{属性:值}' // 属性均要变化为驼峰命名
例如：border-color:'red' ===> {borderColor:'red'}
常用:
v-bind:class="[a,{b:c}]"
a为变量，b为类名，c为决定b是否起作用的布尔值变量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.c1{
color: red;
}
.c2{
background-color: green;
}
</style>
<body>
<div id="app">
<p :title="title_of_p" :class="class_of_p">hello world</p>
<p :title="title_of_p" :class="[class1_of_p,class2_of_p]">hello world</p>
<p :title="title_of_p" :class="[class1_of_p,{c2:is_showC2}]">hello world</p>
<p :title="title_of_p" :style="{color:color_of_p}">hello world</p>
<p :title="title_of_p" :style="{color:color_of_p,borderStyle:'solid'}">hello world</p>
<div style="border-color: #008000; border-style: solid;">1233</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
class_of_p:'c1 c2',
class1_of_p:'c1',
class2_of_p:'c2',
color_of_p:'blue',
title_of_p:"I'm Bob",
is_showC2:false,
}
})
</script>
</html>
三、属性指令和事件指令的缩写
<button v-bind:class='{live:isLive==1}' v-on:click="buttonChange(1)">1</button>
<button v-bind:class="{live:isLive==2}" v-on:click="buttonChange(2)">2</button>
<button v-bind:class="{live:isLive==3}" v-on:click="buttonChange(3)">3</button>
<script>
let app = new Vue({
el : '#app',
data:{
isLive : 1,
},
methods:{
buttonChange(index){
this.isLive = index
},
}
})
</script>
<button :class='{live:isLive==1}' @click="buttonChange(1)">1</button>
<button :class="{live:isLive==2}" @click="buttonChange(2)">2</button>
<button :class="{live:isLive==3}" @click="buttonChange(3)">3</button>
四、悬浮效果
button:hover可为按钮设置鼠标悬浮上面的样式
如果用Vue数据驱动，可以为button绑定，通过监听鼠标来控制isHover变量进而来决定isHover所控制的类是否显示。
<!--
click: 单击
dblclick：双击
mouseover：在上面
mouseout：离开
mousedown：按下
mouseup：抬起
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.normal{
color: #ADFF2F;
}
.c2 {
background-color: green;
}
#btn1:hover{
background-color: green;
}
</style>
</head>
<body>
<div id='app'>
<button type="button" :class="[c1,{c2:isHover}]" @mouseover="overbutton" @mouseout="outbutton">test</button>
<button id="btn1">test</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el : '#app',
data:{
isHover:false,
c1:'hover'
},
methods:{
overbutton(){
this.isHover = true
},
outbutton(){
this.isHover = false
}
}
})
</script>
</html>
五、表单指令
Vue提供了简便的v-model表单指令来实现数据的双向绑定。
当我们使用v-bind:value='msg'时，仅仅是将msg变量的值发生改变时去影响该标签的value值，而当value发生改变（例如：input框接收用户输入时）不会影响msg变量的值，这就是单向绑定。
当我们使用v-model='msg'时，当msg变量的值发生改变会立刻更新value的值，而当value的值改变也会立刻更新msg的值，这就是双向绑定。
利用双向绑定可以非常方便的帮我们实现一些功能。
<!-- 两个输入框内容会同时变化 -->
<input name="n1" type="text" v-model="v1">
<input name="n2" type="text" v-model="v1">
<script>
new Vue({
el: '#app',
data: {
v1: ''
}
})
</script>
六、条件指令
1.用法
v-show='变量'
v-if='变量'
2.区别
v-show='isShow'，当isShow为false时，拥有该指令的标签仍然会被渲染，但是其属性有，display:none，不可见
v_if='isSeen'，当isSeen为false时，拥有该指令的标签将不会出现在html文档中。属于惰性渲染。
3.v-if有一系列相关的指令,v-if|v-else-if|v-else
v-if 和 v-else-if必须设置条件。
其用法和性质跟python当中的条件控制语句很像。
<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>
用法案例
<style>
body {
margin: 0
}
button {
60px;
line-height: 40px;
float: right;
}
.bGroup:after {
display: block;
content: '';
clear: both;
}
.box {
/* vw: view width vh: view height*/
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 = 'chr in str' | v-for = '(chr,index) in str'
数组: v-for = 'v in arr' | v-for = '(v,index) in arr'
对象:v-for ='v in obj ' | v-for = '(v,k) in obj' | v-for='(v,k,index) in obj'
<!DOCTYPE html>
<html lang="zh">
<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 {
280px;
border: 1px solid #eee;
border-radius: 5px;
overflow: hidden; /* 隐藏超出父级显示范围外的内容 */
text-align: center; /* 文本相关的属性大多默认值是inherit */
float: left;
margin: 10px;
}
.box img {
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>
面试题: todolist
js的array操作
'''
arr.push(ele) 尾部追加
arr.unshift(ele) 首部插入
arr.pop(ele) 尾部弹出
arr.shift(ele) 首部移除
arr.splice(startindex,howmany,args)
startindex:开始索引
howmany:受影响的个数
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);
"""
用法案例：留言板
<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>
小结：
"""
1、v-cloak斗篷指令
2、属性指令
v-bind:title="变量"
:class="变量" | :class="[变量1, ..., 变量n]" | :class="{类名: 布尔变量}"
:style="字典变量"
3、事件：@click @dblclick @mouseover|out|down|up
鼠标单击、双击、悬浮、移开、按下、抬起
4、表单指令：
v-model绑定变量控制value属性，可以实现双向绑定
5、条件指令：
v-show | v-if
v-if | v-else-if | v-else
6、循环指令：
字符串：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"
7、Array操作
arr.push(ele) arr.unshift(ele)
arr.pop() arr.shift()
arr.splice(begin_index, count, args)
8、前台数据库
localStorage | sessionStorage
1）操作就类似于obj，直接 .key 语法访问 value
2）localStorage永久存储
3）sessionStorage生命周期同所属页面标签
"""