Vue笔记：表单双绑、组件、props 属性传递参数

柔光的暖阳◎ 2022-12-10 14:34 237阅读 0赞

> #### 什么是双向数据绑定 ####

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

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

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

你可以用 `v-model` 指令在表单 `<input>`、`<textarea>` 及 `<select>` 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

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

*  单行文本

<div id="app">
      input:<input type="text" v-model="message">{
       {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">
        多行文本：<textarea v-model="message"></textarea>  多行文本是：{
       {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">
          
        {
       {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>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` 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 `th:fragment`等框架有着异曲同工之妙。

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

> #### 第一个 Vue 组件 ####

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

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

说明：

*  Vue.component()：注册组件
 *  my-component-li：自定义组件的名字
 *  template：组件的模板

#### 使用 `props` 属性传递参数 ####

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

**注意：默认规则下 props 属性里的值不能为大写；**

<div id="app">
        <ul>
            <my_component_li v-for="item in items" v-bind:item="item"></my_component_li>
        </ul>
    
    
    </div>
    
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    
    <script> Vue.component( 'my_component_li',{ props: ['item'], //通过循环的遍历item，绑定属性，此属性‘item’作为媒介，传递给模板 template:'<li>{ {item}}</li>' } ); //viewModel 实现与Model双向绑定，动态更新视图 var vm = new Vue({ el:"#app", data: { items: ["java","python","vue"] } }); </script>

说明：

*  `v-for="item in items"`：遍历 `Vue` 实例中定义的名为 `items` 的数组，并创建同等数量的组件
 *  `v-bind:item="item"`：将遍历的 `item` 项绑定到组件中 `props` 定义的名为 `item` 属性上；= 号左边的 item 为 props 定义的属性名，右边的为 `item in items` 中遍历的 item 项的值