【Vue 学习】- VueJS 常用系统指令

太过爱你忘了你带给我的痛 2021-09-21 00:56 668阅读 0赞

目录

1 v-on 指令

1.1 v-on:click

1.2 v-on:keydown

1.3 v-on:mouseover

1.4 事件修饰符

1.5 按键修饰符

2 v-text 、v-html、v-blind

2.1 v-text 与 v-html

2.2 v-blind

3 v-model

4 v-for

4.1 遍历数组

4.2 遍历对象

4.3 遍历对象数组

5 v-if 与 v-show

1 v-on 指令

v-on 指令用来监听 DOM 事件，并在触发时运行一些 JavaScript 代码

1.1 v-on:click

v-on:click 是用来点击事件的指令，可以和 button 标签一起使用，看一下案例：

  • 使用v-on:click绑定fun函数

  • 通过 methods 方法编写方法体

    <!DOCTYPE html>




    v-on:click




    {
    {message}}




点击后message的值改变20191221161504380.png20191221161511969.png

1.2 v-on:keydown

v-on:keydown 指令表示键盘按下事件，这里做一个案例：让键盘只有按下 0~9 才有效，其他按键均无效

  • 创建text，用来键盘输入显示，绑定函数并传入 event 参数

  • 创建方法体

    <!DOCTYPE html>





    v-on:keydown










只有在text中输入 0~9 数字才生效2019122116543985.png

1.3 v-on:mouseover

v-on:mouseover 指令表示鼠标移动到某个文件域事件，案例：在一个文件域上模拟鼠标移动和阻止事件传播

  • 在div上创建一个textarea区域

  • 设置鼠标悬停事件

    <!DOCTYPE html>




    v-on:mouseover












watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 1

1.4 事件修饰符

在 Vue.js 中，提供了事件修饰符来处理 DOM 事件细节，通过由点(.)表示的指令后缀来调用修饰符，常用的事件如下：

  • .stop：触发停止事件
  • .prevent：触发阻止事件
  • .capture：捕获事件
  • .self：触发自己的事件
  • .once：只执行一次事件

这里演示 prevent 阻止事件，先创建提交到百度的表单，然后阻止其跳转

  1. <!DOCTYPE html>
  2. <html xmlns:v-on="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>v-on:事件修饰符</title>
  6.         <script src="js/vuejs-2.5.16.js"></script>
  7.     </head>
  9.     <body>
  10.         <div id="app">
  11.             <form v-on:submit.prevent action="http://www.baidu.com" method="get">
  12.                 <input type="submit" value="提交">
  13.             </form>
  14.         </div>
  15.     </body>
  17.     <script>
  18.         //view model
  19.         new Vue({
  20.             el:"#app"
  21.         });
  22.     </script>
  23. </html>

1.5 按键修饰符

按键修饰符是获取按下键盘的事件，Vue 允许为 v-on 在监听键盘事件时添加按键修饰符，全部的按键别名如下：

  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta

以 .enter 为例

  1. <!DOCTYPE html>
  2. <html xmlns:v-on="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>v-on:按键修饰符</title>
  7.         <script src="js/vuejs-2.5.16.js"></script>
  8.     </head>
  10.     <body>
  11.         <div id="app">
  12.             <input type="text" v-on:keydown.enter="fun($event)">
  13.         </div>
  14.     </body>
  15.     <script>
  16.         //view model
  17.         new Vue({
  18.             el:"#app",
  19.             methods:{
  20.                 fun:function () {
  21.                     alert("按下了enter键")
  22.                 }
  23.             }
  24.         });
  25.     </script>
  26. </html>

2 v-text 、v-html、v-blind

2.1 v-text 与 v-html

  • v-text：显示原文本

  • v-html：以标签内容显示

    <!DOCTYPE html>




    v-text与v-html









20191222173350228.png

2.2 v-blind

在前面使用插值表达式的时候，都是在标签内部写插值表达式，如果要给标签的属性赋值，绑定插值表达式，那就要用到 v-blind 指令

