首页

Vue.js 常用系统指令

seo达人

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>


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档