Vue中v-on的指令以及一些其他指令

1.v-on的基本使用

<div id="app">
    <!-- 使用事件绑定的简写形式 -->
    <input type="button" value="按钮" v-on:click="btn">
</div>
<script>
    var vm = new Vue({
        el: ‘#app‘,        //methods是用来专门存放vue的处理方法的
        methods: {
            btn: function () {
                alert(‘123‘);
            }
        }
    });
</script>

我们在的的时侯v-on是可以缩写成@的,例如上边的可以缩写成:@:chick="btn"。

在Vue中,其他的事件都可以用v-on绑定

2.事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。

为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。

使用修饰符 阻止浏览器的默认行为

<div id="app">
    <a href="http://www.qq.com"  v-on:click.prevent="btn">腾讯</a>
</div>
<script>
    var vm = new Vue({
        el: ‘#app‘,
        methods: {
            btn: function () {
                alert(‘123‘);
            }
        }
    });
</script>

  使用修饰符绑定一次性事件

<div id="app">
    <a href="http://www.qq.com" v-on:click.once="btn($event)">腾讯</a>
</div>
<script>
    var vm = new Vue({
        el: ‘#app‘,
        methods: {
              btn: function (ev) {
                ev.preventDefault();
                alert(‘123‘);
            }
        }
    });
</script>

$event是原始的DOM事件:有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:

   按键修饰符:绑定键盘抬起事件,但是只有enter 键能触发此事件

<div id="app">
    <input type="text"  v-on:keyup.enter="keyup">
</div>
<script>
    var vm = new Vue({
        el: ‘#app‘,
        methods: {
            keyup:function(){
                console.log(‘111‘)
            }
        }
    });
</script>

鼠标修饰符:鼠标左键触发事件

<div id="app">
    <input type="button" value="按钮" v-on:click.left="btn">
</div>
<script>
    var vm = new Vue({
        el: ‘#app‘,
        methods: {
           btn:()=>{
                console.log(‘111‘)
            }
        }
    });
</script>

为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:

  1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
  2. 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

3.当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。

3.v-show的指令:

<body>
    <div id="app">
        <input type="button" value="按钮" v-on:click="change">
        <p v-show="is_show">秀儿,是你吗</p>
    </div>
</body>
<script>
    var app = new Vue({
        el: ‘#app‘,
        data: {
            is_show: false,
        },
        methods: {
            change: function () {
                this.is_show = !this.is_show;
            }
        }
    });

</script>

4.v-if的指令:

<body>
    <div id="app">
        <input type="text"  id="" v-model="type">
        <div v-if="type === ‘A‘">我是A</div>
        <div v-else-if="type === ‘B‘">我是B</div>
        <div v-else-if="type === ‘C‘">我是C</div>
        <div v-else-if="type === ‘D‘">我是D</div>
        <div v-else>我什么也不是</div>
    </div>
</body>
<script>
    var app = new Vue({
        el:‘#app‘,
        data:{
            type:‘‘
        }
    });

</script>

5.v-for的指令:

<body>
    <div id="app">
        <!-- 数组 -->
        <ul>
            <!-- v-for 循环的语法规则可以参考 js 的 for in 循环 -->
            <li v-for="(v,key) in arr">{{v}}---{{key}}</li>
        </ul>
        <!-- 对象 -->
        <ul>
            <li v-for="(v,k) in oop">{{v}}----{{k}}</li>
        </ul>

    </div>
</body>
<script>
    // for(cc in arr)
    var app = new Vue({
        el:‘#app‘,
        data:{
            arr:[‘ff‘,‘hh‘,‘jj‘,‘gg‘,‘ll‘],

            oop:{name:‘张三‘,age:30,sex:‘男‘}
        }
    });
</script>

6.v-once:的指令:

<body>
    <div id="app">
        <!-- 只渲染一次数据 不再是数据单项绑定  这是单次绑定 -->
        <p v-once>{{msg}}</p>
    </div>
</body>
<script>
    var app = new Vue({
        el:‘#app‘,
        data:{
            msg:‘123‘
        }
    });

</script>

原文地址:https://www.cnblogs.com/shineguang/p/10884324.html

时间: 2024-10-04 15:32:30

Vue中v-on的指令以及一些其他指令的相关文章

vue中常见的指令

1,差值表达式{{}} 1 <p >{{ msg }}</p> 2.v-cloak解决差值表达式闪烁的问题 <p v-cloak>{{ msg }}</p> 3.v-text是没有闪烁问题的. 1 <h4 v-text="msg"></h4>//注意:v-text会覆盖元素中的原本的内容,差值表达式只会替换自己的这个占位符 3 <h4 v-text="msg">=======<

vue中自定义指令

在vue中自定义标签,首先要调用vue中一个directive的方法,具体方法:Vue.direction('指令名称',function(){ }); 例如我们要写一个关于颜色的指令,叫v-colorred: 1 Vue.directive('colorred',function(){ 2 3 this.el.style.color='red'; 4 }); 在html中,我直接用v-colorred指令就可以了,例如: 1 <p v-colorred>1234567890</p>

第二章 Vue快速入门--9 使用v-on指令定义Vue中的事件

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8

手写vue中v-bind:style效果的自定义指令

自定义指令 什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到自定义指令. 自定义指令的语法 全局自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时-- inserted: function (el) { // 聚焦元素 el.focus() } }) 局部自

横冲直撞vue(第三篇):vue中template的三种写法、v-bind、v-on、更新元素的指令v-text与v-html、条件渲染指令v-if 与v-show、v-for

一.vue中template的三种写法 第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <body> <div id="app"></div> <script src="./lib/vue.js"></script> <script type="text/javascript&qu

Vue 中的 v - if 和 v - show + v-for

v-if   v-show v-if是动态的向DOM树内添加或者删除DOM元素: v-if和v-show 都可以控制显示隐藏 v-if 它是没有加载DOM结构 可以叫做惰性加载 <div id="app"><h1 v-if='true'>{{msg1}}</h1> <span>显示</span> <br><h1 v-if='false'>{{msg2}}</h1> <span>不

横冲直撞vue(第四篇):v-model、指令系统总结、指令系统示例轮播图实现、指令系统示例跑马灯效果实现、在vue中使用样式的方式

一. v-model v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素. 尽管有些神奇,但v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 元素使用 value 属性和 input 事件: checkbox

理解Vue中的Render渲染函数

VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现如下html: <div id="container"> <h1> <a href="#"> Hello world! </a> </h1> </div> 我们会如下使用: <!DOCTYPE html> <html

vue中的vue-cli

在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 npm install -g cnpm –registry=https://registry.npm.taobao.org 这个命令行,安装,安装之后检查cnpm的版本 cnpm -v 之后创建项目文件进入项目文件中,在comd中下载vue-cli cnpm install vue-cli -g --s