一、内置指令
1、v-show
v-show指令会根据表达式的真假值,切换元素的display CSS属性,来显示或者隐藏元素。当条件变化时,该指令会自动触发过渡效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-show指令</title>
</head>
<body>
<div id="app">
<h3 v-show="ok">西瓜</h3>
<h3 v-show="no">苹果</h3>
<h3 v-show="num>=1000">库存很充足!</h3>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
ok:true,
no:false,
num:1000
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
2、v-if/v-else-if/v-else
使用这三个指令来实现条件判断,使用v-if时,会根据表达式来决定是否创建元素,这和v-show只是隐藏元素不同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-else-if指令与v-if指令</title>
</head>
<body>
<div id="app">
<span v-if="score>=90">优秀</span>
<span v-else-if="score>=80">合格</span>
<span v-else-if="score>=60">及格</span>
<span v-else>不及格</span>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
ok:true,
no:false,
score:85
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
3、v-for
- 遍历数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for指令遍历数组</title>
</head>
<body>
<div id="app">
<ul>
<!--也可以使用of替代in作为分隔符,因为数组中key和index的值相同-->
<li v-for="item in nameList">
{{item.name}}--{{item.city}}--{{item.price}}元
</li>
</ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
nameList:[
{name:'洗衣机',city:'上海',price:'8600'},
{name:'冰箱',city:'北京',price:'6800'},
{name:'空调',city:'广州',price:'5900'}
]
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
- 遍历对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for指令遍历对象</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in nameObj">
{{item}}
</li>
</ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
nameObj:{
name:"洗衣机",
city:"上海",
price:"6800元"
}
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
添加二、三个参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加第二、三个参数</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,key,index) in nameObj">
{{index}}--{{key}}--{{item}}
</li>
</ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
nameObj:{
name:"洗衣机",
city:"上海",
price:"6800元"
}
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
- 遍历整数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for指令遍历整数</title>
</head>
<body>
<div id="app">
<span v-for="item in 20">
{{item}}
</span>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
}).mount('#app');
</script>
</body>
</html>
- 在< template >中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>在<template>上使用v-for</title>
</head>
<body>
<div id="app">
<ul>
<template v-for="(item,key,index) in nameObj">
<li>{{index}}--{{key}}--{{item}}</li>
</template>
</ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
data(){
return{
nameObj:{
name:"洗衣机",
city:"上海",
price:"6800元"
}
}
}
}).mount('#app');
</script>
</body>
</html>
- 数组更新检测
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组更新检测</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in nameList">
{{index}}--{{item}}
</li>
</ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
data(){
return{
nameList:["洗衣机","上海","5800元"]
}
}
}).mount('#app');
//使用数组原型的splice()方法
app.$set(vm.nameList,3,"高三")
</script>
</body>
</html>
- key属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用key属性</title>
</head>
<body>
<div id="app">
<div>名称:<input type="text" v-model="names"></div>
<div>产地:<input type="text" v-model="citys"></div>
<div>价格:<input type="text" v-model="prices"><button v-on:click="add()">添加</button></div>
<hr>
<!--key属性用于标识唯一-->
<p v-for="item in nameList" :key="item.name">
<input type="checkbox">
<span>名称:{{item.name}}—产地:{{item.city}}—价格:{{item.price}}</span>
</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
data(){
return{
names:"",
citys:"",
prices:"",
nameList:[
{name:'洗衣机',city:'北京',price:'6800元'},
{name:'冰箱',city:'上海',price:'8900元'},
{name:'空调',city:'广州',price:'6800元'}
]
}
},
methods:{
add:function(){
this.nameList.unshift({
name:this.names,
city:this.citys,
price:this.prices
})
}
}
}).mount('#app');
</script>
</body>
</html>
- 过滤与排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤与排序</title>
</head>
<body>
<div id="app">
<p>所有库存的商品:</p>
<ul>
<li v-for="item in nameList">
{{item}}
</li>
</ul>
<p>产地为上海的商品:</p>
<ul>
<li v-for="item in namelists">
{{item}}
</li>
</ul>
<p>价格大于或等于5000元的商品:</p>
<ul>
<li v-for="item in prices()">
{{item}}
</li>
</ul>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
data(){
return{
nameList:[
{name:"洗衣机",price:"5000",city:"上海"},
{name:"冰箱",price:"6800",city:"北京"},
{name:"空调",price:"4600",city:"深圳"},
{name:"电视机",price:"4900",city:"上海"}
]
}
},
computed:{ //计算属性
namelists:function(){
//filter过滤器
return this.nameList.filter(function (nameList) {
return nameList.city==="上海";
})
}
},
methods:{ //方法
prices:function(){
return this.nameList.filter(function(nameList){
return nameList.price>=5000;
})
}
}
}).mount('#app');
</script>
</body>
</html>
- v-for和v-if一同使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for与v-if一同使用</title>
</head>
<body>
<div id="app">
<h3>已经出库的商品</h3>
<ul>
<template v-for="goods in goodss">
<li v-if="goods.isOut">
{{goods.name}}
</li>
</template>
</ul>
<h3>没有出库的商品</h3>
<ul>
<template v-for="goods in goodss">
<li v-if="!goods.isOut">
{{goods.name}}
</li>
</template>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
goodss: [
{name: '洗衣机', isOut: false},
{name: '冰箱', isOut: true},
{name: '空调', isOut: false},
{name: '电视机', isOut: true},
{name: '电脑', isOut: false}
]
}
}
}).mount('#app');
</script>
</body>
</html>
4、v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind指令</title>
</head>
<body>
<div id="app">
<!--v-bind是单向绑定,这意味着前台的不能改变后台的,而后台的可以改变前台的-->
<input type="button" value="按钮" v-bind:title="Title" v-bind:style="{color:Color,width:Width+'px'}">
<p><a :href="Address">超链接</a></p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
data(){
return {
Title: '这是我自定义的title属性',
Color: 'blue',
Width: '100',
Address:"https://www.baidu.com/"
}
}
}).mount('#app');
</script>
</body>
</html>
5、v-modul
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-modul指令</title>
</head>
<body>
<div id="app">
<!--使用v-model指令双向绑定input的值和test属性的值-->
<!--双向绑定意味着前台输入的可以改变后台的值,后台的也可以改变前台的-->
<p><input v-model="content" type="text"></p>
<!--显示content的值-->
<p>{{content}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
data(){
return {
content: "空调"
}
}
}).mount('#app');
</script>
</body>
</html>
6、v-on
v-on用于监听DOM事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-on</title>
</head>
<body>
<div id="app">
<p>
<!--监听click事件,使用JavaScript语句-->
<button v-on:click="number-=1">-1</button>
<span>{{number}}</span>
<button v-on:click="number+=1">+1</button>
</p>
<p>
<!--监听click事件,绑定方法-->
<button v-on:click="say()">古诗</button>
</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
number:100
}
},
methods:{
say:function(){
alert("曲水浪低蕉叶稳,舞雩风软纻罗轻。")
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
7、v-text
v-text用于更新元素的文本内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-text</title>
</head>
<body>
<div id="app">
<!--更新部分内容-->
<p>古诗欣赏:{{message}}</p>
<!--更新全部内容-->
<p v-text="message">古诗欣赏:</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
message: '百舌无言桃李尽,柘林深处鹁鸪鸣。'
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
8、v-html
v-html用于更新元素的innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-html</title>
</head>
<body>
<div id="app">
<p v-html="message">古诗欣赏:</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
message:'<h3 style="color:red"> 老去惜花心已懒,爱梅犹绕江村。</h3>'
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
9、v-once
v-once指令表示只渲染元素和组件一次,后续禁止更新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-once</title>
</head>
<body>
<div id="app">
<p v-once>不可改变:{{message}}</p>
<p>可以改变:{{message}}</p>
<p><input type="text" v-model = "message" name=""></p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
message:"苹果"
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
10、v-pre
v-pre用于跳过这个元素和它的子元素编译过程,让它显示原始Mustache标签,说实话,没想到有什么具体的用处
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-pre</title>
</head>
<body>
<div id="app">
<div v-pre>{{message}}</div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
message:"竹根流水带溪云。醉中浑不记,归路月黄昏。"
}
}
//在指定的DOM元素上装载应用程序实例的根组件
}).mount('#app');
</script>
</body>
</html>
二、自定义指令
使用方法同vue2类似
- 自定义v-focus指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-focus</title>
</head>
<body>
<div id="app">
<input v-focus>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({ });
// 注册一个全局自定义指令 `v-focus`
vm.directive('focus', {
//当被绑定的元素插入到DOM中时
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
vm.mount('#app');
</script>
</body>
</html>
- bind钩子函数的参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bind钩子函数的参数</title>
</head>
<body>
<div id="app">
<div v-demo:foo.a.b="message"></div>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
message: '海上生明月'
}
}
})
// 注册一个全局自定义指令 `demo`
vm.directive('demo', {
mounted (el, binding, vnode) {
let s = JSON.stringify
el.innerHTML =
'instance: ' + s(binding.instance) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
vm.mount('#app');
</script>
</body>
</html>
- 动态指令参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态指令参数</title>
</head>
<body>
<div id="app">
<!--直接给出指令的参数-->
<p v-pin:top="100">林风纤月落</p>
<!--使用动态参数,也就是说属性也可以被自定义-->
<p v-pin:[direction]="100">林风纤月落</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@next"></script>
<script>
//创建一个应用程序实例
const vm= Vue.createApp({
//该函数返回数据对象
data(){
return{
direction: 'left'
}
}
})
// 注册一个全局自定义指令 `pin`
vm.directive('pin', {
beforeMount(el, binding, vnode) {
el.style.position = 'fixed';
//binding.arg表示传给指令的参数,这里即direction:left
let s = binding.arg || 'right';
//binding.value表示参数的值
el.style[s] = binding.value + 'px'
}
})
vm.mount('#app');
</script>
</body>
</html>
三、综合案例-下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style>
body {
width: 600px;
}
a {
text-decoration: none;
display: block;
color: #fff;
width: 120px;
height: 40px;
line-height: 40px;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #5D478B;
}
li {
list-style-type: none;
}
#app > li {
list-style-type: none;
float: left;
text-align: center;
position: relative;
}
#app li a:hover {
color: #fff;
background: #FF8C69;
}
#app li ul {
position: absolute;
left: -40px;
top: 40px;
margin-top: 1px;
font-size: 12px;
}
/*防止屏幕闪动*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id = "app" v-cloak>
<!--鼠标移入时就会触发mouseover,移出时会触发mouseout-->
<li v-for="menu in menus" @mouseover="menu.show = !menu.show" @mouseout="menu.show = !menu.show">
<a :href="menu.url" >
{{menu.name}}
</a>
<ul v-show="menu.show">
<li v-for="subMenu in menu.subMenus">
<a :href="subMenu.url">{{subMenu.name}}</a>
</li>
</ul>
</li>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const data = {
menus: [
{
name: '在线课程', url: '#', show: false, subMenus: [
{name: 'Python课程', url: '#'},
{name: 'Java课程', url: '#'},
{name: '前端课程', url: '#'}
]
},
{
name: '经典图书', url: '#', show: false, subMenus: [
{name: 'Python图书', url: '#'},
{name: 'Java图书', url: '#'},
{name: '前端图书', url: '#'}
]
},
{
name: '技术支持', url: '#', show: false, subMenus: [
{name: 'Python技术支持', url: '#'},
{name: 'Java技术支持', url: '#'},
{name: '前端技术支持', url: '#'}
]
},
{
name: '关于我们', url: '#', show: false, subMenus: [
{name: '团队介绍', url: '#'},
{name: '联系我们', url: '#'}
]
}
]
};
const vm = Vue.createApp({
data() {
return data;
}
}).mount('#app');
</script>
</body>
</html>