2.1 v-on

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

2.1.1 v-on:click

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<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>

2.1.2 v-on:keydown

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<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>

2.1.3 v-on:mouseover

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<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>

2.1.4 事件修饰符

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.baidu.com" 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>

2.1.5 按键修饰符

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

全部的按键别名：


  • .enter
  • .tab
  • .delete (捕获 “删除” 和 “退格” 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<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>
<p>
    <!-- Alt + C --> 
    <input @keyup.alt.67="clear"> 
    <!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

v-on简写方式

<!-- 完整语法 --> 
    <a v-on:click="doSomething">...</a> 
    <!-- 缩写 --> 
    <a @click="doSomething">...</a>

2.2 v-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>cwl</h1>"}
    }); 
</script>
</body>
</html>

2.3 v-bind

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

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<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">CWL</font> <font size="5" :color="ys2">cwl</font>
    <hr>
    <a v-bind={href:"http://www.baidu.com"+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>

2.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>

2.5 v-for

​操作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>

​操作对象​

<!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>

​操作对象数组​

<!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">CWL</span> <span v-show="flag">itcast</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>
}