VUE单双向数据流及事件绑定

最新推荐文章于 2024-11-06 14:36:31 发布

原创最新推荐文章于 2024-11-06 14:36:31 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

20 篇文章

订阅专栏

本文深入解析Vue中的数据绑定机制，包括单向数据流v-bind和双向数据流v-model的使用方法，以及事件绑定v-on的实践。通过实例演示了不同绑定方式如何影响页面与内存的交互，帮助读者理解Vue响应式系统的原理。

概述

#vue单向数据流绑定属性值 v-bind: (属性)，简写:(属性)

例子：`<input v-bind:value="name" v-bind:class="name">`

- 单向数据绑定内存改变影响页面改变

- v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

vue双向数据流 v-model ，只作用于有value属性的元素

例子：`<input v-model="name" v-bind:class="name">`

双向数据绑定页面对于input的value改变，能影响内存中name变量

内存js改变name的值，会影响页面重新渲染最新值

事件绑定v-on:事件名="表达式||函数名" ，

简写：@事件名="表达式||函数名"

事件名可以是原生也可以是自定义的

v-model 双向数据绑定，vue页面改变影响内存（js），内存（js）改变影响vue页面

v-bind 单向数据绑定只是内存（js）改变影响vue页面

代码

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <div id="app"></div>



    <script type="text/javascript" src="vue.js"></script>

    <script type="text/javascript">

       console.log(this)

       new Vue({

           el:"#app",

           template:`

              <div>

              单向数据绑定

              <input type='text' v-bind:value="name" :class="name"><br>

              双向数据绑定

              <input type='text' v-model="name"></br>

              {{ name }}

              <button v-on:click="change">点击我改变name变量</button>

              </div>



           `,

           data:function(){

              return {

                  name:'hello'

              }

           },

           methods:{

              change:function(){

                  console.log(this)

                  this.name='我改变了，是在方法属性里面定义的方法'

              },

           }

       })

    </script>

</body>

</html>