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>
渲染结果如下:
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>
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>
v-for
指令就是通过循环的方式渲染一个列表,循环的对象可以是数组,也可以是一个javascript
对象。
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>
遍历对象的语法形式和遍历数组是一样的,即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>
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>
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的值也发生了变化
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
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>
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,永远不要在用户提交的内容上使用该指令
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指令的作用,只渲染一次,渲染之后的结果将作为静态内容而存在。
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>
渲染结果:
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>
大项目中使用的不多,了解就行
v-slot
指令用于提供命名的插槽或需要接收prop的插槽。