源码时代Java干货分享|vue 指令基本使用大全，学完让你的工作效率提升百倍！

た入场券 2024-04-17 19:11 37阅读 0赞

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

<table style="margin-left:-4.35pt;width:383.25pt;"> 
 <tbody> 
  <tr> 
   <td style="width:61.55pt;"> <p style="margin-left:0pt;"><strong><span style="color:#24292e;"><strong>指令名称</strong></span></strong></p> </td> 
   <td style="width:128.05pt;"> <p style="margin-left:0pt;"><strong><span style="color:#24292e;"><strong>指令作用</strong></span></strong></p> </td> 
   <td style="width:193.65pt;"> <p style="margin-left:0pt;"><strong><span style="color:#24292e;"><strong>备注</strong></span></strong></p> </td> 
  </tr> 
  <tr> 
   <td style="width:61.55pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">v-html</span></p> </td> 
   <td style="width:128.05pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">显示与解析HTML代码</span></p> </td> 
   <td style="width:193.65pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="width:61.55pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">v-text</span></p> </td> 
   <td style="width:128.05pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">原封不动的展示</span></p> </td> 
   <td style="width:193.65pt;"> <p style="margin-left:0pt;">&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td style="width:61.55pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">v-for</span></p> </td> 
   <td style="width:128.05pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">遍历与循环功能</span></p> </td> 
   <td style="width:193.65pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">遍历数字，字符串,对象,数组</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:61.55pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">v-bind</span></p> </td> 
   <td style="width:128.05pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">绑定属性</span></p> </td> 
   <td style="width:193.65pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">简单形式 :属性名="值"</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:61.55pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">v-model</span></p> </td> 
   <td style="width:128.05pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">双向绑定</span></p> </td> 
   <td style="width:193.65pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">只支持input,select,textarea</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:61.55pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">v-show</span></p> </td> 
   <td style="width:128.05pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">显示与隐藏</span></p> </td> 
   <td style="width:193.65pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">隐藏只是样式:style="display=none"</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:61.55pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">v-if</span></p> </td> 
   <td style="width:128.05pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">判断</span></p> </td> 
   <td style="width:193.65pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">v-if/v-else-if/v-else</span></p> </td> 
  </tr> 
  <tr> 
   <td style="width:61.55pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">v-on</span></p> </td> 
   <td style="width:128.05pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">绑定事件</span></p> </td> 
   <td style="width:193.65pt;"> <p style="margin-left:0pt;"><span style="color:#24292e;">简写 @事件名=方法名()</span></p> </td> 
  </tr> 
 </tbody> 
</table>

## **v-html与v-text** ##

*  html会解析HTML标签(相当:innerHTML)
 *  text不会解析HTML标签(相当:innerText)

**<!DOCTYPE html>**<html lang="en"><head>

<title>Title</title>

*<!--*

*        **使用指令写法来设置数据*

*        **注**:**指令中获取数据，不需要写表达式*\{ \{\}\}

*    -->*

*<!--*

*    **指令**:vue**设计的一种特殊的标签，**v-**指令名称*

*-->*<script>

*//**原生的**js**代表为这个**myspan**加数据*

*/\*\**

*     \* innerText:**会把加上的内容原样输出**(**不会当作**html**标签进行识别与编译**)*

*     \* innerHTML**：会去识别与编译咱们的**html**标签*

*     \*/*

*/\**

*    document.getElementById("myspan").innerHTML = "<h1>**喔为**...</h1>";*

*    document.getElementById("myspan2").innerText = "<h1>**喔为**...</h1>";*

*    \*/*

**new** Vue(\{

el:"\#app",

data:\{

msg:"<h1>喔为...</h1>"

\})

</script>

</body></html>

## ** v-for** ##

*  遍历咱们的数据(数字,字符串,对象,集合)
 *  数字就是普通的循环 for(var i=1;i<=数字;i++)
 *  字符串是拿到每一个字母
 *  对象循环 <span v-for="(v,k,i) in 对象"></span>
    
     *  v:代表对象的属性值
     *  k:代表对象的属性名
     *  i:代表索引
 *  数组循环 <span v-for="(v,i) in 数组"></span>
    
     *  v:代表对象的属性值
     *  i:代表索引

**<!DOCTYPE html>**<html lang="en"><head>

<title>Title</title>

**

<ul>

</ul>

**

<ul>

</ul>

*<!--*

*        **遍历对象*

*            (v)* *如果只写一个值**,**只获取**value**的值*

*            (v,k) v:**是**value**的值，**k:**是**key(**属性**)*

*            (v,k,i) v:**是**value**的值，**k:**是**key(**属性**) ,i**：索引*

*    -->*

<ul>

</ul>

*<!--**遍历数组*

*        (v,i)* *：** v:**当前的数据值**  i:**当前遍历索引*

*    -->*

<ul>

</ul></div>

*/\*\**

*     \* v-for:**进行相应的循环**(**数字**,**字符串**,**对象**,**数组**)*

