请注意，本文编写于 89 天前，最后修改于 67 天前，其中某些信息可能已经过时。
目录
一、Vue3基本指令
1. Mustche语法
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<!-- 1. mustche的基本使用 -->
<template id="why">
<h2>{{message}}</h2>
<!-- 2. 是一个表达式 -->
<h2>{{counter * 10}}</h2>
<h2>{{ message.split(" ").reverse().join(" ") }}</h2>
<!-- 3. 也可以调用函数 -->
<h2>{{getReverseMessage()}}</h2>
<!-- 4. 三元运算符 -->
<h2>{{ isShow ? "哈哈哈": "" }}</h2>
<button @click="toggle">隐藏</button>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#why',
// 存储数据，声明数据
data: function() {
return {
message: "Hello World",
counter: 100,
isShow: true
}
},
// 声明方法
methods: {
getReverseMessage() {
return this.message.split(" ").reverse().join(" ")
},
toggle() {
this.isShow = !this.isShow;
}
}
}).mount("#app");
</script>
</body>
</html>
2. 基本指令v-noce
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本指令-v-once</title>
</head>
<body>
<div id="app"></div>
<template id="why">
<h2>{{counter}}</h2>
<!-- v-once表示counter都不会重新渲染，只会渲染第一次，包括子组件 -->
<h2 v-once>{{counter}}</h2>
<button @click="incrementEl">+1</button>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#why',
// 存储数据，声明数据
data: function() {
return {
counter: 100
}
},
// 声明方法
methods: {
incrementEl() {
this.counter++;
}
}
}).mount("#app");
</script>
</body>
</html>
3. 基本指令v-text
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本指令-text</title>
</head>
<body>
<div id="app"></div>
<template id="why">
<!-- v-text是比较少 -->
<h2 v-text="message"></h2>
<h2>{{message}}</h2>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#why',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Wordr"
}
},
// 声明方法
methods: {
}
}).mount("#app");
</script>
</body>
</html>
4. 基本指令v-html
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本指令-v-html</title>
</head>
<body>
<div id="app"></div>
<template id="why">
<div>{{message}}</div>
<div v-html="msg"></div>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#why',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Wordr",
msg: '<span style="color:red; background: blue;">test</span>'
}
},
// 声明方法
methods: {
}
}).mount("#app");
</script>
</body>
</html>
5. 基本指令v-pre
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本指令-v-pre</title>
</head>
<body>
<div id="app"></div>
<template id="why">
<!-- 还原原始命令 -->
<div v-pre>{{message}}</div>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#why',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Word"
}
},
// 声明方法
methods: {
}
}).mount("#app");
</script>
</body>
</html>
6. 基本指令v-cloak
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本指令-v-cloak</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="why">
<h2 v-cloak>{{message}}</h2>
</template>
<script src="../vue3_init/vue.global.js"></script>
<script>
Vue.createApp({
template: '#why',
// 存储数据，声明数据
data: function() {
return {
message: "Hello Word"
}
},
// 声明方法
methods: {
}
}).mount("#app");
</script>
</body>
</html>
本文作者:ruiwiki
本文链接:
版权声明:本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
目录
