• 基础五、表单输入绑定和组件基础


    在上一节中写了条件,列表渲染和事件的绑定,vue的事件绑定结合修饰符的使用,相比Jquery时代,极大的简化了事件相关的操作。下面继续来看vue的表单输入绑定和组件基础,也是vue基础内容的最后一节。

    一、表单输入绑定

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

    v-model 会忽略所有表单元素的 valuecheckedselected attribute 的初始值而总是将当前活动实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

    • text 和 textarea 元素使用 value property 和 input 事件;
    • checkbox 和 radio 使用 checked property 和 change 事件;
    • select 字段将 value 作为 prop 并将 change 作为事件。

    多个复选框,绑定到同一个数组:

     1 <div id="v-model-multiple-checkboxes">
     2   <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
     3   <label for="jack">Jack</label>
     4   <input type="checkbox" id="john" value="John" v-model="checkedNames" />
     5   <label for="john">John</label>
     6   <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
     7   <label for="mike">Mike</label>
     8   <br />
     9   <span>Checked names: {{ checkedNames }}</span>
    10 </div>

     在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符,从而转为在 change 事件_之后_进行同步:

    1 <!-- 在“change”时而非“input”时更新 -->
    2 <input v-model.lazy="msg" />

    .number:自动将用户的输入值转为数值类型,可以给 v-model 添加 number。

    .trim:自动过滤用户输入的首尾空白字符。

    二、组件基础

     组件是带有名称的可复用实例。看一个组合示例: 

    1 <template>
    2   <li>{{ todo.text }}</li>
    3 </template>
    4 <script>
    5 export default {
    6   name: "todo-item",
    7   props: ["todo"],
    8 };
    9 </script>

     因为组件是可复用的组件实例,所以它们与根实例接收相同的选项,例如 datacomputedwatchmethods 以及生命周期钩子等。可以将组件进行任意次数的复用:

     1 <template>
     2   <div>
     3     <ol>
     4       <todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-item>
     5       <todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-item>
     6       <todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-item>
     7       <todo-item v-for="item in list" v-bind:todo="item" v-bind:key="item.id"></todo-item>
     8     </ol>
     9   </div>
    10 </template>
    11 <script>
    12 import TodoItem from "./TodoItem.vue";
    13 export default {
    14   name: "Test",
    15   components: {
    16     TodoItem,
    17   },
    18   data() {
    19     return {
    20       message: "safsadf",
    21       list: [
    22         { id: 0, text: "Vegetables" },
    23         { id: 1, text: "Cheese" },
    24         { id: 2, text: "Whatever else humans are supposed to eat" },
    25       ],
    26     };
    27   }
    28 };
    29 </script>

     注意当循环遍历时,每个组件都会各自独立维护它的 item。因为你每用一次组件,就会有一个它的新实例被创建。

    通常一个应用会以一棵嵌套的组件树的形式来组织。例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。

    Prop 是你可以在组件上注册的一些自定义 attribute。如上面的 props: ["todo"]。当一个值被传递给一个 prop attribute 时,它就成为该组件实例中的一个 property。该 property 的值可以在模板中访问,就像任何其他组件 property 一样。一个组件默认可以拥有任意数量的 prop,无论任何值都可以传递给 prop。

    监听子组件事件

     一些功能可能需要与父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号,同时让页面的其它部分保持默认的字号: 

     1 <template>
     2   <li :style="{fontSize:size+'em'}">{{ todo.text }} <button @click="$emit('enlargeText')">放大字体</button></li>
     3 </template>
     4 <script>
     5 export default {
     6   name: "todo-item",
     7   props: ["todo",'size'],
     8   emits:['enlargeText']
     9 };
    10 </script>

     从示例中,通过添加一个按钮,再通过$emit定义一个事件 enlargeText 暴露出去,在引用的地方进行调用。同时再定义一个变量 size ,供外部传值:

     1 <template>
     2   <div>
     3     <ol>
     4       <todo-item
     5         v-for="item in list"
     6         :todo="item"
     7         :key="item.id"
     8         :size="size"
     9         @enlargeText="onEnlargeText"
    10       ></todo-item>
    11     </ol>
    12   </div>
    13 </template>
    14 <script>
    15 import TodoItem from "./TodoItem.vue";
    16 export default {
    17   name: "Test",
    18   components: {
    19     TodoItem,
    20   },
    21   data() {
    22     return {
    23       message: "safsadf",
    24       size: 1,
    25       list: [
    26         { id: 0, text: "Vegetables" },
    27         { id: 1, text: "Cheese" },
    28         { id: 2, text: "Whatever else humans are supposed to eat" },
    29       ],
    30     };
    31   },
    32   methods: {
    33     onEnlargeText() {
    34       this.size += 1;
    35     },
    36   },
    37 };
    38 </script>
    View Code

    动态组件

    有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里。

    1 <!-- 组件会在 `currentTabComponent` 改变时改变 -->
    2 <component :is="currentTabComponent"></component>

     其中currentTabComponent 是计算属性,component 相当于是一个占位符,currentTabComponent 计算出哪个组件名,DOM就会展现哪个组件。

    有些 HTML 元素,诸如 <ul><ol><table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li><tr> 和 <option>,只能出现在其它某些特定的元素内部。比如以下示例:

    1 <!-- 这样会报错 -->
    2 <table>
    3   <blog-post-row></blog-post-row>
    4 </table>
    5 
    6 <!-- 可以这样解决 -->
    7 <table>
    8   <tr v-is="'blog-post-row'"></tr>
    9 </table>

     v-is 值应为 JavaScript 字符串文本

  • 相关阅读:
    subprocess模块
    面向对象进阶
    python---面向对象学习
    vim命令---存阅
    python基础-软件目录开发规范
    装饰器、迭代器、生成器
    Python基础类型
    使用Git来撤销修改
    使用Git去管理修改
    了解Git的工作区和暂存区
  • 原文地址:https://www.cnblogs.com/EastWind/p/14602132.html
Copyright © 2020-2023  润新知