指令介绍
指令 : 带有 v- 前缀的特殊属性。
指令的作用 : 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM 。
在整个vue的编写过程当中，只要带v-的，那么都是常用的vue的指令。
v-text
v-text作用与双大花括号作用一样，将数据填充到标签中。但没有闪烁问题!（显示文本）
可以看到做文本的时候可以使用v-text，同时也可以看到在vue框架里面可以在HTML标签当中使用vue属性。
最终将v-text渲染为一个html的文本。在开发过程当中使用vue的语法，但是在实际最终会将vue的语法转化渲染为html页面。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><link href="" type="text/css" rel="stylesheet"/><script src="https://unpkg.com/vue@3"></script><style type="text/css"></style>
</head><body> <div id="hello-vue"><p v-text="msg"></p><p>msg:{{ msg }}</p></div><script type="text/javascript">const HelloVueApp = {data(){return{msg: "Hello Vue!"}}}Vue.createApp(HelloVueApp).mount("#hello-vue")</script></body></html>
v-html
显示HTML文本的，某些情况下，从服务端请求的数据本身就是一个 HTML 代码，如果用双大括号会将数据解 释为普通
文本，而非 HTML 代码，为了输出真正的 HTML ，需要使用 v-html 指令 :
可以看到无论是使用v-text也好还是使用花括号也好{{}}，它只是将文本显示出来。但是使用v-html的时候那么html的各种属性都能够渲染出来。
v-on
在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。 在 Vue 中如何监听
事件呢 ? 使用 v-on 指令
v-on: 冒号后面是 event 参数，例如 click 、 change
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><link href="" type="text/css" rel="stylesheet"/><script src="https://unpkg.com/vue@3"></script><style type="text/css"></style>
</head><body> <div id="hello-vue"><p>点击次数:{{ counter }}</p><button type="button" v-on:click="counter++">点击</button><br><a type="text" v-on:mouseout="counter++">鼠标离开</a></div><script type="text/javascript">const HelloVueApp = {data(){return{counter: 0 }}}Vue.createApp(HelloVueApp).mount("#hello-vue")</script></body></html>
v-bind
用于动态绑定一个或多个属性值，或者向另一个组件传递props值(这个后面再介绍)
应用场景 : 图片地址 src 、超链接 href 、动态绑定一些类、样式等等
5.1 绑定超链接
v-bind 指令后接收一个参数，以冒号分割。
v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
使用v-bind就可以在属性里面传递变量了。其实也就是vue渲染为HTML。
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><link href="" type="text/css" rel="stylesheet"/><script src="https://unpkg.com/vue@3"></script><style type="text/css"></style>
</head><body> <div id="hello-vue"><!--href取到url变量的值--><a v-bind:href="url">百度</a></div><script type="text/javascript">const HelloVueApp = {data(){return{url: "http://www.baidu.com"}}}Vue.createApp(HelloVueApp).mount("#hello-vue")</script></body></html>
2 绑定 Class
操作元素 ( 标签 ) 的 class 和 style 属性是数据绑 定的一个常见需求。
例如希望动态切换 class ，为 div 显示不同背景颜色
可以动态的去绑定class，
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><link href="" type="text/css" rel="stylesheet"/><script src="https://unpkg.com/vue@3"></script><style type="text/css">.test {width: 200px;height: 200px;background: grey;}.active {background: orange;}</style>
</head><body> <div id="hello-vue"><div v-bind:class="{active: isActive}" class="test"></div><button type="button" v-on:click="btn()">增加样式</button></div><script type="text/javascript">const HelloVueApp = {data(){return{isActive: false}},methods:{btn(){if(this.isActive){this.isActive = false}else{this.isActive = true}}}}Vue.createApp(HelloVueApp).mount("#hello-vue")</script></body></html>
绑定 Style
v-bind:style 的对象语法看着非常像 CSS ，但其实是一个 JavaScript 对象。
可以使用 v-bind 在 style 样式中传递样式变量。
使用时需要将 css 样式名中带 ”-“ 的转成驼峰命名法，如 font-size ，转为 fontSize
