前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >VueJS 常用系统指令

VueJS 常用系统指令

作者头像
cwl_java
发布2019-12-25 11:29:35
1.2K0
发布2019-12-25 11:29:35
举报
文章被收录于专栏:cwl_Java

2.1 v-on

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

2.1.1 v-on:click

代码语言:javascript
复制
<!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
代码语言:javascript
复制
<!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
代码语言:javascript
复制
<!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
代码语言:javascript
复制
<!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
代码语言:javascript
复制
<!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>
代码语言:javascript
复制
<p>
    <!-- Alt + C --> 
    <input @keyup.alt.67="clear"> 
    <!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
v-on简写方式
代码语言:javascript
复制
    <!-- 完整语法 --> 
    <a v-on:click="doSomething">...</a> 
    <!-- 缩写 --> 
    <a @click="doSomething">...</a>
2.2 v-text与v-html
代码语言:javascript
复制
<!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指令

代码语言:javascript
复制
<!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简写方式
代码语言:javascript
复制
<!-- 完整语法 --> 
<a v-bind:href="url">...</a> 
<!-- 缩写 --> 
<a :href="url">...</a>
2.4 v-model
代码语言:javascript
复制
<!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

代码语言:javascript
复制
<!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>

操作对象

代码语言:javascript
复制
<!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>

操作对象数组

代码语言:javascript
复制
<!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属性

代码语言:javascript
复制
<!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>
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 2.1 v-on
  • 2.1.1 v-on:click
    • 2.1.2 v-on:keydown
      • 2.1.3 v-on:mouseover
        • 2.1.4 事件修饰符
          • 2.1.5 按键修饰符
            • v-on简写方式
              • 2.2 v-text与v-html
                • 2.3 v-bind
                  • v-bind简写方式
                    • 2.4 v-model
                      • 2.5 v-for
                        • 2.6 v-if与v-show
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档