VueJS 常用系统指令

v-on

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

1.0v-on:click

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>事件处理 v-on示例1</title>
   <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
   <div id="app">
   {{message}}
   <button v-on:click="fun1('good')">点击改变</button>
   </div>
   <script>
   new Vue({
      el:'#app', //表示当前vue对象接管了div区域
      data:{
         message:'hello world' //注意不要写分号结尾
      },
      methods:{
         fun1:function(msg){
             this.message=msg;
         }
      }
   });
   </script>
</body>
</html>

1.1v-on:keydown

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>事件处理 v-on示例2</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-on:keydown="fun2('good',$event)">
</div>
<script>
    new Vue({
        el: '#app', //表示当前vue对象接管了div区域
        methods: {
            fun2: function (msg, event) {
                if (!((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 8 || event.keyCode == 46)) {
                    event.preventDefault();
                }
            }
        }
    });
</script>
</body>
</html>

1.2v-on:mouseover

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>事件处理 v-on示例3</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <div v-on:mouseover="fun1" id="div">
            <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
        </div>
    </div>
    <script>
        new Vue({
            el : '#app', //表示当前vue对象接管了div区域
            methods : {
                fun1 : function() {
                    alert("div");
                },
                fun2 : function(event) {
                    alert("textarea");
                    event.stopPropagation();//阻止冒泡
                }
            }
        });
    </script>
</body>
</html>

事件修饰符

扫描二维码关注公众号，回复： 6238032 查看本文章

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或event.stopPropagation()

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

.stop

.prevent

.capture

.self

.once

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on 事件修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <form @submit.prevent action="http://www.itcast.cn" method="get">
            <input type="submit" value="提交" />
        </form>
        <div @click="fun1">
            <a @click.stop href="http://www.itcast.cn">itcast</a>
        </div>
    </div>
    <script>
        new Vue({
            el : '#app', //表示当前vue对象接管了div区域
            methods : {
                fun1 : function() {
                    alert("hello itcast");
                }
            }
        });
    </script>
</body>
</html>

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

全部的按键别名：

.enter

.tab

.delete (捕获 "删除" 和 "退格" 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on 按钮修饰符</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-on:keyup.enter="fun1">
    </div>
    <script>
        new Vue({
            el : '#app', //表示当前vue对象接管了div区域
            methods : {
                fun1 : function() {
                    alert("你按了回车");
                }
            }
        });
    </script>
</body>
</html>

<div @click.ctrl="doSomething">Do something</div>

v-on简写方式



<a v-on:click="doSomething">...</a>



<a @click="doSomething">...</a>

1.3v-text与v-html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-html与v-text</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>
    <script>
        new Vue({
            el : '#app', //表示当前vue对象接管了div区域
            data : {
                message : "<h1>世界你好</h1>"
            }
        });
    </script>
</body>
</html>

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>
        <hr>
        <a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a>
    </div>
    <script>
        new Vue({
            el : '#app', //表示当前vue对象接管了div区域
            data : {
                ys1 : "red",
                ys2 : "green",
                id : 1
            }
        });
    </script>
</body>
</html>

v-bind简写方式



<a v-bind:href="url">...</a>



<a :href="url">...</a>

1.4 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">
        姓名:<input type="text" id="username" v-model="user.username"><br>
        密码:<input type="password" id="password" v-model="user.password"><br>
        <input type="button" @click="fun" value="获取">
    </div>
    <script>
        new Vue({
            el : '#app', //表示当前vue对象接管了div区域
            data : {
                user : {
                    username : "",
                    password : ""
                }
            },
            methods : {
                fun : function() {
                    alert(this.user.username + " " + this.user.password);
                    this.user.username = "tom";
                    this.user.password = "11111111";
                }
            }
        });
    </script>
</body>
</html>

1.5 v-for

1.5.1 操作array

<!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">
        <ul>
            <li v-for="(item,index) in list">{{item+" "+index}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el : '#app', //表示当前vue对象接管了div区域
            data : {
                list : [ 1, 2, 3, 4, 5, 6 ]
            }
        });
    </script>
</body>
</html>

1.5.2 操作对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for示例1</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(value,key) in product">{{key}}--{{value}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el : '#app', //表示当前vue对象接管了div区域
            data : {
                product : {
                    id : 1,
                    pname : "电视机",
                    price : 6000
                }
            }
        });
    </script>
</body>
</html>

1.5.3 操作对象数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for示例1</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>
            </tr>
            <tr v-for="p in products">
                <td>{{p.id}}</td>
                <td>{{p.pname}}</td>
                <td>{{p.price}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el : '#app', //表示当前vue对象接管了div区域
            data : {
                products : [ {
                    id : 1,
                    pname : "电视机",
                    price : 6000
                }, {
                    id : 2,
                    pname : "电冰箱",
                    price : 8000
                }, {
                    id : 3,
                    pname : "电风扇",
                    price : 600
                } ]
            }
        });
    </script>
</body>
</html>

2.6 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">hello Wordl!</span>
        <button @click="toggle">切换</button>
    </div>
    <script>
        new Vue({
            el : '#app', //表示当前vue对象接管了div区域
            data : {
                flag : false
            },
            methods : {
                toggle : function() {
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>
</html>

VueJS 常用系统指令

猜你喜欢