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

最新推荐文章于 2024-05-07 06:48:30 发布

lql_h

最新推荐文章于 2024-05-07 06:48:30 发布

阅读量197

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/lql_h/article/details/102500791

版权

VUE 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

概述

#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>

运行效果

如果在单项的input的value改变，其他两处不会发生改变，只有第一处改变了

如果在双向的input的value发生了改变，所有三处都会变

点击按钮，也是三处都会变，因为在funtion直接改变了内存

vue中的this是vue封装好给我们使用的，跟平常方法里面的this是不同的

lql_h

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE单双向数据流及事件绑定

概述#vue单向数据流绑定属性值 v-bind: (属性)，简写:(属性)例子：`<input v-bind:value="name" v-bind:class="name">`- 单向数据绑定内存改变影响页面改变- v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染vue双向数据流 v-model ，只作用于有value属性的元...
复制链接

扫一扫

专栏目录