Vue.js 常用系统指令

1.v-on ：可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码（1）v-on:click绑定点击事件<!DOCTYPE html><html><head><meta charset="utf-8" /><title>v-on:click</ti...

SZH勿忘初心

2876人浏览 · 2020-02-28 10:04:52

SZH勿忘初心 · 2020-02-28 10:04:52 发布

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

（1）v-on:click绑定点击事件

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-on:click</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         {{message}}  
         <button v-on:click="fun1('test')">vue的onclick</button>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:'#app',
         data:{
             message:'hello vue'
         },
         methods:{
             fun1:function (msg) {
               this.message=msg;
                }
         }
      });
      
   </script>
</html>

(2)v-on:keydown事件会在用户按下一个键盘按键时发生

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-on:keydown</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         Vue:<input type="text" v-on:keydown="fun($event)">
         <hr/>
         传统JS：<input type="text"  onkeydown="showKeyCode()"/>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",
         methods:{
             /* $event 它是vue中的事件对象  和我们传统js的event对象是一样的  */
             fun:function(event){
                    var keyCode = event.keyCode;
                    if(keyCode < 48  || keyCode > 57){
                        //不让键盘的按键起作用
                        event.preventDefault();
                    }
            }
         }
      });


      //传统js的键盘按下事件
      function showKeyCode(){
         //event对象和我们的document对象以及window对象是一样的，可以不用定义直接使用
         var keyCode = event.keyCode;
         if(keyCode < 48  || keyCode > 57){
            //不让键盘的按键起作用
            event.preventDefault();
         }
         // alert(keyCode);
         // if(event.keyCode == 13){
         //     alert("你按的是回车");
         // }
      }
   </script>

</html>

（3）v-on:mouseover 当鼠标指针位于元素上方时,会发生 mouseover 事件

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-on:mouseover</title>
      <style>
         #div {
            background-color: red;
            width:300px;
            height:300px;
         }
      </style>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <div @mouseover="fun1" id="div">
            <textarea @mouseover="fun2($event)">这是一个文件域</textarea>
         </div>

         <!--<div onmouseover="divmouseover()" id="div">
            <textarea onmouseover="textareamouseover()">这是一个文件域</textarea>
         </div>-->
      </div>
   </body>
   <script>
      //view model
        /**
       * @事件名称  就是  v-on:事件名称的简写方式
       * @mouseover它就等同于v-on:mouseover
         */
      new Vue({
         el:"#app",
         methods:{
            fun1:function(){
                alert("鼠标悬停在div上了");
            },
            fun2:function(event){
                alert("鼠标悬停在textarea上了");
                    event.stopPropagation();
            }
         }
      });


      //传统的js方式
      function divmouseover(){
          alert("鼠标移动到了div上了");
      }

      function textareamouseover(){
          alert("鼠标移动到了textarea上了");
          event.stopPropagation();
      }
   </script>

</html>

(4).Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。注意:该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)

Vue.js 通过由点 (.) 表示的指令后缀来调用修饰符。

.stop

.prevent

.capture

.self

.once

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-on:事件修饰符</title>
      <style>
         #div {
            background-color: red;
            width:300px;
            height:300px;
         }
      </style>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <form @submit.prevent action="http://www.itheima.com" method="post" >
            <input type="submit" value="提交">
         </form>
         <!--<form action="http://www.itheima.com" method="post" onsubmit="return checkForm()">
            <input type="submit" value="提交">
         </form>-->
         <hr/>
         <div @mouseover="fun1" id="div">
            <textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
         </div>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",
         methods:{
                fun1:function(){
                    alert("鼠标悬停在div上了");
                },
                fun2:function(event){
                    alert("鼠标悬停在textarea上了");
                }
         }
      });
      
      
      //传统js方式
      function checkForm(){
          alert(1);
          //表单验证必须有一个明确的boolean类型返回值
         //在应用验证方法时必须加上 return  方法名称
         return false;
      }
   </script>

</html>

2.v-text与v-html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-text与v-html</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         <div v-text="message"></div>
         <div v-html="message"></div>
         <!--<div id="div1"></div>
         <div id="div2"></div>-->
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",
         data:{
             message:"<h1>Hello Vue</h1>"
         }
      });

      //传统js的innerText和innerHTML
      window.onload = function(){
          document.getElementById("div1").innerHTML="<h1>Hello</h1>";
            document.getElementById("div2").innerText="<h1>Hello</h1>";
      }
   </script>
</html>

（2）v-bind 插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-bind的使用</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <font size="5" v-bind:color="ys1">传智播客</font>
         <font size="5" :color="ys2">黑马程序员</font>
      </div>
   </body>
   <script>
      //view model
      //插值表达式不能用于html标签的属性取值
      //要想给html标签的属性设置变量的值，需要使用v-bind
      //v-bind也可以简化写法   直接使用:
      new Vue({
         el:"#app",
         data:{
             ys1:"red",
            ys2:"green"
         }
      })
   </script>

</html>

（3）v-model

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-model</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         <form action="" method="post">
            用户名：<input type="text" name="username" v-model="user.username"><br/>
            密码：<input type="text" name="password" v-model="user.password"><br/>
            <!-- v-model替换原来的value属性的值，用value获取不到-->
         </form>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",
         data:{
            user:{
                username:"test",
               password:"1234"
            }
         }
      })
   </script>
</html>

（4）v-for

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-for遍历数组</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         <ul>
            <li v-for="(item,index) in arr ">{{item}}={{index}} </li>
            <!--index是索引的意思，用插值表达式输出 -->
         </ul>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",
         data:{
             arr:[1,2,3,4,5]
         }
      })
   </script>
</html>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-for遍历对象</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         <ul>
            <li v-for="(key,value) in product ">{{value}}===={{key}} </li>
         </ul>
      </div>
   </body>
   <script>
      //view model
        new Vue({
            el:"#app",
            data:{
               product:{
                   id:1,
               name:"笔记本电脑",
               price:5000
            }
            }
        })
   </script>
</html>

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <title>v-for遍历对象</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>

   <body>
      <div id="app">
         <table border="1">
            <tr>
               <td>序号</td>
               <td>编号</td>
               <td>名称</td>
               <td>价格</td>
            </tr>
            <tr v-for="(product,index) in products ">
               <td>{{index}}</td>
               <td>{{product.id}}</td>
               <td>{{product.name}}</td>
               <td>{{product.price}}</td>
            </tr>
         </table>
      </div>
   </body>
   <script>
      //view model
        new Vue({
            el:"#app",
            data:{
                products:[
                   { id:1,name:"笔记本电脑",price:5000 },
                    { id:2,name:"手机",price:3000 },
                    { id:3,name:"电视",price:4000 }
                ]
            }
        })
   </script>

</html>

3.v-if与v-show

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

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-if与v-show</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         <span v-if="flag">传智播客</span>
         <span v-show="flag">itcast</span>
         <button @click="toggle">切换</button>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",
         data:{
             flag:false
         },
         methods:{
             toggle:function(){
                 this.flag = !this.flag;
            }
         }
      })
   </script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^