zoukankan      html  css  js  c++  java
  • Vue 2.0学习(三)指令与事件

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

    v-if

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

      当数据show的值为true时,p元素会被插入,为false时则会被移除。

    v-bind

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

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

    v-on

      v-on用来绑定时间监听器,做一些事件交互。

    <!-- html -->
    <div id="app">
        <p v-if="show">这是一段文本</p>
        <button v-on:click="handleClose">点击隐藏</button>
    </div>
    //JS
    var app = new Vue({
        el: '#app',
        data: {
            show:true
        },
        methods:{
            handleColse: function() {
                this.show = false;
            }
        }
    })

      在button按钮上,使用v-on:click给该元素绑定了一个点击事件,在普通元素上,v-on可以监听原生的DOM事件,除了click外,还有dblclick、keyup、mousemove等。

      表达式除了方法名,也可以直接是一个内联语句。

    <!-- html -->
    <div id="app">
        <p v-if="show">这是一段文本</p>
        <button v-on:click="show = false">点击隐藏</button>
    </div>
    //JS
    var app = new Vue({
        el: '#app',
        data: {
            show:true
        }
    })

      如果绑定的事件要处理复杂的业务逻辑,建议还是在methods里声明一个方法,这样可读性更强也更好维护。

      Vue.js将methods里的方法也代理了,所以也可以像访问Vue数据那样来调用方法。

    //JS
    var app = new Vue({
        el: '#app',
        data: {
            show:true
        },
        methods:{
            handleColse: function() {
                this.close();
            },
            close: function(){
                this.show = false;
            }
        }
    })

    语法糖

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

      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>
  • 相关阅读:
    PCA (主成分分析)详解 (写给初学者) 结合matlab(转载)
    解释一下核主成分分析(Kernel Principal Component Analysis, KPCA)的公式推导过程(转载)
    主成分分析(PCA)原理详解(转载)
    神经网络的6种有监督训练算法
    PyCharm下载与激活
    matlab中元胞数组的创建与内容读取
    创新式开发探索(四) —— 探索式学习
    耐心,细心,贴心,静心
    使用 JsPlumb 绘制拓扑图的通用方法
    使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法
  • 原文地址:https://www.cnblogs.com/weilan/p/9355203.html
Copyright © 2011-2022 走看看