Vue.js 常用系统指令 - 蓝蓝设计_UI设计公司

帝皇彩票官网

Vue.js 常用系统指令

2020-2-28 释然 前端及开发文章及欣赏

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"  οnkeydοwn="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 οnmοuseοver="divmouseover()" id="div">
            <textarea οnmοuseοver="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" οnsubmit="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.js 常用系统指令

Powered by sitemap
大通彩票官网 博发彩票APP下载 北京赛车pk10赔率最高的平台 吉利彩票登陆 快赢彩票 贵州快3走势 诚信网投开户 大象彩票计划 江苏快3走势图 桔子彩票官网