Vue的表单双绑和组件

曾经终败给现在 2023-09-30 08:25 23阅读 0赞

### 表单双绑和组件 ###

#### 表单双绑 ####

##### 为什么要实现数据的双向绑定 #####

在Vue.js 中,如果使用vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vuejs 的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。

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

你可以用**v-model** 指令在表单 、 及 元索上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特 殊处理。  
**注意: v-model会忽略所有表单元素的value. checked. selected 特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!**

1.  单行文本
    
        
        <div id="app">
        输入的文本：<input type="text" v-model="message">{
             {message}}
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
               
                el:"#app",
                data: {
               
                    message: "",
                }
        
            });
        </script>
2.  多行文本
    
        
        <div id="app">
            输入的文本：<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>{
             {message}}
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
               
                el:"#app",
                data: {
               
                    message: "",
                }
        
            });
        </script>
3.  单复选框
    
        
        <div id="app">
            
        <input type="radio" name="sex" value="男" v-model="message">男
        <input type="radio" name="sex" value="女" v-model="message">女
            <p>选中了谁:{
             {message}}</p>
            
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
        <script>
            var vm=new Vue({
               
                el:"#app",
                data: {
               
                    message: "",
                    check: false
                }
        
            });
        </script>
4.  下拉框

<div id="app">
        下拉框：
        <select v-model="message">
            <option value="" disabled>--请选择--</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>value:{
       {message}}</span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        var vm=new Vue({
         
            el:"#app",
            data: {
         
                message: "",
            }
        });
    </script>

#### vue的组件 ####

> Vue.component():注册组件
> 
> template:组件的模板
> 
> props：传递参数到组件（值不能为大写）

<div id="app">
    
        <lzj v-for="item in items" v-bind:hh="item"></lzj>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        //定义员工Vue组件 component
        //命名不能使用大写
        Vue.component("lzj",{
         
            props: ['hh'],//接收参数
            template: '<li>{
         {hh}}</li>'
        });
        var vm=new Vue({
         
            el:"#app",
            data: {
         
                items:["Java","Linux","Html"]
            }
    
        });
    </script>

*  v-bind:hh=“item”：将遍历的**item**项绑定到组件中**props**定义的名为**hh**属性上；= 左边的hh为props定义的属性名，右边的为item in items中遍历的item项的值

###  ###