Vue的双向数据绑定指令 v-model

双向数据绑定指令v-model

   基于响应式原理的属性绑定 和 元素事件监听实现 双向响应式功能

   取值：随表单控件类型不同而不同。

  限制： 仅限于 HTML 表单元素 * * 和组件 ** ， <input> 、 <select> 、

            <textarea> 等

  语法： <input type="text" v - model="name">

 修饰符：

 .lazy 取代 input 监听 change 事件

 .number 输入字符串转为有效的数字

.trim 输入首尾空格过滤

v-model 表示双向数据绑定

                JS变量变换=>页面  (响应式数据劫持操作)

                页面元素的数据操作=>JS变量变换  (事件绑定对变量修改的操作)

            v-model 只支持基本仓库变量，不支持除此之外的任何其他取值

            因此能够使用v-model指令的只有表单元素中的数据控制元素

                input type=text,password,number,……

                textarea

                select

                input type=radio

                input type=checkbox

 所以 v-model 实际上就是vue提供的 v-bind + v-on 同时绑定的语法糖指令

            ==单行文本框||类似于单行文本框的H5输入变量==

                v-model：

                    1. 完成了对于value属性绑定，默认完成input事件的绑定

                    2. 同时实现 事件触发时当前元素新值到绑定变量的赋值操作

注：H5输入标签在完成v-model绑定时，根据数据标签的取值类型，需要提供有效变量值

        data(){
                return {
                  msg:"msg", // <input type="text" v-model="msg">
                  color:"#8264d3",  // <input type="color" v-model="color">
                  date:"2022-01-23", //<input type="date" v-model="date">
                  num:"1" // <input type="range" v-model="num" min="1" max="5" step="0.5">
                }
             }

多行文本域||下拉列表

多行文本域||下拉列表==

            v-model：

                1. 完成了对于DOM的value属性绑定，默认完成input事件||change事件的绑定

                2. 同时实现 事件触发时当前元素新值到绑定变量的赋值操作

          v-model 对下拉列表的绑定只能添加在select标签上

            select标签的DOM属性value取值会根据数据和内部option的对应值进行等值比较，               确定绑定的option元素

            option的对应值:当定义了value 对应值为value；当没定义value对应值为option内容

vue中select启用  multiple 属性时，v-model绑定的变量必须取值 Array||Set

<pre>{{ infos }}</pre>
        <!-- vue中select启用  multiple 属性时，v-model绑定的变量必须取值 Array||Set -->
        <select v-model="infos" multiple style="width: 100px;">
            <option value="html">html</option>
            <option value="css">css</option>
            <option value="js">js</option>
            <option value="vue">vue</option>
        </select>

<script type="module">
        import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    infos:[]
                }
            }
        }).mount("#app")

 <!--

            ==单选按钮==

                html规则中，单选按钮不会以单一方式出现，一般以组别的方式构建互斥功能，

                            单选按钮的互斥功能是通过name取相同值实现

                html规则中，单选按钮被选中后，该标签的value数据将作为提交数据进行传递，

                            如果单选按钮没有提供value数据，默认值为 on

            vue3中使用v-model完成单选按钮双向绑定时，如果没有满足上述两个条件，页面表现效果会出现异常

            vue2中使用v-model完成单选按钮双向绑定时，如果没有提供value,默认值将被修改为null

           

            v-model 对于单选按钮的绑定，完成了如下操作

                完成checked属性的v-bind绑定操作；

                完成change事件的v-on绑定操作；

                使用value取值作为上述两个功能的操作依据

        -->

    <div id="app">
        <p>radioData:{{ radioData }}</p>
        <!-- <input type="radio" name="skill" v-model="radioData"> -->
        <!-- JS 的change事件在 单选按钮和多项按钮上绑定时，只有被触发的元素才会因为元素状态变化执行该事件方法 -->
        <input type="radio" value="电信"
            :checked=" radioData=='电信' "
            @change=" radioData=$event.target.value "
        >电信
        <input type="radio" value="移动"
            :checked=" radioData=='移动' "
            @change=" radioData=$event.target.value "
        >移动
        <input type="radio" value="联通"
            :checked=" radioData=='联通' "
            @change=" radioData=$event.target.value "
        >联通
        <input type="radio" value="广电"
            :checked=" radioData=='广电' "
            @change=" radioData=$event.target.value "
        >广电
        <br>
        <!-- 在vue项目中，当使用v-model完成单选按钮数据双向绑定时，标签的name属性失去分支互斥价值（即可有可无） -->
        <input type="radio" name="skill" value="电信" v-model="radioData">电信
        <input type="radio" name="skill" value="移动" v-model="radioData">移动
        <input type="radio" name="skill" value="联通" v-model="radioData">联通
        <input type="radio" name="skill" value="广电" v-model="radioData">广电
        <br>
        <input type="radio" value="电信" v-model="radioData">电信
        <input type="radio" value="移动" v-model="radioData">移动
        <input type="radio" value="联通" v-model="radioData">联通
        <input type="radio" value="广电" v-model="radioData">广电
        
        <br>
        <template v-for="v in radioValue">
            <input type="radio" 
                :value=" v " 
                v-model="radioData"
            >{{ v }}
        </template>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    radioValue:["电信","移动","联通","广电"],
                    radioData:"联通"
                }
            }
        }).mount("#app")
    </script>
