- 文本指令 | v-text = '变量名' & v-heml=" 'html标签' "
<!--
1) v-text指令同插值表达式，渲染普通文本
v-text='变量名' ,变量需要data提供变量值
2) v-html指令可以渲染有html语法的文本，能够解析html语法
v-heml=" 'html标签' " , 不加引号就是变量
-->
<body>
<div id="app">
<p>{{ info }}</p>
<!-- 文本指令渲染变量 -->
<p v-text="info">ok</p>
<!-- 文本指令渲染常量(基础数据类型) -->
<p v-text="123"></p>
<p v-text="true"></p>
<p v-text="'abc' + info"></p>
<p v-text="[1,2,3]"></p>
<!-- html标签指令 -->
<p v-html="'<b style=`color:red`>html</b>'"></p>
<p v-text="'<b>text</b>'"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
info:'xionger',
}
})
</script>
反引号补充:
<script>
// 1) js多行字符串 反引号 ``
// 2) 反引号字符串中可以直接填充变量，语法为 `${变量名}`
let s1 = `第一行
第二行
结束行`;
console.log(s1);
let name = 'Owen';
let age = 17.5;
let s2 = `
name: ${name}
age: ${age}
`;
console.log(s2);
</script>
- 事件指令 | v-on:事件名="函数名(参数...)" / @事件名="函数名(参数们)"
<!--
1) 语法：v-on:事件名="函数名(参数...)"
2) 简写：@事件名="函数名(参数们)"
3) 用methods实例成员提供 事件函数 的实现
补充:
@事件='方法' 默认传入事件对象 $event
@事件='方法()' 不传递任何参数
@事件='方法(参数...)' 只传递自定义参数
@事件='方法($event, 参数...)' 自定义传参时传递事件对象
-->
<body>
<div id="app">
<!--单击事件-->
<p class="low-num" v-on:click="lowNum">
<span>点击减一:</span>
<span>{{ num }}</span>
</p>
<!--双击事件-->
<p v-on:dblclick="dblAction">双击</p>
<!--悬浮事件-->
<p @mouseover="overAction(10,$event)">悬浮</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
num:100,
},
methods:{
lowNum:function () {
// 在vue实例内部的方法中获取变量 this.num
this.num -= 1;
},
dblAction:function (ev) {
alert('双击事件');
console.log(ev)
},
overAction:function (a,b) {
console.log(a,b)
}
}
})
</script>
- 属性指令 | v-bind:属性名="变量" / :属性名="变量"
<!--
1) 语法：v-bind:属性名="变量"
2) v-bind:属性名="变量" 简写 :属性名="变量"
3) 单值属性绑定： :title="变量" | :id="变量" | :自定义属性="变量"
4) style属性绑定： :style="字典变量" | ：style="{css属性1:变量1, ..., css属性n:变量n}"
5) class属性绑定： :class="变量" | :class="[变量1, ..., 变量n]" | :calss="{类名:布尔变量}"
-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
[index] {
color: orange;
}
.ccc1 {
background-color: yellowgreen;
}
.ccc2 {
color: greenyellow;
}
.ccc3 {
border-radius: 50%;
}
.ttt {
background-color: gold;
color: orange;
}
</style>
</head>
<body>
<div id="app">
<!--1) 语法：v-bind:属性名="变量" -->
<p id="p2" v-bind:class="p1" style="" title="" index="">属性指令2</p>
<p v-bind:index="p1">自定义属性也可以被vue绑定1</p>
<!--2) v-bind:属性名="变量" 简写 :属性名="变量" -->
<p :title="'文本提示'">悬浮文本提示</p>
<!--3) style样式属性绑定 -->
<p :style="myStyle">样式绑定1</p>
<p :style="{backgroundColor: c1, color: c2, 'border-radius': '50%'}">样式绑定2</p>
<!--4) class类属性绑定 -->
<p :class="myc1">样式绑定3</p>
<p :class="[myc2,myc3,myc4,'bbb']">样式绑定4</p>
<!--案例：点击切换类名是否起作用-->
<p @click="clickAction" :class="{ttt:yyy}">点击切换类</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
p1:'haha',
myStyle: {
backgroundColor: 'pink',
color: 'deeppink',
'border-radius': '50%'
},
c1: 'cyan',
c2: 'tan',
myc1: 'ccc ddd eee',
myc2: 'ccc1',
myc3: 'ccc2',
myc4: 'ccc3',
yyy:true,
},
methods: {
clickAction() {
this.yyy = !this.yyy;
}
}
})
</script>
</html>
属性指令代码
属性指令代码演示
<!-- 给自定义属性绑定变量 -->
<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="{ '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: {
"200px",
height: "200px",
backgroundColor: "cyan"
}
}
})
</script>
<!-- v-bind: 指令可以简写为 : -->
- 表单指令 | v-model="控制vaule值的变量"
<!--
1) 语法：v-model="控制vaule值的变量" 本质是控制value的值
2) :value="变量" 直接绑定数据不会时时更新(修改表单标签值，值不会时时映射给绑定的变量)
3) v-model="变量" 绑定数据会时时更新(修改表单标签值，值会时时映射给绑定的变量)
4) 单独复选框作为确认框时，v-model绑定的变量为布尔类型变量
5) 单选框，v-model绑定的变量值是某一个选项的值(值是哪个选项的值，那个选项就被选中)
6) 多复选框，v-model绑定的变量值是一个列表(数组)，存放复选框选项值(谁被选中就存放了谁)
-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<form action="">
<!--1) 对表单标签value进行绑定操作变量，不能时时检测绑定的变量-->
<input type="text" v-bind:value="info">
<input type="text" :value="info">
<p>{{ info }}</p>
<hr>
<!--2) 表单标签的值有 v-model="变量" 来绑定控制，操作的还是value，但是拥有时时变量值的检测 -->
<input type="text" v-model="info">
<input type="text" v-model="info">
<p>{{ info }}</p>
<br>
<!-- 3) v-model操作单独复选框 - 确认框 -->
<!-- v-model存储的值为true|false -->
是否同意: <input type="checkbox" name="agree" v-model="isAgree">
<p>{{ isAgree }}</p>
<!-- 4) 单选框-->
<!-- 单选框是以name进行分组，同组中只能发生单选 -->
性别：
男 <input type="radio" name="sex" value="male" v-model="mysex">
女 <input type="radio" name="sex" value="female" v-model="mysex">
哇塞 <input type="radio" name="sex" value="others" v-model="mysex">
<p>{{ mysex }}</p>
<!-- 5) 复选框-->
!-- v-model存储的值为存储值多复选框value的数组 -->
兴趣爱好：
男 <input type="checkbox" name="hobbies" value="male" v-model="myhobbies">
女 <input type="checkbox" name="hobbies" value="female" v-model="myhobbies">
哇塞 <input type="checkbox" name="hobbies" value="others" v-model="myhobbies">
<p>{{ myhobbies }}</p>
<input type="submit">
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
info:123,
isAgree:0,
mysex:'male', // 单选框默认值
myhobbies:['female','others'] // 复选框默认值
}
})
</script>
</html>
表单指令代码
表单指令代码演示
v-cloak
<!--
避免页面闪烁
[v-cloak] {dispaly:none;}
-->
<style type="text/css">
[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
{{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "message"
}
})
</script>
- 限制指令 | v-none
<!-- v-once 单独使用，限制的标签内容一旦赋值，便不可更改 -->
<body>
<div id="app">
<!-- v-once 单独使用，限制的标签内容一旦赋值，便不可更改 -->
<input type="text" v-model="msg">
<input type="text" v-model="msg" v-once>
<p>{{ msg }}</p>
<p v-once>{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
msg:'初始值'
},
})
</script>
- 条件指令 | v-if=" boor值变量" & v-show=" boor值变量"
<!--
两种都可以控制标签的显隐，绑定的值是布尔类型值，当都隐藏标签时
v-if是不渲染标签
v-show以 display:none 方式渲染
if 条件指令家族:
v-if="isTrue"
v-else-if="isTrue"
v-else
-->
<body>
<div id="app">
<p v-if="isTrue">if条件指令</p>
<p v-show="isTrue">show条件指令</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
isTrue:false,
},
})
</script>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 400px;
height: 300px;
}
.r { background-color: red; }
.y { background-color: yellow }
.b { background-color: blue; }
.active {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<!--
v-if="变量"
v-else-if="变量"
v-else
一组分支，上成立分支会屏蔽下方所有分支，else分支没有条件，再所有分支不成立后才显示
-->
<p v-if="0">ififif</p>
<p v-else-if="0">elseif</p>
<p v-else>else</p>
<div class="em">
<p>
<button @click="changeBox('rBox')" :class="{active: showName == 'rBox'}">红</button>
<button @click="changeBox('yBox')" :class="{active: showName == 'yBox'}">黄</button>
<button @click="changeBox('bBox')" :class="{active: showName == 'bBox'}">蓝</button>
</p>
<p>
<button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active' : ''">红</button>
<button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active' : ''">黄</button>
<button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'active' : ''">蓝</button>
</p>
<div class="box r" v-if="showName == 'rBox'"></div>
<div class="box y" v-else-if="showName == 'yBox'"></div>
<div class="box b" v-else></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
showName: 'rBox'
},
methods: {
changeBox(name) {
this.showName = name;
}
}
})
</script>
</html>
条件指令案例
- 原义指令 | v-pre
<!-- v-pre 指令可以在vue控制范围内，形成一个不被vue控制的区域局部不解析vue语法 -->
<body>
<div id="app">
<p>{{ msg }}</p>
<!--
下面的p标签内部会被vue实例控制
{{ }} 和 v-if 都会原样输出，不会被解析
-->
<p v-pre>
{{ }}
<span v-if="hehe"></span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
}
})
</script>
- 循环指令 | v-for=" item in 容器类型数据"
<!--
1) 遍历字符串：可以只逐一遍历字符，也可以连同遍历索引
<p v-for="ch in str"></p> | <p v-for="(ch, index) in str"></p>
2) 遍历数组：可以只逐一遍历成员元素，也可以连同遍历索引
<p v-for="ele in arr"></p> | <p v-for="(ele, index) in arr"></p>
3) 遍历对象：可以只逐一遍历成员元素，也可以连同遍历成员键(key)，还可以遍历成员key索引
<p v-for="v in dic"></p> | <p v-for="(v,k) in arr"></p> | <p v-for="(v,k,i) in arr"></p>
-->
<body>
<!-- v-for="元素 in 容器" -->
<div id="app">
<p>{{ str }}</p>
<p>{{ str[0] }}</p>
<div>
<span v-for="ch in str">{{ ch }}</span>
</div>
<div>
<!--针对循环遍历的标签，通过会提供key属性来优化渲染速度，但key的值必须唯一（key可以不用提供） -->
<span v-for="(ch, i) in str" :key="ch + i">{{ i }}{{ ch }}</span>
</div>
<div>
<p v-for="(ele, i) in arr">{{ i }}{{ ele }}</p>
</div>
<div>
<p v-for="ele in dic">{{ ele }}</p>
</div>
<div>
<p v-for="(ele, k) in dic">{{ k }}:{{ ele }}</p>
</div>
<div>
<p v-for="(ele, k, i) in dic">{{ i }}{{ k }}:{{ ele }}</p>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
str: 'abc123呵呵',
arr: [3, 4, 1, 2, 5],
dic: {
name: 'xionger',
age: 80,
gender: '哇塞',
}
}
})
</script>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="userMsg">
<button type="button" @click="sendMsg">留言</button>
</p>
<ul>
<li v-for="(msg, index) in msgs" @click="deleteMsg(index)">
{{ msg }}
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [], // 所有留言
userMsg: '', // 用户留言
},
methods: {
sendMsg() { // 留言事件
// 尾增
// this.msgs.push(this.userMsg);
// 首增
// this.msgs.unshift(this.userMsg);
let userMsg = this.userMsg;
if (userMsg) {
this.msgs.unshift(userMsg); // 渲染给页面
localStorage.msgs = JSON.stringify(this.msgs); // 同步到数据库
this.userMsg = ''; // 清空留言框
}
},
deleteMsg(index) {
// 开始索引 操作长度 操作的结果们
this.msgs.splice(index, 1)
}
}
})
</script>
<script>
// localStorage['num'] = 10;
// sessionStorage.num = 888;
// console.log(localStorage.num);
// localStorage.msgs = JSON.stringify(['1111', '2222']);
// console.log(JSON.parse(localStorage.msgs));
// console.log(JSON.parse(localStorage.msgs)[0]);
</script>
</html>
todolist案例
补充: 前端数据库
<!--
1) 前台数据库：localStorage 和 sessionStorage
localStorage永久保存数据
sessionStorage临时保存数据(当所属页面标签被关闭，数据被清空)
2) 前台localStorage 和 sessionStorage数据库存储的值是字符串类型，所以要存放arr、dic等复杂数据需要JSON参与
-->
<script>
localStorage['num'] = 10; // 添加值
sessionStorage.num = 888; // 添加至或取值
console.log(localStorage.num);
// JSON.stringify 序列化
localStorage.msgs = JSON.stringify(['1111', '2222']);
// JSON.parse 反序列化
console.log(JSON.parse(localStorage.msgs));
console.log(JSON.parse(localStorage.msgs)[0]);
</script>