Vue的数据、事件和方法实战

迷南。 2021-07-24 15:18 312阅读 0赞

**目录**

一 点睛

1 event.target.value

2 this 的用法

3 事件绑定：v-on

4 v-on 的简写

5 插值表达式

6 v-once

7 v-html和v-text

8 事件修饰符

二 代码

三 效果

--------------------

# 一 点睛 #

## 1 event.target.value ##

在响应函数里，可以指明使用 event 内置的参数对象。该对象表示当前事件。可以通过 event.target.value 来获得当前事件对象的 value 的值。

## 2 this 的用法 ##

this表示当前 Vue 对象 new Vue() ,可以通过 this. 来调用当前对象的属性和方法。

## 3 事件绑定：v-on ##

> <input type="text" v-on:input="changeTitle()">

v-on叫绑定事件，事件是input，相应行为是changeTitle，小括号可以去掉。当input元素发生输入事件时，就会调用Vue里定义的方法changeTitle。

## 4 v-on 的简写 ##

例如：v-on:input=“” 可以简写为 @input=“”

## 5 插值表达式 ##

插值表达式是用在html中被绑定的元素中的，目的是通过插值表达是来获取vue对象中的属性和方法。语法格式是\{ \{vue的内容\}\}。

注意：插值表达式不能写在 html 的标签中，不能作为属性的值部分。如果一定要用 vue 中的属性作为 html 标签的属性的内容，就可以使用 v-bind 进行属性绑定。

## 6 v-once ##

此时标签中的插值表达式，只获取一次数据。之后数据的变化不影响插值表达式的值。

## 7 v-html和v-text ##

v-html：将 vue 中属性的值作为 html 的元素来使用。

v-text：将 vue 中属性的值只作为纯文本来使用。

## 8 事件修饰符 ##

@click.stop：阻止点击事件的传播。

@mousemove.stop：阻止鼠标的移动事件。

@keyup.space：空格键弹起时调用。

@keyup.enter：回车键弹起时调用。

# **二 代码** #

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>数据，事件方法</title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>    
    </head>
    <body>
        <div id="root">
            
            <h1 v-on:click="()=>{number++}">{
       {number}}</h1>
            
            <h1 @click="()=>{number++}">{
       {number}}</h1>
            <h1 v-text="number" @click="click"></h1>
            
            <div v-html="content"></div>
            
            <div v-text="content"></div>
            
            <div>{
       {content}}</div>
            <div>{
       {msg}}</div>
        </div>
        
        <script type="text/javascript">
            new Vue({
                el: "#root",
                data: {
                    msg: "hello",
                    number: 0,
                    content: "<h1>hello</h1>"
                },
                methods: {
                    click:function(){
                        this.number++
                        this.msg = "world"
                    }
                }
            })
        </script>
    </body>
    </html>

# **三 效果** #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/bf6f2681533d40a9ad24aee6c6eea164.png