Vue 常用指令

指令介绍

指令 : 带有 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