vue学习笔记---(1)数据绑定(v-model && v-bind)和事件处理(v-on)

最新推荐文章于 2023-02-25 23:25:24 发布

Tomcat20

最新推荐文章于 2023-02-25 23:25:24 发布

阅读量482

点赞数

分类专栏： vue 文章标签： vue.js javascript 学习

本文链接：https://blog.csdn.net/Tomcat20/article/details/127373986

版权

数据绑定和事件处理

v-bind
- v-bind是单向绑定，用来绑定数据和属性以及表达式，只能将vue中的数据同步到页面。
v-model
- v-model是双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。
v-on 事件处理
- 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略
- 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

Demo.vue

<template>
  <div>
    单向数据绑定：<input type="text" v-bind:value="name">
    <!-- 简写形式 -->
    单向数据绑定：<input type="text" :value="name">
    <hr>

    双向数据绑定：<input type="text