Vue基础-03-指令

Vue基础03-指令

在Vue中我们要实现很多的功能，都是采用vue已经封装好的一些内容来实现，比如后续要绑定事件。@click，为什么会出现指令这种内容。以后在js或者jquery中获取数据，绑定数据我们都是通过dom操作。在vue中你还需要dom操作？需要用一些vue封装好的指令来实现dom的操作。

1. <div id="odiv"></div>
2. const objdiv = document.getElementById("odiv")
3. objdiv.setAttribute("index",123)

Vue采用的指令的方式来实现属性、内容、数据的动态绑定获取操作

1. <div v-bind:index></div>

常用的指令

一、v-text和v-html

1. <div>
2. <h1>小张{{msg}}</h1>
3. <h1 v-text="msg">小张</h1>
4. <h1 v-html="msg"></h1>
5. </div>

v-html和v-text都是指令，需要写在标签上面。

区别：v-html这个指令可以解析普通文本，也可以解析html代码。v-text只能将内容解析为文本

使用场景：后端返回的内容纯文本，用v-text来绑定，后端返回的内容包含富文本数据需要v-html

二、v-show指令

v-show这个指令可以控制页面上原生显示和隐藏，相对于传统的dom操作，这个指令使用起来更加方便。

v-show控制页面上元素显示和隐藏display这个属性来控制的。虽然隐藏但是元素还在文档流中

1. <p v-show="boo">成都</p>
2. <p v-show="boo==false">上海</p>
3. <p v-show="10>1">上海</p>

三、v-bind

这个属性非常重要，使用频率非常高。

v-bind这个属性主要用于元素的属性绑定，一旦使用这个指令那就意味着属性动态绑定

1. <img v-bind:src="imgsrc" alt="">

这个v-bind也可以有简写的方式

1. <img :src="imgsrc">

扩展

本地图片如果你需要动态绑定，必须要用require模块引入这个图片。

1. <img :src="localsrc"> //页面在加载这个图片的，采用模块化的形式来引入图片
2. data(){
3. return{
4. localsrc:require("@/assets/images/logo.png")
5. }
6. }

以后要引入外部资源，资源层级比较多，可以在引入的时候@来表示src目录

import xxx from “@/components/xxxx”