zoukankan      html  css  js  c++  java
  • 3、Vue表单的双向绑定以及第一个Vue组件

    Vue表单双向绑定

    什么是双向数据绑定

      Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

    值得注意的是,我们所说的数据双向绑定,一定是对于 UI 控件来说的,非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。

    在表单中使用双向数据绑定

    你可以用 v-model 指令在表单 <input><textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。

    它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

    注意:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

    • 单行文本

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
        // v-model:绑定资源
        <input type="text" v-model="message">
        // 取出数据
        <p>{{message}}</p>
    
    </div>
    <script type="text/javascript">
        var demo = new Vue({
            el: "#app",
            data: {
                message: "hello Vue"
            }
        })
    </script>
    </body>
    </html>

    在输入框输入数据,下面的标签内容也会跟着发生变化:

    • 多行文本

    <div id="app">
        多行文本:<textarea v-model="message"></textarea>&nbsp;&nbsp;多行文本是:{{message}}
    
    </div>
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    
    <script>
    
        //viewModel 实现与Model双向绑定,动态更新视图
        var vm = new Vue({
            el:"#app",
            data: {
                message : ""
            }
        });
    </script>
    • 单复选框

    <div id="app">
        单复选框:
        <input type="checkbox" id="checkbox" v-model="checked">
        &nbsp;&nbsp;
        {{checked}}
    
    </div>
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    
    <script>
    
        //viewModel 实现与Model双向绑定,动态更新视图
        var vm = new Vue({
            el:"#app",
            data: {
                checked : false
            }
        });
    </script>
    • 下拉框

    <div id="app">
        下拉框:
        <select v-model="selected">
            <!--<option disabled value="">请选择</option>-->
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>选中的值: {{ selected }}</span>
    
    </div>
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    
    <script>
    
        //viewModel 实现与Model双向绑定,动态更新视图
        var vm = new Vue({
            el:"#app",
            data: {
                selected : false
            }
        });
    </script>

    注意:如果 v-model 表达式的初始值未能匹配任何选项, 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,更推荐像上面这样提供一个值为空的禁用选项。

    第一个Vue 组件

      注意:在实际开发中,我们并不会用以下方式开发组件,而是采用 vue-cli 创建 .vue 模板文件的方式开发,以下方法只是为了让大家理解什么是组件。

    使用 Vue.component() 方法注册组件,格式如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
    <!--view层 模板-->
    <div id="app">
        <zhangzhixi></zhangzhixi>
    </div>
    <script type="text/javascript">
        // 定义Vue组件
        Vue.component(
            // 组件名称
            "zhangzhixi", {
                // 组件模板
                template: "<li>Hello World!</li>"
            })
    
        var app = new Vue({
            el: '#app',
        })
    </script>
    </body>
    </html>

    说明:

    • Vue.component():注册组件
    • zhangzhixi:自定义组件的名字
    • template:组件的模板


    使用 props 属性传递参数:

      像上面那样用组件没有任何意义,所以我们是需要传递参数到组件的,此时就需要使用 props 属性了!

    注意:默认规则下 props 属性里的值不能为大写;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
    <!--view层 模板-->
    <div id="app">
        <!--组件:传递给组件中的值props-->
        <zhangzhixi v-for="array in arrays" v-bind:zhixi="array">
    
        </zhangzhixi>
    
    
    </div>
    <script type="text/javascript">
        // 定义Vue组件
        Vue.component(
            // 组件名称
            "zhangzhixi",
            {
                // "prop"表示组件属性名称
                props: ['zhixi'],
                // 组件的模板
                template: '<li>{{zhixi}}</li>'
            })
    
        var app = new Vue({
            el: '#app',
            data: {
                arrays: [
                    "抽烟",
                    "喝酒",
                    "烫头"
                ]
            }
        })
    </script>
    </body>
    </html>

    说明:

    • v-for="array in arrays":遍历 Vue 实例中定义的名为 arrays的数组,并创建同等数量的组件
    • v-bind:zhixi="array":将遍历的 array 项绑定到组件中 props 定义的名为 zhixi 属性上;

  • 相关阅读:
    POJ 1811 Prime Test 素性测试 分解素因子
    sysbench的安装与使用
    电脑中已有VS2005和VS2010安装.NET3.5失败的解决方案
    I.MX6 show battery states in commandLine
    RPi 2B Raspbian system install
    I.MX6 bq27441 driver porting
    I.MX6 隐藏电池图标
    I.MX6 Power off register hacking
    I.MX6 Goodix GT9xx touchscreen driver porting
    busybox filesystem httpd php-5.5.31 sqlite3 webserver
  • 原文地址:https://www.cnblogs.com/zhangzhixi/p/14301639.html
Copyright © 2011-2022 走看看