文档章节

Vue.js 的指令与事件

Mr_ET
 Mr_ET
发布于 10/12 01:01
字数 1000
阅读 7
收藏 0

一、指令与事件

        指令(Directives)是 Vue.js 模板中最常见的一项功能,它带有前缀 v- ,比如 v-if、v-html、v-pre 等。指令的主要指责就是当其表达式的值改变时,相应地将某些行为应用到 DOM 上,以 v-if 为例:

<div id="app">
    <p v-if="show">显示这段文本</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: ture
        }
    })
</script>

        当数据 show 的值为 true 时,p 元素会被插入,为 false 时则会被移除。数据驱动 DOM 是 Vue.js 的核心理念,不到万不得已时不要主动操作 DOM ,只需要维护好数据,DOM 的事 Vue 会帮你优雅的处理。

        Vue.js 内置了很多指令,帮助我们快速完成常见的 DOM 的操作,比如循环渲染、显示与隐藏等。比如,v-bind 和 v-on 。

        v-bind 的基本用途是动态更新 HTML 元素上的属性,比如 id,class 等。例如:

<div id="app">
    <a v-bind:href="url">链接</a>
    <img v-bind:src="imgUrl">
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            url: 'https://www.github.com',
            imgUrl: '/img.jpg'
        }
    })
</script>

        上述例子中的链接地址与图片的地址都与数据进行了绑定,当通过各种方式改变数据时,链接和图片都会自动更新。

        另一个非常重要的指令就是 v-on ,它用来绑定事件监听器,这样我们就可以做一些交互了。例如:

<div id="app">
    <p v-if="show">Vue v-if指令</p>
    <button v-on:click="handleClose">隐藏/显示</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClose: function () {
                this.show = false;
            }
        }
    })
</script>

        在 button 按钮上,使用 v-on:click 给该元素绑定了一个点击事件,在普通元素上,v-on 可以监听原生的 DOM 事件,除了 click 外,还有 dblclick、keyup、mousemove 等。表达式可以是一个方法名,这些方法都写在 Vue 实例的 methods 属性内,并且是函数的形式,函数内的 this 指向的是当前 Vue 实例本身,因此可以直接使用 this.XXX 的形式来访问或修改数据,如示例中的 this.show = false;把数据 show 修改为了 false,所以点击按钮时,文本 p 元素就被移除了。

        表达式除了方法名,也可以直接是一个内联语句,上例也可以改写为:

    <div id="app">
        <p v-if="show">Vue v-if指令</p>
        <button v-on:click="show = false">隐藏/显示</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                show: true
            }
        })
    </script>

        如果绑定的事件要处理复杂的业务逻辑,还是在 methods 里声明一个方法,这样而可读性更强也好维护。Vue.js 将 methods 里的方法也代理了,所以也可以像访问 Vue 数据那样来调用方法:

<div id="app">
    <p v-if="show">Vue v-if指令</p>
    <button v-on:click="handleClose">隐藏/显示</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClose: function () {
                this.close();
            },
            close: function () {
                this.show = false;
            }
        }
    })
</script>

        在 handleClose 方法内,直接通过 this.clolse() 调用了 close() 函数,也可以在 Vue 实例外部调用:

 

<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
          init: function (text) {
              console.log(text);
          }
        },
        mounted: function () {
            this.init('在初始化调用');      // 在初始化时调用
        }
    });

    app.init('在 Vue 实例外部调用');        // 在 Vue 实例外部调用

</script>

二、语法糖

        语法糖是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发。

        Vue.js 的 v-bind 和 v-on 指令都提供了语法糖,也可以说时缩写,比如 v-bind,可以省略 v-bind,直接写一个冒号 “ : ”  :

    <a v-bind:href="url">链接</a>
    <img v-bind:src="/imgUrl">
    <!-- 缩写为 -->
    <a :href="url">链接</a>
    <img :src="imgUrl">

        v-on 可以直接用 “ @ ” 来缩写:

    <button v-on:click="handleClose">隐藏/显示</button>
    <!-- 缩写为 -->
    <button @:click="handleClose">隐藏/显示</button>

        使用语法糖可以简化代码的书写。

 

 

© 著作权归作者所有

共有 人打赏支持
Mr_ET
粉丝 30
博文 99
码字总数 140407
作品 0
朝阳
高级程序员
私信 提问
Vue 入门之项目目录结构介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

code_xzh
05/20
0
0
前端与移动开发之vue-day1(2)

Vue指令之v-on的缩写和事件修饰符事件修饰符: .stop 阻止冒泡 .prevent 阻止默认事件 .capture 添加事件侦听器时使用事件捕获模式 .self 只当事件在该元素本身(比如不是子元素)触发时触发...

czbkzmj
11/14
0
0
Vue.js入门之工程目录介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

异步社区
05/22
0
0
小程序和Vue关于绑定数据书写上的区别

一、书写格式上 1、绑定事件 Vue: 小程序: Vue是通过:事件名字='回调函数名'。 小程序以或开头,后面跟着事件类型,例如、。自基础库版本1.5.0起,和后可以紧跟一个冒号,其含义不变,如。...

fenerchen
06/02
0
0
.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现...

依乐祝
11/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

中国龙-扬科
27分钟前
2
0
使用vuex的state状态对象的5种方式

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。 下面给大家来贴一下我的vuex的结构 下面是store文件夹下的state.js和index.js内容 //state.jsconst state =...

peakedness丶
31分钟前
2
0
NetCore MVC Demo

地址:http://114.116.9.72:5411

whltian
38分钟前
1
0
Netty handle方法周期 (四)

写了一个练习之后,发现自定义的助手类每次肯定是必须的,对于不同的业务逻辑需求,会写相对应的逻辑 最简单的查看Handle生命周期的方式,就是重写上级方法,看名字差不多应该可以知道方法的作用 ...

_大侠__
43分钟前
9
0
vue主动刷新页面及列表数据删除后的刷新实例

1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者...

前端小攻略
53分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部