专栏首页cwl_JavaVueJS 常用系统指令

VueJS 常用系统指令

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端基础-Vue.js模板语法(指令)

    指令 (Directives) 是带有 v- 前缀的特殊 特性 相当于自定义html属性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是...

    cwl_java
  • 前端基础-Vue.js模板语法(插值)

    我们在前面的代码中,使用 {{}} 的形式在 html 中获取实例对象对象中 data 的属性值;

    cwl_java
  • 前端基础-Vue.js组件

    https://cn.vuejs.org/v2/guide/components.html

    cwl_java
  • VUE.js高级

    首先先更正一下昨天发送内容的错误之处,对你造成的影响深表歉意。对照昨天的文章:ajax和vue.js(此处连接方便大家查看对照)中第6部分vue的事件与函数中,...

    小闫同学啊
  • jDate移动端用法

    前面写过选择年月日的方法,其实也可以用在移动端,样式也还算可以,用法与pc端类似;

    祈澈菇凉
  • 【译】停止滥用div! HTML语义化介绍

    我们喜欢(使用)<div>标签。它们已经存在了几十年,这几十年来,当需要将一些内容包裹起来达到(添加)样式或者布局目的的时候,它们成为首选元素。查看线上站点时,...

    嘉明
  • React之JSX语法

    如果要使用JSX,需要得到语法的支持,你可以使用Babel来进行转换。在该篇文章当中直接引入Babel文件。 将上一篇文章的“你好,世界”拿过来看一下:

    用户1272076
  • 可视化-bokeh-02-Django中部署

    系统:Windows 7 语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3....

    zishendianxia
  • 前端基础-Vue.js模板语法(指令)

    指令 (Directives) 是带有 v- 前缀的特殊 特性 相当于自定义html属性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是...

    cwl_java
  • Vue.js模板方法

    俞其荣

扫码关注云+社区

领取腾讯云代金券