第三篇：Vue指令
Vue指令
1、文本指令相关
- v-*是Vue指令，会被vue解析，v-text="num"中的num是变量（指令是有限的，不可以自定义）
- v-text是原样输出渲染内容，渲染控制的标签自身内容会被替换掉（
123
会被num替换）
- v-html可以解析渲染html语法的内容
<div id="app">
<!-- 插值表达式 -->
<p>{{ msg }}</p>
<!-- eg:原文本会被msg替换 -->
<p v-text='msg'>原文本</p>
<!-- 可以解析带html标签的文本信息 -->
<p v-html='msg'></p>
<!-- v-once控制的标签只能被赋值一次 -->
<p v-once>{{ msg }}</p>
</div>
<script type="text/javascript">
// 指令: 出现在html标签中可以被vue解析处理的全局属性
new Vue({
el: "#app",
data: {
msg: "message"
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本指令</title>
</head>
<body>
<div id="app">
<p>{{ num | add(100) }}</p>
<p v-text="num"></p>
<p v-text="num">123</p>
<p v-text="info"></p>
<p v-html="info"></p>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
info: '<i style="color: red">info内容</i>'
},
filters: {
add: function (a, b) {
return a + b;
}
},
})
</script>
</html>
js基本数据类型：字符串，数字，布尔，undefined
2、斗篷指令
由于html代码是从上往下加载的，导致刚开始并不会渲染到数据，例如：{{num}}，页面只会显示{{num}}
虽然加载很快，但肉眼可见的有一瞬间的闪烁，为了避免这个问题，我们可以采取：
- 将vue.js在顶部导入，但不推荐，因为官方推荐在最后面导入
- 使用斗篷指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/**
1）属性选择器，会将v-cloak属性所在的标签隐藏
2）当vue环境加载后，会将v-cloak属性解析移除，所以内容{{ num }}就会显示出来
3）而现在vue已经准备完毕，所以用户会直接看到数值10，而不会看到 页面从{{ num }}闪烁成数值10
*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<p v-on:click="fn">{{ num }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// v-cloak：避免屏幕闪烁
new Vue({
el: '#app',
data: {
num: 10
},
methods: {
fn () {
if (this.num <= 0) {
return false;
}
this.num -= 2
}
}
})
</script>
</html>
3、属性指令
1）语法：v-bind:属性名="变量"
2）针对不同属性，使用方式稍微有一丢丢区别
i）自定义属性以及title这些，直接赋值的，使用方式如下（t是变量，'o'是常量）
<p v-bind:title="t" v-bind:owen="'o'">段落</p>
ii）class属性(重点):
绑定的变量：值可以为一个类名 "p1"，也可以为多个类名 "p1 p2"
绑定的数组：数组的每一个成员都是一个变量
绑定的字典：key就是类名，value是决定该类名是否起作用（类似开关）
iii）style属性(了解)：
绑定的变量：值是一个字典
<!-- 给自定义全局属性绑定变量 -->
<p v-bind:abc="abc"></p>
<!-- 以原字符串形式绑定全局属性 -->
<p v-bind:title="'abc'"></p>
<!-- 单类名绑定 -->
<p v-bind:class="c1"></p>
<!-- 多类名绑定 -->
<p v-bind:class="[c2, c3]"></p>
<!-- 类名状态绑定 -->
<p v-bind:class="{c4: true|false|var}"></p>
<!-- 多类名状态绑定 -->
<p v-bind:class="[{c5: true}, {c6: flase}]"></p>
<!-- 样式绑定 -->
<div :style="div_style"></div>
<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
<script type="text/javascript">
new Vue({
el:"#app",
data: {
abc: "abc",
c1: "p1",
c2: "p2",
c3: "p3",
div_style: {
width: "200px",
height: "200px",
backgroundColor: "cyan"
}
}
})
</script>
<!-- v-bind: 指令可以简写为 : -->
<!--
a是变量，值就是类名
b就是类名，不是变量
c是变量，值为布尔，决定b类是否起作用
d是变量，值可以为一个类名 'p1' 也可以为多个类名 "p1 p2 ..."
calss="p1 b p2 p3"
-->
<p v-bind:class="[a, {b: c}]" v-bind:class="d"></p>
<script>
let app = new Vue({
el: '#app',
data: {
a: 'p1',
c: true,
d: 'p2 p3',
},
})
</script>
案例：
有三个按钮，初始化默认第一个为黄绿色，当选中其他的按钮，颜色也变为黄绿色
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>属性指令</title>
<style>
.p1 {
width: 100px;
height: 100px;
background-color: red;
}
.p2 {
border-radius: 50%;
}
.live {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="app">
<!--
1）标签的属性没有被v-bind绑定，就是同原来一样，基本使用
2）当被v-bind绑定，就会被vue控制，'值就会变为变量'
换而言之：如果一个属性要被vue控制，填写变量，就要用v-bind来处理
-->
<p class="p1 p2"></p>
<p v-bind:class="pc" style="color: red; background-color: orange;" v-bind:title="t" v-bind:owen="'o'">段落</p>
<p v-bind:class="pc1"></p>
<p v-bind:class="[pc, cp]"></p>
<p v-bind:class="{p1: 1, p2: 0}"></p>
<!-- a是变量，值就是类名 | b就是类名，不是变量 | c是变量，值为布尔，决定b类是否起作用 -->
<p v-bind:class="[a, {b: c}]"></p>
<hr>
<!--
1）v-bind: 可以简写为 :
2）v-on: 可以简写为 @
-->
<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 :class="{live: isLive == 3}" @click="changeLive(3)">3</button>
<hr>
<p style="width: 50px; height: 50px; background-color: pink"></p>
<p v-bind:style="myStyle"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
t: '悬浮提示',
pc: 'p1',
cp: 'p2',
pc1: 'p1 p2',
a: 'A',
c: true,
isLive: 1,
myStyle: {
width: '50px',
height: '50px',
backgroundColor: 'pink',
borderRadius: '50%'
}
},
methods: {
changeLive (index) {
// this就代表当前vue对象，和app变量等价
// app.isLive = index;
this.isLive = index;
}
}
})
</script>
</html>
属性指令简写
<!--
1）v-bind: 可以简写为 :
2）v-on: 可以简写为 @
-->
<button v-bind:class="{live: isLive == 1}" v-on:click="changeLive(1)">1</button>
<button :class="{live: isLive == 2}" @click="changeLive(2)">2</button>
<button :class="{live: isLive == 3}" @click="changeLive(3)">3</button>
4、事件指令
事件指令：
1）在实例成员methods中声明事件方法
2）标签通过事件指令绑定声明的方法：v-on:事件名='事件方法名'
eg：`<button v-on:click="btnClick">按钮</button>`，不加（）会自动传入ev（$event）
3）标签通过事件指令绑定声明的方法，且自定义传参：v-on:事件名="事件方法名()"
eg: `<button v-on:click="btnClick()">按钮</button>` 不传任何参数
eg: `<button v-on:click="btnClick($event)">按钮</button>` 传入事件对象，同不写()
eg: `<button v-on:click="btnClick(10)">按钮</button>` 只传入自定义参数，当然也可以传入事件对象
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<button v-on:click="btnClick">{{ btn1 }}</button>
<button v-on:click="btnClick">{{ btn2 }}</button>
<hr>
<!-- 直接绑定事件名：系统会在触发事件时(点击时)调用事件方法(fn1)，传给事件方法一个参数(事件对象) -->
<button v-on:click="fn1">按钮3</button>
<!-- 绑定的事件名后跟着()，不是主动调用事件方法，而是表示在触发事件调用时，传入的参数全由用户自己决定 -->
<button v-on:click="fn2($event, 10, 20)">按钮4</button>
<hr>
<button v-on:click="fn(btn1)">{{ btn1 }}</button>
<button v-on:click="fn(btn2)">{{ btn2 }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 对比DOM驱动：1）js选择器获取目标标签 2）为目标标签绑定事件 3）在事件中完成相应逻辑
// var btn = document.getElementsByTagName('button')[0];
// btn.onclick = function () {
// console.log(111111111111);
// };
/**
* 一、数据驱动
* 1）操作是一个功能，使用需要一个方法来控制 2）方法名是变量，所以控制变量就可以控制该方法
*
*
* 二、事件指令
* 1）在实例成员methods中声明事件方法
* 2）标签通过事件指令绑定声明的方法： v-on:事件名="事件方法名"
* eg: <button v-on:click="btnClick">按钮</button>
* 3）标签通过事件指令绑定声明的方法，且自定义传参： v-on:事件名="事件方法名()"
* eg: <button v-on:click="btnClick()">按钮</button> 不传任何参数
* eg: <button v-on:click="btnClick($event)">按钮</button> 传入事件对象，同不写()
* eg: <button v-on:click="btnClick(10)">按钮</button> 只传入自定义参数，当然也可以传入事件对象
*/
new Vue({
el: '#app',
data: {
btn1: '按钮1',
btn2: '按钮2',
},
methods: {
btnClick () {
console.log(666)
},
fn1 (ev) {
console.log(ev.clientX, ev.clientY); // ev.clientX ev指代事件对象，点clientX求的是鼠标点击页面位置的x轴像素
},
fn2(ev, n1, n2) {
console.log(ev, n1, n2);
console.log(ev.clientX, ev.clientY);
},
fn (msg) {
console.log(msg);
}
}
})
</script>
</html>
事件指令可以简写为@符号：
<!-- v-on: 指令 简写 @ -->
<!-- 不传参事件绑定，但事件回调方法可以获取事件对象 -->
<p @click="fn"></p>
<!-- ()可以传入具体实参 -->
<p @click="fn()"></p>
<!-- ()情况下，事件对象应该显式传入 -->
<p @click="fn($event)"></p>
事件补充和伪类选择器复习
@click: 单击
@dblclick：双击
@mouseover：悬浮
@mouseout：离开
@mousedown：按下
@mouseup：抬起
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>伪类与事件</title>
<style>
body {
/* 不允许文本选中 */
user-select: none;
}
.d1:hover {
color: orange;
/* 鼠标样式 */
cursor: pointer;
}
/* 只有按下采用样式，抬起就没了 */
.d1:active {
color: red;
}
/* div标签压根不支持 :visited 伪类 */
.d1:visited {
color: pink;
}
.d2.c1 {
color: orange;
}
.d2.c2 {
color: red;
}
.d2.c3 {
color: pink;
}
</style>
</head>
<body>
<div id="app">
<div class="d1">伪类操作</div>
<br><br><br>
<!--
click: 单击
dblclick：双击
mouseover：悬浮
mouseout：离开
mousedown：按下
mouseup：抬起
-->
<div :class="['d2', c]" @click="hFn('c1')" @mouseover="hFn('c2')" @mousedown="hFn('c3')">事件处理</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
c: '',
},
methods: {
hFn (c) {
this.c = c
}
}
})
</script>
</html>
5、表单指令
1）语法：v-model="变量"
2）v-model绑定的变量控制的其实就是value属性值
3）v-model要比v-bind:value要对一个监听机制
4）数据的双向绑定：
v-model可以将绑定的变量值映射给表单元素的value
v-model还可以将表单元素的新value映射给报道的变量
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>表单指令</title>
</head>
<body>
<div id="app">
<form action="" method="">
<!-- <input name="n1" type="text" :value="v1">-->
<!-- <input name="n2" type="text" :value="v1">-->
<!--
1）语法：v-model="变量"
2）v-model绑定的变量控制的其实就是value属性值
3）v-model要比v-bind:value要对一个监听机制
4）数据的双向绑定：
v-model可以将绑定的变量值映射给表单元素的value
v-model还可以将表单元素的新value映射给报道的变量
-->
<input name="n1" type="text" v-model="v1">
<input name="n2" type="text" v-model="v1">
<p @click="v1 = '点击了'">{{ v1 }}</p>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '123'
}
})
</script>
</html>
<div id="app">
<!-- v-model针对于表单元素 -->
<form action="" method="get">
<!-- 1、双向绑定：服务于文本输入框 -->
<!-- v-model存储的值为输入框的value值 -->
<div>
<input type="text" name="usr" v-model="in_val">
<input type="password" name="ps" v-model="in_val" >
<textarea name="info" v-model="in_val"></textarea>
</div>
<!-- 2、单选框 -->
<div>
<!-- 单选框是以name进行分组，同组中只能发生单选 -->
<!-- v-model存储的值为单选框的value值 -->
男：<input type="radio" name="sex" value="男" v-model="ra_val">
女：<input type="radio" name="sex" value="女" v-model="ra_val">
{{ ra_val }}
</div>
<!-- 3、单一复选框 -->
<!-- v-model存储的值为true|false -->
<!-- 或者为自定义替换的值 -->
<div>
<input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
{{ sin_val }}
</div>
<!-- 4、多复选框 -->
<!-- v-model存储的值为存储值多复选框value的数组 -->
<div>
<input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
<input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
<input type="checkbox" value="不挑" name="cless" v-model='more_val' />
{{ more_val }}
</div>
</form>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
in_val: '',
// 默认值可以决定单选框默认选项
ra_val: '男',
// 默认值为true，单一复选框为选中，反之false为不选中
sin_val: '',
// 数组中存在的值对应的复选框默认为选中状态
more_val: ['喜好女的','不挑']
}
})
</script>
6、条件指令
语法： v-show="变量" 和 v-if="变量"
两者的区别：
- v-show在隐藏标签时，采用display:none渲染标签，标签通过css隐藏
- v-if在隐藏标签时，不会渲染在页面上
v-if的家族：
3）v-if有家族：v-if | v-else-if | v-else
v-if是必须的，必须设置条件
v-else-if可以为0~n个，必须设置条件
v-else可以为0~1个
上方分支成立会屏蔽下方所有分支，从上至下依次类推
<div id="app">
<button @click="toggle">显隐切换</button>
<!-- v-if -->
<div class="box r" v-if="isShow"></div>
<!-- v-show -->
<div class="box o" v-show="isShow"></div>
<!-- 1.条件渲染的值为true|false -->
<!-- 2.true代表标签显示方式渲染 -->
<!-- 3.false v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示 -->
<!-- v-if v-else-if v-else 案例 -->
<ul>
<li @mouseover="changeWrap(0)">red</li>
<li @mouseover="changeWrap(1)">green</li>
<li @mouseover="changeWrap(2)">blue</li>
</ul>
<!-- red页面逻辑结构 -->
<div class="wrap red" v-if="tag == 0" key="0">...</div>
<!-- green页面逻辑结构 -->
<div class="wrap green" v-else-if="tag == 1" key="1">...</div>
<!-- blue页面逻辑结构 -->
<div class="wrap blue" v-else key="2">...</div>
<!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
<!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
<!-- v-show 案例 -->
<ul>
<li @mouseover="changeMain(0)">red</li>
<li @mouseover="changeMain(1)">green</li>
<li @mouseover="changeMain(2)">blue</li>
</ul>
<!-- red页面逻辑结构 -->
<div class="main red" v-show="whoShow(0)">...</div>
<!-- green页面逻辑结构 -->
<div class="main green" v-show="whoShow(1)">...</div>
<!-- blue页面逻辑结构 -->
<div class="main blue" v-show="whoShow(2)">...</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
isShow: false,
tag: 0,
flag: 0
},
methods: {
toggle () {
this.isShow = !this.isShow;
},
changeWrap (num) {
this.tag = num;
},
changeMain (num) {
// this.flag num
this.flag = num;
},
whoShow (num) {
// this.flag num
return this.flag == num;
}
}
})
</script>
案例：
点击按钮，展现不同颜色的div标签
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>案例</title>
<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>
</head>
<body>
<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>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isShow: 'red'
}
})
</script>
</html>
7、循环指令
语法：v-for="ele in obj" obj是被遍历的对象，ele是遍历得到的每一次结果
除了遍历出可迭代对象，还可以遍历出索引以及key等数据
/**
* 遍历可迭代对象的首要结果，都是可迭代对象容器中的值，其次还可以遍历得到索引及键等数据
* 字符串：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"
* 注：v-for遍历要依赖于一个所属标签，该标签及内部所有内容会被遍历复用
*/
<!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>
<div id="app">
<h1>{{ msg }}</h1>
<!-- v-for="item in items" -->
<!-- 遍历的对象: 数组[] 对象(字典){} -->
<ul>
<li>{{ list[0] }}</li>
<li>{{ list[1] }}</li>
<li>{{ list[2] }}</li>
<li>{{ list[3] }}</li>
<li>{{ list[4] }}</li>
</ul>
<!-- n为遍历的元素值 -->
<ul>
<li v-for="n in list">{{ n }}</li>
</ul>
<!-- 一般列表渲染需要建立缓存 -->
<!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 -->
<!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引 -->
<ul>
<li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
</ul>
<ul>
<li>{{ dic['name'] }}</li>
<li>{{ dic.age }}</li>
<li>{{ dic.gender }}</li>
</ul>
<!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 -->
<ul>
<li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
</ul>
<!-- 遍历的嵌套 -->
<div v-for="(person, index) in persons" :key="index" style="height: 21px;">
<div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }} </div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "列表渲染",
list: [1, 2, 3, 4, 5],
dic: {
name: 'zero',
age: 88888,
gender: 'god'
},
persons: [
{name: "zero", age: 8},
{name: "egon", age: 78},
{name: "liuXX", age: 77},
{name: "yXX", age: 38}
]
}
})
</script>
商品循环案例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循环案例</title>
<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>
</head>
<body>
<div id="app">
<!--
<div class="box">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg" alt="">
<p>纯种拆家专家</p>
</div>
-->
<div class="box" v-for="obj in goods">
<img :src="obj.img" alt="">
<p>{{ obj.title }}</p>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
/* 伪代码，模拟请求后台数据
let data = null;
import jq
$.ajax({
url: '',
type: 'get',
data: {
},
success (response) {
data = response.data
},
});
*/
// 前台先制作假数据进行测试
let goods = [
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "纯种拆家专家"
},
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "纯种拆家专家"
},
{
"img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
"title": "纯种拆家专家"
}
];
new Vue({
el: '#app',
data: {
goods,
}
})
</script>
</html>
8、todolist案例
<div id="app">
<div>
<input type="text" v-model="val">
<button type="button" @click="submitMsg">提交</button>
</div>
<ul>
<li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li>
</ul>
{{ list }}
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
val: "",
list: []
},
methods: {
submitMsg () {
if (this.val) {
this.list.push(this.val);
this.val = ""
}
},
removeMsg(index) {
this.list.splice(index, 1)
}
}
})
</script>
留言板案例：
根据todolist案例，改变为一个留言板案例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<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>
</body>
<script src="js/vue.js"></script>
<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>
<script>
let arr = [1, 2, 3];
console.log(arr);
// 参数：开始索引，操作长度，操作的结果们，splice函数可以完成增删改插所有功能
arr.splice(1, 2);
console.log(arr);
</script>
<script>
let a = [1, 2, 3];
localStorage.arr = JSON.stringify(a);
let b = JSON.parse(localStorage.arr);
console.log(b);
</script>
</html>
前台数据库
两种前台数据库类型的区别
- localStorage 永久存储
- sessionStorage 生命周期同所属页面标签
localStorage | sessionStorage
1）操作就类似于obj，直接 .key 语法访问 value
2）localStorage永久存储
3）sessionStorage生命周期同所属页面标签
// 前台数据库
// 存
// 持久化化存储，永远保存
// localStorage.name = "Bob";
// 持久化化存储，生命周期同所属标签(页面)，页面关闭，重新打开就会丢失
// sessionStorage.name = "Tom";
// 取
// console.log(localStorage.name);
// console.log(sessionStorage.name);
// 清空
// localStorage.clear();
// sessionStorage.clear();
// 删除单个key：value
// localStorage.removeItem(key)
// 短板：只能存储字符串，所有对象和数组需要转换为json类型字符串，再进行存储
第三篇：Vue指令的更多相关文章
- Vue.js 源码分析(二十三) 指令篇 v-show指令详解
v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...
- Vue.js 源码分析(二十一) 指令篇 v-pre指令详解
该指令会跳过所在元素和它的子元素的编译过程,也就是把这个节点及其子节点当作一个静态节点来处理,例如: <!DOCTYPE html> <html lang="en" ...
- 一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx
一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Spring Cloud实战： 基于Spring Cloud Gateway + vue-element-admin 实现的RBAC权限管理系统，实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制
一. 前言 信我的哈,明天过年. 这应该是农历年前的关于开源项目 的最后一篇文章了. 有来商城 是基于 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT ...
- 第三篇 功能实现(2) (Android学习笔记)
第三篇 功能实现(2) ●Activity的四种启动模式 Activity的启动模式有四种,分别是standard.singleTop.singleTask和singleInstance. 在Andr ...
- SQLSERVER是怎麽通过索引和统计信息来找到目标数据的(第三篇)
SQLSERVER是怎麽通过索引和统计信息来找到目标数据的(第三篇) 最近真的没有什么精力写文章,天天加班,为了完成这个系列,硬着头皮上了 再看这篇文章之前请大家先看我之前写的第一篇和第二篇 第一篇: ...
- 《VueRouter爬坑第三篇》-嵌套路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
随机推荐
- 2016 黑客必备的Android应用都有哪些？
免责声明:本站所发布的此份清单仅供学习之用.我们不支持读者利用其中的任何工具进行任何不道德的恶意攻击行为. 根据业界的一系列评测以及亲身经验,我们整理出了这份最佳Android黑客应用清单.除了对应用 ...
- 2_03_MSSQL课程_查询_分组和连接
“查” 的三种查询语句 where Group by having where 对表起作用 (原始硬盘上的表) 单纯的表 having 对结果起作用(筛选) 缓存,不在文件中 select --第 ...
- Linux中用systemctl命令管理服务
systemctl start foo.service 启动服务systemctl restart foo.service 重启服务systemctl stop foo.service 停止服务sys ...
- Pytorch【直播】2019 年县域农业大脑AI挑战赛---初级准备(一)切图
比赛地址:https://tianchi.aliyun.com/competition/entrance/231717/introduction 这次比赛给的图非常大5万x5万,在训练之前必须要进行数 ...
- Windows系统（服务器）忘记管理员登录密码：
windows sever2003忘记密码:使用老毛桃PE进入然后修改密码,重启即可. windows sever2008忘记密码:可按该网址的方法即可解决:http://www.jb51.net/a ...
- Linux安装nginx的环境要求
# Linux下切记不能乱删东西!我把pcre强制删除后,什么命令都不能使用了,系统奔溃,血的教训! nginx是C语言开发,建议在linux上运行,本教程使用Centos6.4作为安装环境. 一. ...
- AOP五种执行时机
动态代理四种增强方式 先创建一个service类 package com.zzj.calculatar.service; import org.springframework.stereotype.S ...
- Sweet Round 1题解
感谢各位参赛者,所有的题解如下: T1 syx的奖励 这题明显是签到题了吧,随便猜猜结论就A掉了 先说怎么做吧,把所有的可走的数gcd起来,然后再与n求gcd 如果为1,则输出n,若不为1,则输出-1 ...
- 【转载】Jmeter关联-正则表达式提取器
今天研发同事提供了一个验证token的接口,要验证token的正确性,现在将整个过程做如下记录: 场景:验证token的正确性 原理:首先用户登录成功后,会在Response head ...
- Adapter之spinner
前言: 在写代码当中有时候会用到下拉列表,下面我们讲一下spinner 正文: 因为比较简单,和之前的listView很像,所以直接上代码 <Spinner android:layout_wid ...