Vue.js学习笔记-属性绑定和事件绑定

最新推荐文章于 2022-06-08 11:23:16 发布

凉夏_暖冬

最新推荐文章于 2022-06-08 11:23:16 发布

阅读量346

点赞数

分类专栏： Web开发文章标签： vue html js

本文链接：https://blog.csdn.net/qq_50527570/article/details/113817706

版权

Web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

属性绑定(数据绑定)

Vue提供了多个关键字,能快速将数据对象中的值绑定在视图层中

v-model

通过v-model将标签的value值与vue对象中的data属性值进行绑定

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div>
    <div id="inputApp">
        输入的内容: {{ title }} <br>
        <input type="text" v-model="title">
    </div>
</div>
<script>
    var app = new Vue({
        el:"#inputApp",
        data:{
            title:"Hello World!"
        }
    })
</script>

</body>
</html>

代码中input标签通过v-model绑定了Vue对象中的title属性值

当在改变input输入框的内容的时候,Vue中title的值也会随之改变

在这里插入图片描述

v-bind

因为插值表达式是不能卸载HTML的标签的属性中的

当一定要使用vue中的属性的值作为HTML标签中的属性的值的时候,可以通过v-bind进行属性绑定

<!--v-bind属性-->
<div>
    <div id="v-bindApp">
        <a v-bind:href="link">{{link}}</a> <br>
        输入链接: <input type="text" v-model="link">
    </div>
</div>
<script>
    var vbindApp = new Vue({
        el:"#v-bindApp",
        data:{
            link:"http://www.yczbest.cn/"
        }
    })
</script>

在代码中,a标签的href属性的值会与Vue对象中data属性的link属性的值绑定

a标签的内容会与link的属性值一致

之后的输入框中通过v-model绑定了Vue对象中的data属性的link属性的值

当输入框中内容改变,a标签的href的属性的值也会改变,a标签的文字也会改变(插值表达式)

在这里插入图片描述

“v-bind"可以简写为”:"

<div>
    <div id="v-bindApp">
<!--        <a v-bind:href="link">{{link}}</a> <br>-->
        <a :href="link">{{link}}</a> <br>
        输入链接: <input type="text" v-model="link">
    </div>
</div>
<script>
    var vbindApp = new Vue({
        el:"#v-bindApp",
        data:{
            link:"http://www.yczbest.cn/"
        }
    })
</script>

事件绑定

关于事件,要把我好三个步骤: 设参传参接参

<div>
    <div id="app">
        sum = {{ sum }} <br/>
        {{ sum > 10 ? '总数大于10' : '总数不大于10'}} <br>
        <button type="button" @click="increase(2)">增加</button>
        <!--2为实参-->
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            sum: 0
        },
        methods: {
            increase: function (s) {
                //s为形参
                this.sum += s
            }
        }
    })
</script>

设参

increase: function (s)

传参

<button type="button" @click="increase(2)">增加</button>

接参

this.sum += s

v-on

通过配合具体的事件名,来绑定Vue中定义的方法

<!--v-on事件绑定-->
<div>
    <div id="v-onApp">
<!--        <input type="text" v-on:click="changeMajor">-->
        <input type="text" v-on:click="changeMajor">
<!--        v-on可以简写为@ -->
    </div>
</div>
<script>	
    var app = new Vue({
        el:"#v-onApp",
        data:{
            major:"java"
        },
        methods:{
            changeMajor:function (s){
                console.log("change Major")
            }
        }
    })
</script>

代码中,点击输入框,会在控制台中输出change Major

v-on:可以简写为@

事件修饰符

可以使用Vue中定义好的事件修饰符,快速达到效果

<script src="../js/vue.js"></script>
<div id="app">
    <p @mousemove="mm">
        x:{{x}} <br>
        y:{{y}} <br>
        <span @mousemove.stop>鼠标移动到此处停止</span>
    </p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            x: 0,
            y: 0
        },
        methods: {
            mm: function (event) {
                this.x = event.clientX;
                this.y = event.clientY;
            },
            stopm: function (event) {
                event.stopPropagation();
            }
        }
    })
</script>

当鼠标经过P标签,会触发@mousemove,绑定mm方法,显示X和Y的坐标

如果经过了Span标签,会触发@mousemove.stop修饰器绑定的stopm方法,X和Y不再显示坐标

计算属性(computed)

计算属性即有计算能力的属性,将动态的东西静态化

能够将计算结果缓存起来的属性

<!--计算属性-->
<div id="comapp">
    <!--    方法调用加括号-->
    <p>调用当前时间的方法: {{currentTime1()}}</p>
    <!--    计算属性不加括号-->
    <p>当前时间的计算属性: {{currentTime2}} </p>
    <!--    学习计算属性,是证明,计算属性和方法可以达到一样的效果-->
</div>
<script>
    new Vue({
        el:"#comapp",
        data:{
            message : ""
        },
        methods:{
            currentTime1:function (){
                return Date.now()
            }
        },
        computed:{
            currentTime2:function (){
                this.message
                return Date.now()
            }
        }
    })
</script>

methods:定义方法,调用时候需要带括号

computed:定义计算属性,调用不带括号,this.message为了让currentTime2观察到数据变化而变化

methods和computed里的方法和属性不能重名

在这里插入图片描述

调用方法时,每次都需要进行计算

如果这个结果不需要经常变化更新,就可以考虑将这个计算结果缓存起来,使用计算属性

计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,节约系统占用

凉夏_暖冬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js学习笔记-属性绑定和事件绑定

属性绑定(数据绑定)Vue提供了多个关键字,能快速将数据对象中的值绑定在视图层中v-model通过v-model将标签的value值与vue对象中的data属性值进行绑定<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js">&l
复制链接

扫一扫