文档章节

Vue.js 的指令与事件

Mr_ET
 Mr_ET
发布于 10/12 01:01
字数 1000
阅读 4
收藏 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
粉丝 29
博文 98
码字总数 136981
作品 0
朝阳
高级程序员
Vue 全站缓存之 vue-router-then :前后页数据传递

连续预告了好几天,总算写到这篇了。 系列篇1:Vue 全站缓存之 keep-alive : 动态移除缓存 系列篇2:Vue 全站缓存二:如何设计全站缓存 本篇为系列篇3:Vue 全站缓存之 vue-router-then :前...

wanyaxing
08/02
0
0
前端框架之Vue.js 库的使用

vue.js简介 Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。 Vue.js可以作为一个js库来使用,也可以用...

玄学酱
06/22
0
0
Vue + ElementUI 后台管理系统项目心得(二)

此篇是关于 Vue 的总结。Js 的总结请见前一篇:Vue + ElementUI 后台管理系统项目心得(一) 话说过完年回来,仿佛一夜之间身边的人都在谈论 Vue,相关的组件也如雨后春笋一般涌现出来,比如...

OSIMLY
2017/03/27
0
0
Vue 实战 (一) -- Vue 基础总结

Vue作为一个前端轻量级的MVVM框架有其独到之处,本文主要针对Vue1.0版本的官方文档进行梳理总结,主要包括以下几个方面: 1.数据绑定 2.指令 3.组件 4.事件 5.过滤器 Vue基础 Vue实例 构造器 通...

小和子茶
07/17
0
0
Vue 入门之项目目录结构介绍

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

code_xzh
05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HashTable

Hashtable 是一个散列表,它存储的内容是键值对(key-value)映射 Hashtable 继承于Dictionary,实现了Map、Cloneable、java.io.Serializable接口 Hashtable 的函数都是同步的,这意味着它是线...

职业搬砖20年
3分钟前
0
0
Linux系统状态查看命令1

10月23日任务 10.1 使用w查看系统负载 10.2 vmstat命令 10.3 top命令 10.4 sar命令 10.5 nload命令 查看系统负载 w命令 # 第一行:当前系统时间,系统启动时间,登录的用户,系统负载:1分钟...

robertt15
18分钟前
0
0
缓存那些事

前言 一般而言,现在互联网应用(网站或App)的整体流程,可以概括如图1所示,用户请求从界面(浏览器或App界面)到网络转发、应用服务再到存储(数据库或文件系统),然后返回到界面呈现内容...

Skqing
27分钟前
0
0
nginx开启stub_status模块配置方法

nginx开启stub_status模块配置方法 2017年12月13日 15:57:29 ly_dengle 阅读数:3765 标签: stub_statusnginxnginx开启stub_status模块 更多 个人分类: 软件工具php 版权声明:本文为博主原...

linjin200
34分钟前
3
0
挑逗 Java 程序员的那些 Scala 绝技

有个问题一直困扰着 Scala 社区,为什么一些 Java 开发者将 Scala 捧到了天上,认为它是来自上帝之吻的完美语言;而另外一些 Java 开发者却对它望而却步,认为它过于复杂而难以理解。同样是 ...

joymufeng
37分钟前
94
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部