</body>

 <!--

            ==复选按钮==

                应用场景:状态描述 - 通过复选状态描述业务功能用户是否同意

                    v-model 完成复选框绑定时，如果取值变量为非数组或集合数据，

                            提供 boolean结果 true 和 false 实现状态描述

                           等同于 对复选框实现 checked属性的绑定，和change事件的绑定

                    v-model 同时提供对默认取值 true和false修改功能属性，该通过定义改变默认取值

                        true-value 属性 描述选中时的返回值 （默认取值为 true）

                        false-value 属性 描述取消选中时的返回值 （默认取值为 false）

                应用场景:数据描述 - 通过复选框分组和选中描述用户需要提供相关数据功能

                     v-model 完成复选框绑定时，如果取值变量为数组或集合数据，

                            提供数据记录功能，通过对应数据的原型方法实现数据的添加记录和删除记录的操作

                            而使用数据记录模式时，复选框的定义需要和单选按钮定义使用相同构建规则

        -->

<div id="app">
       <p>checkFlag:{{ checkFlag }}</p>
        <input type="checkbox" :checked=" checkFlag " @change=" checkFlag=$event.target.checked ">
        <input type="checkbox" v-model="checkFlag">
        <p>checkFlag1:{{ checkFlag1 }}</p>
        <input type="checkbox" true-value="是" false-value="否" v-model="checkFlag1">
        <hr>
        <p>checkData：{{ checkData }}</p>
        技能：
        <input type="checkbox" value="html" v-model="checkData">html
        <input type="checkbox" value="css" v-model="checkData">css
        <input type="checkbox" value="js" v-model="checkData">js
        <input type="checkbox" value="vue" v-model="checkData">vue
        <br>
        <template v-for="v in skills">
            <input type="checkbox" :value="v" v-model="checkData">{{ v }}
        </template>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    checkFlag:true,
                    checkFlag1:"是",
                    checkData:[],
                    // checkData:new Set([]),
                    skills:["html","js","css","vue"]
                }
            }
        }).mount("#app")
    </script>

  <div id="app">
        <h4>单选按钮：value取值引用数据变量时</h4>
        <!-- 
            value所取值的值是引用数据的地址
            checked选中状态的判断使用的是数据副本的内容判断
            保证value所取的引用类型数据内容唯一
         -->
        <p>
            radioData:{{ radioData }}
            <input type="text" v-model="radioData.name">
        </p>
        <ul>
            <li v-for="v in radioValue">
                <!-- <input type="radio" :value="v.name" v-model="radioData">{{ v.name }}【{{ v }}】 -->
                <input type="radio" :value="v" v-model="radioData">{{ v.name }}【{{ v }}】
            </li>
        </ul>
        <h4>复选按钮：value取值引用数据变量时(数据模式)</h4>
        <!-- 
            value所取值的值是引用数据的地址
            checked选中状态的判断使用的是数据副本的内容判断
            保证value所取的引用类型数据内容唯一（可通过id实现内容的唯一性）
         -->
        <pre>checkData：{{ checkData }}</pre>
        <ul>
            <li v-for="v in skills">
                <input type="checkbox" :value="v" v-model="checkData">{{ v.name }}【{{ v }}】
            </li>
        </ul>
        <hr>
        <h4>复选按钮动态元素构成和数据模式绑定</h4>
        <pre>{{ checkData2 }}</pre>
        <input type="text" v-model="checkData2[0].name">
        <!--
            因为需要默认展示值，所以程序中构建两个内容相同，但地址指向不同的数据完成初始时选中渲染 
            但因为内容相同地址不同，导致任何一个关联对象发生数据变化都会丢失选中状态
        -->
        <ul>
            <li v-for="v in skills2">
                <input type="checkbox" :value="v" v-model="checkData2">{{ v.name }}【{{ v }}】
            </li>
        </ul>
        <!-- 
            以数据自己对应的状态变量完成类似数据模式下，复选框的数据选中操作
                => 输出被选中数据时，需要循环判断
         -->
        <ul>
            <li v-for="v in skills3">
                <input type="checkbox" :value="v.check" v-model="v.check">{{ v.name }}【{{ v }}】
            </li>
        </ul>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    radioData:{},
                    // radioValue: [
                    //     { name: "电信" },
                    //     { name: "移动" },
                    //     { name: "联通" },
                    //     { name: "广电" },
                    //     { name: "广电" }
                    // ],
                    radioValue: [
                        { id:111,name: "电信" },
                        { id:222,name: "移动" },
                        { id:333,name: "联通" },
                        { id:444,name: "广电" },
                        { id:555,name: "广电" }
                    ],
                    checkData:[],
                    skills:[  
                        {id:111,name:"html"},
                        {id:222,name:"js"},
                        {id:333,name:"css"},
                        {id:444,name:"vue"},
                        {id:555,name:"vue"}
                    ],
                    checkData2:[
                        {id:111,name:"html"},
                        {id:333,name:"css"},
                    ],
                    skills2:[  
                        {id:111,name:"html"},
                        {id:222,name:"js"},
                        {id:333,name:"css"},
                        {id:444,name:"vue"}
                    ],
                    skills3:[  
                        {id:111,name:"html",check:false},
                        {id:222,name:"js",check:true},
                        {id:333,name:"css",check:true},
                        {id:444,name:"vue",check:false}
                    ]
                }
            }
        }).mount("#app")
    </script>

