四、vue基础-指令（一）、vscode代码片段
一、vscode代码片段
- 我们在前面联系Vue的过程中，有些代码片段是需要经常写的，我们再VSCode中我们可以生成一个代码片段，方便我们快速生成。
- VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。
具体步骤如下：
- 第一步，复制自己需要生成代码片段的代码；
- 第二步，https://snippet-generator.app/在该网站中生成代码片段；
- 第三步，复制第二步生成的代码，在vscode-首选项-配置用户代码在VSCode中配置代码片段，选择html后把第二步生成的代码粘贴进去保存；
这样子我们是不是就可以直接快速生成代码片段了嘛。
二、Mustache双大括号语法（插值语法/胡子语法）
如果我们希望把数据新鲜事到模板（template）中，使用最多的语法是”Mustache“语法（双大括号）的文本插值。
- 并且我们前面提到过，data返回的对象是有添加到Vue的响应式系统中；
- 当data中的数据发生改变时，对应的内容也会发生更新。
- 当然，Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式
我们看下具体有哪些使用场景：
<!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"><!-- 1. 基本使用 --><h2>{{ message }}</h2><h2>当前计数: {{ counter }}</h2><!-- 2. 表达式 --><h2>计数双倍: {{ counter * 2 }}</h2><h2>展示的信息: {{ info.split(' ') }}</h2><!-- 3. 三元运算符 --><h2>{{ age >=18? "成年人": "未成年人" }}</h2><!-- 4. 调用methods中的函数 --><h2>{{ formatDate() }}</h2><!-- 5. 调用methods中的带参数的函数 --><h2>{{ formatDate2(123) }}</h2><!-- 4. 注意：这里不能定义语句 --><!-- <h2>{{ const name = "why"; name }}</h2> --></div><script src="../lib/vue.js"></script><script>const app = Vue.createApp({// data: option apidata: function () {return {message: 'Hello Vue',counter: 100,info: 'my name is wangdaxia',age: 22,};},methods: {formatDate: function () {return '2023-04-16';},formatDate2: function (date) {return '2023-04-16-' + date;},},});app.mount('#app');</script></body>
</html>
还有一个使用场景，如果我们上述的formatDate2函数需要传一个参数，这个参数可以穿data里面的属性吗？ 当然可以，我们试一下。
三、v-once指令（了解）
我们先来个栗子🌰~
这里我设置了一个h2标签、一个button按钮。h2标签去获取message数据，button按钮绑定了点击事件，通过点击button按钮去改变message的值。
message的值是不是发生改变了？因为vue会监听message这个值，当它发生改变了，这个值会重新去渲染。
但是某些需求是希望这个message的值，只能渲染一次。
就好比上面的例子，我只希望他给我渲染一次，再去点击事件改变message的值了，我第一个h2标签的message还是第一次渲染的值。
<!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"><!-- 指令:v-once --><h2>{{ message }}</h2><button @click="changeMessage">改变message</button></div><script src="../lib/vue.js"></script><script>const app = Vue.createApp({// data: option apidata: function () {return {message: 'Hello Vue',};},methods: {changeMessage: function () {this.message = '你好啊，大侠';},},});app.mount('#app');</script></body>
</html>
所以我修改下代码，再去点击button按钮，看看message的值是否会发生变化，咱们看下效果：
是不是不会点了，因为message第一次渲染的时候，值就是Hello Vue。 
其实值是发生改变了，只不过界面上没有发生改变。我们把message打印出来看一下。
而且如果绑定v-once的标签里面还有子组件，都只会渲染一次。比如例如下面这个例子。
那我们再新增一个h1标签，里面写message的话，这里的message只会渲染一次吗？很明显不是的，因为他不是上面设置了v-once的子组件。
四、 v-text指令（了解）
用于更新元素的 textContent。
上面我们想把message引用到上面，我们使用的是插值语法。
除了插值语法我们还有其他方法。我们给h2添加一个指令v-text。实现效果都是一样的。
<!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"><h2>{{message}}</h2><h2 v-text="message"></h2></div><script src="../lib/vue.js"></script><script>const app = Vue.createApp({// data: option apidata: function () {return {message: 'Hello Vue',};},});app.mount('#app');</script></body>
</html>
只是插值语法更为灵活一点，因为我们可以写一些别的东西和message混在一起。那如果我们在v-text里面写一些东西，v-text绑定的message会把aaa给替换掉。
<h2> aa {{ message }} bbb</h2>
我们看下效果：
五、v-html
content是一个html标签，那我将content放到上面的h2标签里，他会自动渲染成span标签以及相对应的style吗？很明显不会。
<!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"><h2>{{ content }}</h2></div><script src="../lib/vue.js"></script><script>const app = Vue.createApp({// data: option apidata: function () {return {content: '<span style="color: red; font-size: 30px;">哈哈哈</span>',};},});app.mount('#app');</script></body>
</html>
我们使用v-html试试看：
六、v-pre
这里我单纯只是想展示两个大括号{{}}，我该怎么去做？
是的，添加v-pre：
七、v-cloak
我们如果把下面创建app和挂载这个步骤去掉，我们在页面上看h2标签是不是展示成这样子？
因为没有渲染嘛。那此时我把创建app和挂载这2个步骤放在你一个setTimeout里面，设置3秒后才会执行里面的代码。
<!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"><h2>{{message}}</h2></div><script src="../lib/vue.js"></script><script>setTimeout(() => {const app = Vue.createApp({// data: option apidata: function () {return {message: 'Hello Vue',};},});app.mount('#app');}, 3000);</script></body>
</html>
通过html页面展示，我们不难发现，页面一开始由 {{message}} 变成 Hello Vue。
其实我们就是实际使用过程中，可能会因为网络环境等因素，使用者一开始看到的是没渲染过的{{message}}，那我们怎么去避免呢？我们可以加上一个斗篷 v-cloak。意思就是我们先把内容遮起来，遮起来之后慢慢渲染，渲染成功过后我们就把斗篷移除掉，这样子展示给客户面前的就是渲染过后的内容。
我们加上斗篷之后，发现为啥效果还是跟没加是一样的。
因为需要配合上面的这几行代码一起使用。
我们需要添加css属性，当有斗篷的时候，display=none，当渲染成功之后，vue会自动将h2上面的v-cloak删掉， 删掉之后，上面的style就不会对h2起效果了。
应该能理解吧~
八、v-memo
我们直接来个例子🌰~
<!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"><div><h2>姓名: {{ name }}</h2><h2>年龄: {{ age }}</h2><h2>身高: {{ height }}</h2></div><button @click="updateInfo">改变信息</button></div><script src="../lib/vue.js"></script><script>const app = Vue.createApp({// data: option apidata: function () {return {name: 'daxia',age: 18,height: 1.88,};},methods: {updateInfo: function () {this.name = 'kobe';},},});app.mount('#app');</script></body>
</html>
题目：现在来个新的需求， 只有当name发生改变的时候，才需要进行重新渲染。其他字段（age和height）发生改变时，不需要进行重新渲染。
我们看下官方文档：
直接上代码：
只有当name和最后一次渲染的不同，才会进行渲染，否则都是跳过渲染。
<!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"><div v-memo="[name]"><h2>姓名: {{ name }}</h2><h2>年龄: {{ age }}</h2><h2>身高: {{ height }}</h2></div><button @click="updateInfo">改变信息</button></div><script src="../lib/vue.js"></script><script>const app = Vue.createApp({// data: option apidata: function () {return {name: 'daxia',age: 18,height: 1.88,};},methods: {updateInfo: function () {this.name = 'kobe';},},});app.mount('#app');</script></body>
</html>