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

posted @ 2021-07-08 10:00  那些年的事儿  阅读(89)  评论(0)  编辑  收藏  举报