Vue内置指令
- 1、v-show
- 2、v-if
- 3、v-else-if/v-else
- 4、v-for
- 4.1 v-for遍历数据
- 4.2 v-for遍历对象
- 5、 v-bind
- 6、v-model
- 7、v-on
- 8、v-text
- 9、v-html
- 10、v-once
- 11、v-pre
- 12、v-cloak
- 13 v-slot
1、v-show
v-show指令根据表达式的真假，显示或隐藏HTML元素。
使用v-show指令，元素本身是要被渲染的，至于是否显示是通过设置CSS样式属性display来控制的，如果表达式的值为false,则设置样式:"display:none"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>v-show指令</title>
</head>
<body>
<div id="app">
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">NO!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
<h1 v-show="name.indexOf('Smith') >= 0">Name: {{ name }}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
yes: true,
no: false,
age: 28,
name: 'Will Smith'
}
}
}).mount('#app');
</script>
</body>
</html>
渲染结果如下：
2、v-if
v-if指令根据表达式值得真假来生成或删除一个元素。
v-if指令在HTML元素是否显示的实现机制上与v-show不同，当表达式值为false时，v-if指令不会创建该元素，只有当表达式的值为true时，v-if才会真正创建该元素；而v-show指令不管表达式的值是真是假，元素本身都是会被创建的，显示与否是通过CSS的样式属性display控制的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>v-if指令</title>
</head>
<body>
<div id="app">
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">NO!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('Smith') >= 0">Name: {{ name }}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
yes: true,
no: false,
age: 28,
name: 'Will Smith'
}
}
}).mount('#app');
</script>
</body>
</html>
如果v-if需要控制多个元素的创建与删除，可以用<template>元素包裹这些元素，然后在<template>元素上使用v-if指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<template v-if="!isLogin">
<form>
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
</form>
</template>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm=Vue.createApp({
data(){
return{
isLogin:false
}
}
}).mount('#app');
</script>
</body>
</html>
3、v-else-if/v-else
v-else-if指令与v-if指令一起使用，可以实现互斥的条件判断。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<span v-if="score>=85">优秀</span>
<span v-else-if="score>=75">良好</span>
<span v-else-if="score>=60">及格</span>
<span v-else>不及格</span>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm=Vue.createApp({
data(){
return{
score:90
}
}
}).mount('#app');
</script>
</body>
</html>
4、v-for
v-for指令就是通过循环的方式渲染一个列表，循环的对象可以是数组，也可以是一个javascript对象。
v-for指令的表达式还支持一个可选的参数作为当前项的索引。
4.1 v-for遍历数据
表达式的语法形式为item in items。其中，items是源数据数据；item是被迭代数据元素的别名。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(book,index) in books">{{index}} - {{book.title}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: 'Servlet/JSP深入详解'}
]
}
}
}).mount('#app');
</script>
</body>
</html>
4.2 v-for遍历对象
遍历对象的语法形式和遍历数组是一样的，即value in Object。Object是被迭代的对象，value是被迭代的对象属性的别名
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value, key, index) in book">{{index}}. {{key}} : {{value}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
book: {
title: 'VC++深入详解',
author: '孙鑫',
isbn: '9787121362217'
}
}
}
}).mount('#app');
</script>
</body>
</html>
5、 v-bind
v-bind指令主要用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 绑定一个属性 -->
<img v-bind:src="imgSrc">
<!-- 简写语法 -->
<img :src="imgSrc">
<!-- 动态属性名 -->
<a v-bind:[attrname]="url">链接</a>
<!-- 内联字符串拼接 -->
<img :src="'images/' + fileName">
<!-- 绑定一个有属性的对象 -->
<form v-bind="formObj">
<input type="text">
</form>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
attrname: 'href',
url: 'http://www.sina.com.cn/',
imgSrc: 'images/bg.jpg',
fileName: 'bg.jpg',
formObj: {
method: 'get',
action: '#'
}
}
}
}).mount('#app');
</script>
</body>
</html>
6、v-model
v-model指令用来在表单<input><textarea>和<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model的本质不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行特殊处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: 'Hello World'
}
}
}).mount('#app');
</script>
</body>
</html>
然后我们在控制台改变message的值，观察文本框中的数据是否也发生变化
可以看到控件中的内容发生了变化，message的值也发生了变化
7、v-on
v-on指令用于监听DOM事件，并在触发时运行一些JavaScript代码。v-on指令的表达式可以是一段JavaScript代码，也可以是一个方法的名字或方法调用语句。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>
<!--① click事件直接使用JavaScript语句-->
<button v-on:click="count += 1">Add 1</button>
<span>count: {{count}}</span>
</p>
<p>
<!--② click事件直接绑定一个方法-->
<button v-on:click="greet">Greet</button>
<!--简写语法-->
<button @click="greet">Greet</button>
</p>
<p>
<!--③ click事件使用内联语句调用方法-->
<button v-on:click="say('Hi')">Hi</button>
</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
count: 0,
message: 'Hello, Vue.js!'
}
},
//在选项对象的methods属性对象中定义方法
methods: {
greet: function() {
//方法的this值始终指向组件实例
alert(this.message)
},
//对象方法的简写语法
say(msg) {
alert(msg)
}
}
}).mount('#app');
</script>
</body>
</html>
点击add count+1 点击左侧Greet
8、v-text
v-text指令用于更新元素的文本内容(即元素的textContent属性)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<span v-text="message"></span>
<!-- 等价于
<span v-text>{{message}}</span>
-->
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: 'Hello Vue.js'
}
}
}).mount('#app');
</script>
</body>
</html>
9、v-html
v-html指令用于更新元素的innerHTML，该部分内容作为普通的HTML代码插入，不会作为Vue模板编译。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div v-html="hElt"></div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
hElt: "<h1>《Java无难事》</h1>"
}
}
}).mount('#app');
</script>
</body>
</html>
在网站上动态渲染任意的HTML都是非常危险的，很容易导致XSS攻击。切记，只在可信的内容上使用v-html,永远不要在用户提交的内容上使用该指令
10、v-once
v-once指令可以让元素或组件只渲染一次，该指令不需要表达式。之后再次渲染时，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a {
margin: 20px;
}
</style>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<a v-for="nav in navs" :href="nav.url" v-once>{{nav.name}}</a>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
title: 'v-once指令的用法',
navs: [
{name: '首页', url: '/home'},
{name: '新闻', url: '/news'},
{name: '视频', url: '/video'},
]
}
}
}).mount('#app');
</script>
</body>
</html>
切换console窗口，输入vm.navs.push({name:'论坛',url:'/bbs'})
可以看到页面并没有任何变化，这就是v-once指令的作用，只渲染一次，渲染之后的结果将作为静态内容而存在。
11、v-pre
v-pre指令也不需要表达式，用于跳过这个元素及其所有子元素的编译。v-pre指令可以用来显示原始Mustache标签。对于大量没有指令的节点使用v-pre指令可以加快编译速度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1 v-pre>{{message}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: 'Java无难事',
}
}
}).mount('#app');
</script>
</body>
</html>
渲染结果：
12、v-cloak
v-cloak指令也不需要表达式，这个指令保留在元素上直到关联的组件实例编译结束，编译结束后该指令被移除。当和CSS规则如[v-clock]{display:none}一起使用时，这个指令可以隐藏未编译的Mustache标签直到组件实例准备完毕。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h1 v-cloak>{{message}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
message: 'Vue.js无难事'
}
}
}).mount('#app');
</script>
</body>
</html>
大项目中使用的不多，了解就行
13 v-slot
v-slot指令用于提供命名的插槽或需要接收prop的插槽。
