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

最新推荐文章于 2022-11-01 13:14:47 发布

chengqiuming

最新推荐文章于 2022-11-01 13:14:47 发布

阅读量193

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/chengqiuming/article/details/102732292

版权

Vue 专栏收录该内容

161 篇文章 16 订阅

订阅专栏

一点睛

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">
        <!-- v-on绑定事件 -->
        <h1 v-on:click="()=>{number++}">{{number}}</h1>
        <!-- 绑定事件简写 -->
        <h1 @click="()=>{number++}">{{number}}</h1>
        <h1 v-text="number" @click="click"></h1>
        <!-- 第一种方式显示msg  -->
        <div v-html="content"></div>
        <!-- 第二种方式显示msg -->
        <div v-text="content"></div>
        <!-- 第三张方式显示msg：插值表达式 -->
        <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>

三效果

chengqiuming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的数据、事件和方法实战

一代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>数据，事件方法</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> ...
复制链接

扫一扫