zoukankan      html  css  js  c++  java
  • VUE学习十二,模板语法,缩写

    Vue 为 v-bind 和 v-on 这两个最常用的指令,提供了特定简写:

    一、v-bind 缩写

        <!-- 完整语法 -->
        <a v-bind:href="url">单击我试试</a>
        <br/>
        <!-- 缩写 -->
        <a :href="url">单击我试试</a>
        <br/>
        <!-- 动态参数的缩写 (2.6.0+) -->
        <a :[key]="url">单击我试试</a>
        <br/>

    二、v-on 缩写

        <!-- 完整语法 -->
        <a v-on:click="doSomething">再单击试试</a>
        <br/>
        <!-- 缩写 -->
        <a @click="doSomething">再单击试试</a>
        <br/>
        <!-- 动态参数的缩写 (2.6.0+) -->
        <a @[event]="doSomething">再单击试试</a>
        <br/>

    三、全部代码如下

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>VUE简单示范</title>
    <script type="text/javascript" src="../js/vue.js" charset="utf-8"></script>
    </head>
    <body>
    <div id='app-12'>
        <!-- 完整语法 -->
        <a v-bind:href="url">单击我试试</a>
        <br/>
        <!-- 缩写 -->
        <a :href="url">单击我试试</a>
        <br/>
        <!-- 动态参数的缩写 (2.6.0+) -->
        <a :[key]="url">单击我试试</a>
        <br/>
        <!-- 完整语法 -->
        <a v-on:click="doSomething">再单击试试</a>
        <br/>
        <!-- 缩写 -->
        <a @click="doSomething">再单击试试</a>
        <br/>
        <!-- 动态参数的缩写 (2.6.0+) -->
        <a @[event]="doSomething">再单击试试</a>
        <br/>
    </div>
    <script>
    var myData = { url: 'http://www.baidu.com', msg: 'Hello there' , key: 'href', event: 'dblclick'}
    var vm1 = new Vue({
        el: '#app-12',
        data: myData,
        methods: {
            doSomething:function(){
                console.log('再单击试试,照做了');
            }
        }
    })
    </script>
    </body>
    </html>

    本文参考:

    https://cn.vuejs.org/v2/guide/syntax.html#%E7%BC%A9%E5%86%99

  • 相关阅读:
    Codeforces Round #234A
    Java中的字符串
    Codeforces Round #376A (div2)
    node源码详解 (一)
    node源码详解(三)
    node源码详解(四)
    修改bootstrap modal模态框的宽度
    Bootstrap 模态框(Modal)插件
    JavaScript局部变量和全局变量的理解
    Javascript:谈谈JS的全局变量跟局部变量
  • 原文地址:https://www.cnblogs.com/nayitian/p/14984766.html
Copyright © 2011-2022 走看看