*     \*/*

**new** Vue(\{

el:"\#app",

data:\{

num:5,

name:"zhang",

smalltxt:\{

name:"斗罗大罗",

author:"杨哥",

sn:"34325Nfe"

\},

hobbys:\["吃饭","睡觉","打豆豆","垃圾"\]

\})

</script>

</body></html>

## ** v-bind的使用** ##

*  bind主要是用于绑定相应的属性 <标签 v-bind:属性名="属性值">
 *  bind有一种简写形式 <标签 :属性名="属性值">
 *  如果直接把整个对象进行属性绑定 <标签 v-bind="对象">

**<!DOCTYPE html>**<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head>

<title>Title</title>

*<!--*

*        **标准写法**-> v-bind:**属性名*

*            v-bind:src ->* *绑定相应的属性**(**里面的值可以从**data**中获取**)*

*        **简写形式**-> :**属性名*

*        **多个属性绑定*

*            v-bind="**对象**"*

*    -->*

</div>

*/\*\**

*     \*/*

**new** Vue(\{

el:"\#app",

data:\{

imgUrl:"imgs/1.jpg",

height:120,

*//**这个对象中有多个属性*

img:\{

src:"imgs/1.jpg",

height:240,

mei:"haha"

\})

</script>

</body></html>

## **v-model** ##

*  主要是用于完成双向的绑定
 *  只能用于:input,select,textarea

**<!DOCTYPE html>**<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head>

<title>Title</title>

名称:<input type="text" v-model="inputVal"> <br>

\{ \{inputVal\}\}

<hr>

爱好:

<input v-model="checkboxVal" value="1" type="checkbox">看电影

<input v-model="checkboxVal" value="2" type="checkbox">看小说

<input v-model="checkboxVal" value="3" type="checkbox">看漫画

<input v-model="checkboxVal" value="4" type="checkbox">垃圾

<br>

\{ \{checkboxVal\}\}

<hr>

性别:

<input v-model="radioVal" value="1" type="radio">男

<input v-model="radioVal" value="2" type="radio">女

<input v-model="radioVal" value="3" type="radio">叨客

<br>

\{ \{radioVal\}\}

<hr>

</select>

<br>

\{ \{selectVal\}\}

<hr>

<br>

\{ \{textareaVal\}\}</div>

*/\*\**

*     \* v-model:**只能在表单标签中使用**(input,select,textarea)*

*     \*/*

**new** Vue(\{

el: "\#app",

data: \{

inputVal:"我是杨杨我怕谁!",

checkboxVal:\["1","3"\],

radioVal:2,

selectVal:2,

textareaVal:"sdfsfd"

\})

</script>

</body></html>

## **v-show&v-if** ##

*  v-show用于展示和隐藏 <标签 v-show="true/false">
 *  v-if <标签 v-if="条件">...
 *  show只是隐藏标签,if直接就不会出现不满足条件的标签

### **v-show的案例代表** ###

*  最后的效果是有一个按钮，点一下显示图片，再点一下隐藏图片

**<!DOCTYPE html>**<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head>

<title>Title</title>

*<!--*

*        v-show:true(**显示**)/fales(**不显示**)*

*            **注**:**不显示（**style="display: none;"**）*

*    -->*

</div>

*/\*\**

*     \* v-model:**只能在表单标签中使用**(input,select,textarea)*

*     \*/*

**var** vue = **new** Vue(\{

el: "\#app",

data: \{

isShow:false

\})

**function** **showyishow**() \{

vue.isShow = !vue.isShow;

</script>

</body></html>

### **v-if的案例** ###

**<!DOCTYPE html>**<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head>

<title>Title</title>

*<!--*

*        if**：如果未满足条件，页面就直接** **没有这元素*

*            show:**元素存在，只在隐藏起来了*

*    -->*

未成年人禁止入内

</div>

客观请进，这里欢迎您

</div>

老神仙，不食人间烟火

</div>

*/\*\**

*     \* v-model:**只能在表单标签中使用**(input,select,textarea)*

*     \*/*

**var** vue = **new** Vue(\{

el: "\#app",

data: \{

age:10

\})

*// alert(0)*

*// vue.age = 89;*

</script>

</body></html>

## **v-on 事件绑定** ##

*  事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
 *  调用的方法可以不加()
 *  v-on有一种简写形式 <标签 @事件名=方法名>

**<!DOCTYPE html>**<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"><head>

<title>Title</title>

*<!--*

*        **这里的方法加不加括号都可以执行*

*        v-on:**事件名**="**方法名**()"*

*        @**事件名**="**方法名**()"*

*    -->*

<button v-on:click="say()">点我有惊喜...</button>

</div>

**var** vue = **new** Vue(\{

el: "\#app",

data: \{

name:"小明",

age:12

\},

methods:\{

say()\{

alert("点啊，你个瓜娃子！")

\},

hello(msg)\{

console.debug(**this**.name+"出来看:"\+msg);

\})

</script>

</body></html>

（本文由源码时代技术老师撰写，转载请注明出处）

源码时代Java干货分享|vue 指令基本使用大全，学完让你的工作效率提升百倍！

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关源码时代Java干货分享|vue 指令基本使用大全，学完让你的工作效率提升百倍！

相关工作效率提升工具分享

相关源码时代Java干货分享|Jvm优化指南

相关源码时代Java干货分享|带你了解原型模式_prototype

相关源码时代Java干货分享|手把手教你SpringBoot配置ssl证书

相关源码时代Java干货分享|带你认识Zookeeper 分布式服务框架

相关源码时代前端干货分享|Nuxt开发使用文档

相关源码时代干货分享|计算机概论和发展

相关源码时代WEB前端干货分享|带你领略vue不一样的风情

相关源码时代前端干货 | Webpack打包vue项目优化，让你工作效率提高10倍！