来看案例：在设置HTML文本字体颜色的时候，可以使用 v-blind 来绑定颜色

  1. <!DOCTYPE html>
  2. <html xmlns:v-bind="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>v-blind</title>
  6.         <script src="js/vuejs-2.5.16.js"></script>
  7.     </head>
  9.     <body>
  10.         <div id="app">
  11.             <font size="5" v-bind:color="ys1">派大星</font>
  12.             <font size="5" :color="ys2">海绵宝宝</font>
  13.         </div>
  14.     </body>
  15.     <script>
  16.         //view model
  17.         new Vue({
  18.            el:"#app",
  19.            data:{
  20.                ys1:"red",
  21.                ys2:"green",
  22.            }
  23.         });
  24.     </script>
  25. </html>

3 v-model

可以使用 v-model 指令给 value 属性赋值，比如给 form 表单中的 value 赋值：

  1. <!DOCTYPE html>
  2. <html xmlns:v-model="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>v-model</title>
  6.         <script src="js/vuejs-2.5.16.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <form action="" method="post">
  11.                 用户：<input type="text" name="username" v-model="user.username"><br>
  12.                 密码：<input type="text" name="password" v-model="user.password"><br>
  13.             </form>
  14.         </div>
  15.     </body>
  16.     <script>
  17.         //view model
  18.         new Vue({
  19.             el:"#app",
  20.             data:{
  21.                 user:{
  22.                     username:"oneStar",
  23.                     password:"123"
  24.                 }
  25.             }
  26.         });
  27.     </script>
  28. </html>

20191224231054687.png

4 v-for

v-for 指令是用来循环遍历的，相当于 for 循环，这里演示遍历数组、遍历对象、遍历对象数组

4.1 遍历数组

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>v-for遍历数组</title>
  6.         <script src="js/vuejs-2.5.16.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <ul>
  11.                 <li v-for="(arr,index) in arrs">{
  12.    {arr +" : "+ index}}</li>
  13.             </ul>
  14.         </div>
  15.     </body>
  16.     <script>
  17.         //view model
  18.         new Vue({
  19.             el:"#app",
  20.             data:{
  21.                 arrs:[1,2,3,4]
  22.             }
  23.         });
  24.     </script>
  25. </html>

20191226221128231.png

4.2 遍历对象

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>v-for遍历对象</title>
  6.         <script src="js/vuejs-2.5.16.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <ul>
  11.                 <li v-for="(value,key) in person">{
  12.    {key + " : " + value}}</li>
  13.             </ul>
  14.         </div>
  15.     </body>
  16.     <script>
  17.         //view model
  18.         new Vue({
  19.             el:"#app",
  20.             data:{
  21.                 person:{
  22.                     name:"oneStar",
  23.                     age:18
  24.                 }
  25.             }
  26.         });
  27.     </script>
  28. </html>

20191226221157254.png

4.3 遍历对象数组

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>v-for遍历对象</title>
  6.         <script src="js/vuejs-2.5.16.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <table border="1">
  11.                 <tr>
  12.                     <td>序号</td>
  13.                     <td>姓名</td>
  14.                     <td>年龄</td>
  15.                 </tr>
  16.                 <tr v-for="(person,index) in persons">
  17.                     <td>{
  18.    {index}}</td>
  19.                     <td>{
  20.    {person.name}}</td>
  21.                     <td>{
  22.    {person.age}}</td>
  23.                 </tr>
  24.             </table>
  25.         </div>
  26.     </body>
  27.     <script>
  28.         //view model
  29.         new Vue({
  30.             el:"#app",
  31.             data:{
  32.                 persons:[
  33.                     {name:"oneStar",age:18},
  34.                     {name:"twoStar",age:19},
  35.                     {name:"threeStar",age:20}
  36.                 ]
  37.             }
  38.         });
  39.     </script>
  40. </html>

20191226221225567.png

5 v-if 与 v-show

  • v-if 是根据表达式的值来决定是否渲染元素

  • v-show是根据表达式的值来切换元素的display css属性

    <!DOCTYPE html>




    v-if与v-show




    派大星

    海绵宝宝





20191226234702304.png点击转换能将上面的文字影藏和显示

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L09uZV9MX1N0YXI_size_16_color_FFFFFF_t_70 2

发表评论

表情：
评论列表 （有 0 条评论，668人围观）

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

相关阅读

    相关 vue常用指令

    声明一： 这里列出的只是一些常用的指令，更多指令、更多细节可参考[vue中文官网][vue]。 声明二： 本文主要学习并整理自51CTO课程`《Vue.js 2.0之全家桶

    Bertha 。Bertha 。/ 0 赞/ 62 阅读