zoukankan      html  css  js  c++  java
  • Vue——绑定值

    学习重点

    这一篇主要介绍一下vue中MVVM的特点。

    也就是研究一下这个特点:改变数据的值,页面会跟着改变,页面上的值发生变化,数据也会联动。

    我们要学的就是:

    • Html标签与数据的绑定;
    • Html标签与属性(CSS样式等)的绑定,;
    • Html标签与事件(点击事件等)的绑定;
    • 拦截器,给各种绑定设置一个拦截功能(数据需要满足什么情况,才需要绑定?)。

    值绑定

    使用占位符{{fieldName}},数据会总动填充到页面上。

    使用v-model可以与输入控件(input/select)进行绑定,输入框内的值发生变化,数据也会发生变化。

    (v-model的设计就属于MVVM模式)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
        <script src="res/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <!--数据绑定-->
        <p>{{ message1 }} </p>
        <!--类似InnerHTML-->
        <div v-html="message2"></div>
        <!--双向绑定,输入框与展示的数据进行联动,v-model的值影响data中的值,data中的值再影响<p>标签的值-->
        <input v-model="message1">
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message1: 'runoob!',
                message2: '<h>123456</h>',
            }
        })
    </script>
    </body>
    </html>

    属性绑定

    属性绑定指的是控件自身的属性,例如<a>标签的href属性,使用v-bind进行属性绑定,简写 “:bind”、或者只保留一个 “:”。

    后面会发现,其实自定义组件的值,也是通过这种方式进行绑定的。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Vue 测试实例</title>
        <script src="res/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <!--绑定id属性-->
        <div v-bind:id="rawId"></div>
        <!--绑定href属性-->
        <a v-bind:href="url">{{name}}</a>
        <!--绑定CSS样式-->
        <div :style="mystyle">{{name}}</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                mystyle:'background: #444;color: #eee',
                name: 'baidu',
                url: 'www.baidu.com',
                rawId: 'div_id',
            }
        })
    </script>
    </body>
    </html>

    事件绑定

    事件和属性的区别,就是事件是一个Function,而属性是一个Object。

    语法上有所差别,vue需要在methods中定义事件函数,

    使用v-on:click绑定点击事件,简写@click。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Vue 测试实例</title>
        <script src="res/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <!--点击事件,v-on表示 监听事件-->
        <button v-on:click="dialog('msg')">Click</button>
        <!--点击事件,v-on表示 监听事件-->
        <button @click="dialog()">Click</button>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'runoob!'
            },
            methods: {
                dialog: function (msg) {
                    if (!msg) {
                        alert(this.message);
                    } else {
                        alert(msg);
                    }
                }
            }
        })
    </script>
    </body>
    </html>

    拦截器(filters)

    数据绑定之前,对数据计算或者校验,比如说:数值是百分比,显示之前,你需要给它增加一个百分号。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Vue 测试实例</title>
        <style>
            .class1 {
                background: #444;
                color: #eee;
            }
        </style>
        <script src="res/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <!--一般的属性绑定不需要拦截器,需要动态改变样式可以使用双向绑定实现-->
        <div :class="{'class1': isShow}">Text</div>
        <div :class="{'class1': true}">Text</div>
        <!--在值绑定中,可以对输入输出进一步处理-->
        <input :value="message2 | formatStr"/>
        <span> {{message2 | formatStr}}</span>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message1: 'msg1',
                message2: 'msg',
                isShow: false
            },
            filters: {
                formatStr: function (value) {
                    return value + "%"
                }
            }
        })
    </script>
    <script>
    </script>
    </body>
    </html>
    疯狂的妞妞 :每一天,做什么都好,不要什么都不做! 文中有不妥或者错误的地方还望指出,如果觉得本文对你有所帮助不妨【推荐】一下!如果你有更好的建议,可以给我留言讨论,共同进步!
  • 相关阅读:
    测试我的第一个随笔
    ORB-SLAM2初步
    STL map 简介
    day4-内置函数
    Python学习之路day4-函数高级特性、装饰器
    Python学习之路day3-函数
    Python学习之路day3-字符编码与转码
    Python学习之路day3-文件操作
    Python学习之路day3-集合
    Python学习之路【第二篇】-pyc简介、Python常用的数据类型及其用法和常用运算符
  • 原文地址:https://www.cnblogs.com/chenss15060100790/p/15700946.html
Copyright © 2011-2022 走看看