VUE学习十一，模板语法，指令

一、参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示

<a v-bind:href="url">单击我试试</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

<a v-on:click="doSomething">再单击试试</a>

二、动态参数：可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

三、修饰符： (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

四、本文全部代码

<!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>
    <a v-on:click="doSomething">再单击试试</a>
</div>
<script>
var myData = { url: 'http://www.baidu.com', msg: 'Hello there' }
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#%E6%8C%87%E4%BB%A4

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