vue.js数据绑定和事件处理

最新推荐文章于 2025-04-06 22:05:32 发布

橘子海326

最新推荐文章于 2025-04-06 22:05:32 发布

阅读量2.6k

点赞数 44

分类专栏： vue.js 文章标签： javascript chrome 学习开发语言 vue.js node.js 笔记

本文链接：https://blog.csdn.net/2402_86247394/article/details/143796078

版权

vue.js 专栏收录该内容

3 篇文章

订阅专栏

单元一 vue.js 数据的绑定

学习目标

（1）插值

（2）绑定表达式

任务一插值

1.1任务描述

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值，对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。

1.2任务实施

1.2.1文本插值

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Vue入门之数据绑定</title>

  <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->

</head>

<body>

    <span>Message :{{msg}}</span>

</body>

</html>

运行效果：

Mustache 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。可以只处理单次插值，数据变化就不会再引起插值更新了：

<span>This will never change :{{*msg}}</span>

1.2.2原始HTML插值

使用 v-html 指令可以将数据当作原始 HTML 进行渲染。

<div id="app">

    <div v-html="htmlContent"></div>

  </div>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        htmlContent: '<h2>这是一段通过 v-html 渲染的标题</h2>'

      }

    });

  </script>

1.2.3属性插值

可以使用 v-bind 指令（缩写为 :）来进行属性插值，将数据绑定到 HTML 元素的属性上。

 <div id="app">

    <img :src="imageSrc" :alt="imageAlt">

  </div>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        imageSrc: 'C:/Users/31639/Pictures/屏幕截图 2024-09-22 161016 - 副本.png',

        imageAlt: '示例图片'

      }

    });

  </script>

这段代码里面的img 元素的 src 和 alt 属性分别绑定了 Vue 实例中的 imageSrc 和 imageAlt 数据，从而正确地显示图片并设置替代文本。

任务二绑定表达式

2.1任务描述

在 Vue 中，使用双大括号 {{ }} 语法来进行数据绑定，绑定的内容可以是各种合法的 JavaScript 表达式

2.2任务实施

<div id="app">

    {{ msg + ' - ' + name }}

    <p>

      {{ isOk ? '123' : '456' }}

    </p>

    <p>我的年龄是： {{ age *2 }}</p>

  </div>

 

  <script>

    var app = new Vue({        

        el: '#app',              

        data: {                  

        msg: 'Hi',              

        name: 'flydragon',

        isOk: true,

        age: 18

        }

    });

  </script>

运行效果：

解析:

{{ msg + ' - ' + name }} ：是将 msg 和 name 这两个数据属性进行字符串拼接，属于表达式绑定，把拼接后的结果渲染到对应的 DOM 位置。

{{ isOk? '123' : '456' }} ：是一个三元表达式，根据 isOk 的布尔值情况来决定渲染 123 还是 456，也是表达式绑定的体现。

{{ age * 2 }} ：是对 age 数据属性进行数值运算（乘以 2），然后将运算结果展示出来，属于表达式绑定。

然而，vue提供非常好的绑定表达式的方法，但只能应对低强度的需求。如果我们想把一个日期按照规定格式化输出，。这时候表达式就实现不了了。Vue对象提供了computed的属性，可以在里面放置一些方法，协助绑定操作，使用是和data中的属性一样，方法用的时候不用加括号（）下面来演示操作一下:

<div id="app">

    <table>

      <tr>

        <td>生日</td><td>{{ getBirthday }}</td>

      </tr>

      <tr>

        <td>年龄</td><td>{{ age }}</td>

      </tr>

      <tr>

        <td>地址</td><td>{{ address }}</td>

      </tr>

    </table>

  </div>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        birthday: 914228510514,     // 这是一个日期对象的值：1998年11月1日

        age: 19,

        address: '北京昌平区龙泽飞龙'

      },

      computed: {

        // 把日期换成 常见规格格式的字符串。

        getBirthday: function () {

          var m = new Date(this.birthday);

          return m.getFullYear() + '年' + m.getMonth() +'月'+ m.getDay()+'日';

        }}

    });

  </script>

单元二 vue.js的事件处理

学习目标

（1）监听事件

（2）事件修饰符

（3）按键修饰符

任务一监听事件

1.1 任务描述

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。

事件处理器 (handler) 的值可以是：

内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

1.2任务实施

在 Vue.js 中，你可以使用 v-on 指令（通常缩写为 @）来监听 DOM 事件。例如，如果你想在用户点击一个按钮时执行某些操作，可以这样写

<button @click="counter += 1">增加</button>

1.2.1事件类型

click：单击事件，当组件被单击时触发。

dblclick：双击事件，当组件被双击时触发。

focus：获取焦点事件，例如输入框开启编辑模式时触发。

blur：失去焦点事件，例如输入框结束编辑模式时触发。

change：元素内容改变事件，输入框结束输入后，如果内容有变化，就会触发此事件。

select：元素内容选中事件，输入框中的文本被选中时会触发此事件。

mousedown：鼠标按键被按下事件。

mouseup：鼠标按键抬起事件。

mousemove：鼠标在组件内移动事件。

mouseout：鼠标移出组件时触发。

mouseover：鼠标移入组件时触发。

keydown：键盘按键被按下。

keyup：键盘按键被抬起。

1.2.2 内联事件处理器

在src文件夹里的components创建vue文件，文件名一定是驼峰式，比如ForDemo再在App.vue里面写入

<script setup>

  import ForDemo from "./components/ForDemo.vue"

</script>

<template>

  <ForDemo/>

</template>

写完之在创建的文件中写入运行的内容

<script setup>

import { ref } from 'vue'

const counter = ref(0)

</script>

<template>

<div id="app">

<button @click="counter++">Add 1</button>

  <p>The button above has been clicked {{ counter }} times.</p>

</div>

</template>

先Ctrl+s保存，在终端里面输入npm run serve 运行，在http://localhost:8080/网页链接中进行查看

运行效果:

add

1.2.3方法事件处理器

与data并列的methods,中写入方法,通过this.数据名的方式拿到data中的数据.

<template>

  <h3>方法事件处理</h3>

  <button @click="addCount">add</button>

  <div>{{ count }}</div>

</template>



<script>

export default {

  data() {

    return {

      count: 0,

    };

  },

  methods: {

    addCount() {

      //读取data中的数据方法  this.count

      this.count++;

    },

  },

};

</script>