v-model修饰符：

.lazy 取代 input 监听 change 事件

       ==> 描述 单行文本框和多行文本域完成v-model绑定时使用的是input事件还是change事件

.number 输入字符串转为有效的数字

                ==> 尝试完成v-model接收的string数据到number数据的转换

                ==> 如果不能转换 以 string 原值绑定给变量

                ==> 该修饰符使用的是 Number.parseFloat 方法完成数据转换

.trim 输入首尾空格过滤

                ==> 调用了String.prototype.trim 方法，完成字符串首尾空格删除

 <div id="app">
       <p>v-model数据懒渲染lazy</p>
        <p>msg：{{ msg }}</p>
        <input type="text" v-model="msg">
        <br>
        <input type="text" v-model.lazy="msg">
        <hr>
        <p>v-model数值类型数据自动转换number</p>
        <p>num+num1:{{ num+num1 }}</p>
        <input type="text" v-model.number="num">
        <br>
        <input type="number" v-model.number="num">
        <hr>
        <p>v-model首尾空格删除trim</p>
        <pre>|{{ info }}|</pre>
        <input type="text" v-model="info">
        <br>
        <input type="text" v-model.trim="info">

    </div>

    <script type="module">
        import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    msg:"msg",
                    num:10,
                    num1:10,
                    info:"=="
                }
            }
        }).mount("#app")
    </script>