Vue第四天---Vue数据及事件绑定

Vue数据及事件绑定

1.数据绑定

Vue最显著的特点就是响应式和数据驱动,也就是将Model和View进行单向绑定或者双向绑定

1.1 数据绑定的方法

1.1.1 单向绑定

单向绑定 :把Model绑定到View后,当用js代码更新Model时,View就会自动更新;
因此我们不需要进行额外的DOM操作,只需要对Model操作就能实现视图的联动更新

几个单向绑定的例子

  1. 插值绑定
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值绑定 demo</title>
    <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    {{num}}
</div>


<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            num:111,
        }
    })
</script>
</body>
</html>

image-20211105141535829

​ 我创建了一个Vue实例,并在实例中指定data,这里的data就是指定Model,{{num}}就是View,当我在控制台改变num的值时,View也会随之发生改变,这就是单向绑定

  1. v-bind 绑定

    HTML的某些属性可以支持单向绑定,只需要加上v-bind指令,属性值就会和Vue实例的Model进行绑定;之后我们可以操作Model来实现DOM的联动更新。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>v-bind绑定 demo</title>
        <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
        <style>
            .red{
                background-color: red;
            }
    
            .blue{
                background-color: blue;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <p v-bind:class="color">{{value}}</p>
    </div>
    
    
    <script type="text/javascript">
        var vm=new Vue({
            el:"#app",
            data:{
                value:'shelgi',
                color:'blue'
            }
        })
    </script>
    </body>
    </html>
    

    image-20211105145802711

    image-20211105145726240

1.1.2 双向绑定

双向绑定:是指HTML标签数据绑定到Vue对象,另外反方向数据也是绑定的。简单来说,双向绑定就是把Model绑定到View的同时也将View绑定到Model上,这样js更新Model时,View会自动更新;更新View时,Model的数据也会自动更新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定 demo</title>
    <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <p><input v-model="name">{{name}}</p>
</div>


<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            name:'111'
        }
    })
</script>
</body>
</html>

image-20211105151847341

2. 计算属性

Vue提供的计算属性允许开发者编写一些方法,协助进行绑定数据的操作。模板内表达式包含复杂逻辑时,应使用计算属性。只要计算属性使用的数据不发生改变,计算属性就不会执行,而是直接使用缓存。

3. 表单控件绑定

我们通常使用v-model对text、radio、checkbox、select等表单组件进行双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model demo</title>
    <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <select v-model="choice">
        <option value="iphone">iphone</option>
        <option value="ipad">ipad</option>
        <option value="ipad mini">ipad mini</option>
    </select>
    <br/>
    <span>你选择的是:{{choice}}</span>

</div>


<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            choice:"请选择"
        }
    })
</script>
</body>
</html>

image-20211105154054011

有时需要控制同步时机,或者转换类型,就可以通过添加修饰指令

  • lazy:改为在change事件中去同步
  • debounce:设置一个最小的时延,完成xxxms内,vm.msg才会被更新
  • number:将值转为数值类型

4. 事件绑定

v-on指令用来监听DOM事件,通常在模板内直接使用

v-on绑定实例选项属性methods中的方法作为事件的处理器,如果不带括号就是函数名,带括号的就是内联处理器

更多的可以想象成向函数中传入一个参数

5. 修饰符

修饰符可以分为两种:事件修饰符键值修饰符

5.1 事件修饰符

事件修饰符:在事件处理程序中调用event.preventDeafault()或event.stopPropagation(),是非常常见的;在方法中只处理纯粹的数据逻辑,而不去处理DOM事件细节

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2.1.4 新增

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符,.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档,现在大可不必担心。

2.3.0 新增

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive.prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。请记住,.passive 会告诉浏览器你想阻止事件的默认行为。

5.2 键值修饰符

在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input v-on:keyup.page-down="onPageDown">

在上述示例中,处理函数只会在 $event.key 等于 PageDown 时被调用。

5.3 按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode attribute 也是允许的:

<input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名:

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9,这些内置的别名应该是首选。

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

6. 与传统事件绑定的区别

  1. 无需手动管理,ViewModel被销毁时,所有的事件处理器都会自动被删除,重新获取DOM绑定事件;
  2. 解耦,ViewModel代码是纯粹的逻辑代码,与DOM无关
  3. Vue.extend(),可以重复使用子组件

7. class与style的绑定

7.1 class的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .class1{
            background-color: #ff0;
        }
        .class2{
            background-color: #f00;
        }
    </style>
    <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app" v-bind:class="[choice1,choice2]" v-on:click="change">
</div>


<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            choice1:'class1',
            choice2:''
        },
        methods:{
            change() {
                this.choice1=this.choice1==''?'class1':'';
                this.choice2=this.choice2==''?'class2':'';
            }
        }
    })
</script>
</body>
</html>

image-20211105172412855

image-20211105172427324

7.2 css的绑定

v-bind:style 的对象语法可以实现对内联样式的绑定,但是其实是一个js对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定内联样式 demo</title>
    <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <div v-bind:style="css">{{msg}}</div>
</div>


<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            msg:'shelgi',
            css:{
                color:'orange',
                fontsize:'10px',
            }
        }
    })
</script>
</body>
</html>

image-20211105173455586

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shelgi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值