【基础05】模板动态参数和阻止默认事件

czh 7/5/2021 vue3vue3基础

# 【基础05】模板动态参数和阻止默认事件

# v-on的基本用法和简写

v-on是用来绑定响应事件的，在以前的课程中多次用到了。这里就先写一个最简单的事件，弹出对话框。

methods:{
    hanldClick(){
        alert('你好啊')
    }
},
template:`
<h2 v-on:click="hanldClick">{{message}}</h2>
`

在浏览器中可以看出，点击<h2>标签，就可以弹出alert效果。

v-on还有一个简写方法，就是可以不屑v-on:用@代替，比如把代码改成下面的样子，也是完全可以使用的。

template:`
<h2 @click="hanldClick">{{message}}</h2>
`

不仅v-on有简写方法，上节我们学习的v-bind也说过有简写方法

<h2 v-bind:title="message">{{message}}</h2>
<h2 :title="message">{{message}}</h2>

Vue在开发中还是鼓励大家使用简写，这样可以让代码更加清晰。

# 模板动态参数

现在绑定的事件click和title都是固定死的，显得不太灵活，Vue也提供了动态参数，要叫做动态属性的功能。比如这里v-bind:title中的title是来自data中的，就可以这样写。

const app=Vue.createApp({ 
    data(){
        return{
            message:'陈叔叔' ,
            name:'title'
        }
    },
    //.........
    template:`
        <h2 
            @click="hanldClick"
            :[name]="message"
        >
        {{message}}
        </h2>
    `

})

可以看到我们在data中，定义了一个name的变量，值是一个字符串，然后在绑定属性时我们使用了[]方括号加上data中变量名的形式。这时候绑定的属性就变的灵活了，这种形式就是模板动态参数，也称为动态属性。

可以在浏览器中使用检查的方式，查看此时绑定属性的名称，如果进行修改，比如改成title1,浏览器中也会跟随改变，形成动态效果，这就是动态属性了。

# 事件动态绑定

这种形式，也可以用到v-on事件绑定当中，比如在data中声明一个event的变量，然后给他一个click,然后用同样的方法实现事件动态绑定。

data中的写法如下

return{
    message:'陈叔叔' ,
    name:'title',
    event:'click'
}

模板中的写法如下

template:`
    <h2 
        @[event]="hanldClick"
        :[name]="message"
    >
    {{message}}
    </h2>
`

这时候就实现了动态绑定方法，可以打开浏览器，看一下效果。当点击<h2>标签时，也会弹出对应的alert效果。当然你还可以帮click改成其他相应事件，比如改成event:'mouseenter'，这样，当鼠标滑入时就可以相应弹出效果了。

# 阻止默认事件

最常见的默认事件就是表单的默认提交事件，比如我们这里写一个表单，然后写一个属性为submit的按钮，当点击按钮时，表单就会默认提交到对应的网址。

<form action="https://chan.iamalanji.com/">
    <button type="submit">默认提交</button>
</form>

这时候在浏览器中预览，点击“默认提交”按钮，就会立即跳转到我的博客上去，这就是默认响应事件。但是在开发中我们经常需要阻止这种默认响应事件。比如写出下面的代码。

methods:{
    hanldeClick(){
        alert('陈叔叔')
    },
    hanldeButton(e){
        e.preventDefault()
    }
},
//...
template:`
      //....
<form action="https://chan.iamalanji.com/" @click="hanldeButton">
    <button type="submit">默认提交</button>
</form>
`

这样写就可以阻止默认事件方法了，但是这是一个经常要做的操作，每次写太麻烦了，所以Vue也给我们提供了一个模板修饰符，直接可以阻止默认行为。写法如下。

<form 
    action="https://chan.iamalanji.com/" 
    @click.prevent="hanldeButton">
    <button type="submit">默认提交</button>
</form>

methods中的写法

hanldeButton(){
    alert('陈叔叔') 
}

这样就可以阻止默认事件，直接响应对应事件的内容了。prevent就是阻止默认事件的修饰符。修饰符可以见简化一些代码的编写，也是比较常用的一个操作。

# 完整代码：

const app=Vue.createApp({ 
    methods:{
        hanldeClick(){
            alert('陈叔叔')
        },
        hanldeButton(e){
            e.preventDefault()
        }
    },
    //.........
    template:`
        <form 
            action="https://chan.iamalanji.com/" 
            @click.prevent="hanldeButton">
            <button type="submit">默认提交</button>
        </form>
    `
})
const vm=app.mount("#app")

前端极客

Choose mode