我的 github 地址 - vue3.0Study - 階段學習成果都會建立分支。

==========================

新元件 - 新路由 Forms.vue ( 下面僅介紹如何創立, 不進行介紹 ) ：

<template><div class="form">
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</div></template>

<script>
export 
 
default {
  name: 'forms', // eslint-disable-next-line
  data: function () { return { 
    d: '' // eslint-disable-next-line
  } }
}
</script>

新建路由 ( 在 router.js 中 )：

import Forms from './views/Forms.vue'

export default new Router({
  routes: [
    { path: '/', .......},
    {
      path: 
 
'/form',
      name: 'forms',
      component: Forms
    },
    { path: '/about', ......}
  ]
})

這樣就建立新的路由，這塊我建立了新的 git commit。

注意：元件名稱儘量滿足以下要求：1、勿採用 HTML 標籤名；2、勿採用 vue 內部保留的名稱如 slot ( 插槽 )、partial、component等。3、以字母開頭。更加詳細的元件命名內容請參見：https://cnodejs.org/topic/5816aabdcf18d0333412d323

文字表單

貼個程式碼，具體的使用方法不多介紹：

<template><div class="form">
  <input v-model="message1" placeholder="單行文字">
  <p>單行文字: {{ message1 }}</p>

  <span>多行文字:</span>
  <p>{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文字"></textarea>
</div></template>

<script>
export default {
  name: 'forms', // eslint-disable-next-line
  data: function () { return { 
    message1: '',
    message2: '差值' // eslint-disable-next-line
  } }
}
</script>

需要注意的是：<textarea v-model="message2" placeholder="多行文字">{{ someProp }}</textarea> 中的紅色部分無效。

選擇框

<label for="cd" style="color:green">單選框：</label>
  <input type="checkbox" id="cd" v-model="checked1">
  <label for="cd">{{ checked1 }}</label>

  <div>
    <label for="jack" style="color:green">複選集合：</label>
    <input type="checkbox" id="name1" value="章三" v-model="checkedNames">
    <label for="name1">章三</label>
    <input type="checkbox" id="name2" value="里斯" v-model="checkedNames">
    <label for="name2">里斯</label>
    <input type="checkbox" id="name3" value="王五" v-model="checkedNames">
    <label for="name3">王五</label>
    <br>
    <span>所選的人有: {{ checkedNames }}</span>
  </div>

  <div>
    <label style="color:green">單選集合：</label>
    <input type="radio" id="nan" value="男" v-model="picked">
    <label for="nan">男</label>
    <input type="radio" id="nv" value="女" v-model="picked">
    <label for="nv">女</label>
    <br>
    <span>性別是: {{ picked }}</span>
  </div>

  <div>
    <label style="color:green">單選下拉框：</label>
    <select v-model="selected1">
      <option disabled value="">請選擇</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>選擇的是: {{ selected1 }}</span>
  </div>

  <div>
    <label style="color:green">多選下拉框：</label>
    <select v-model="selected2" multiple style="width: 50px;">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <span>選擇的是: {{ selected2 }}</span>
  </div>

export default {
  name: 'forms', // eslint-disable-next-line
  data: function () { return {
    checked1: null,
    checkedNames: [],
    picked: null,
    selected1: null,
    selected2: [],
    message1: null,
    message2: null // eslint-disable-next-line
  } }
}

注意：儘管有的選擇框，無須在 data 屬性中也宣告同樣的屬性，但別這麼做，任何選擇框的屬性，都應該在 data 宣告該屬性。

對於多選框，也可以採用 v-for 來迴圈顯示，讀者可自行實驗。

值繫結

上面介紹那些選擇框，屬性繫結的預設的值。對此先來看看下面這個例子：

<input type="checkbox" id="cd" v-model="checked1">
<label for="cd">{{ checked1 }}</label>


<input
  type="checkbox"
  id="cd1"
  v-model="checked11"
  true-value="有效"
  false-value="無效"
>
<label for="cd1">{{ checked11 }}</label>

上面的例子，是系統預設的，選中之後 checked1 是 true。下面就是修改了選中之後，屬性 checked11 對應的值，也就是【有效】。

再比如：<label style="color:green">繫結到a：<input type="radio" v-model="pick" v-bind:value="a"></label>

其中 v-bind:value="a" 意思：選中之後，data.pick = data.a 。在 js 中 data 必須要設定這兩個屬性，且 a 要有初始值。

可以繫結到物件：<label style="color:green">繫結到物件：<input type="radio" v-model="pick1" v-bind:value="{a:1}"></label>

也可以：<label style="color:green">繫結到物件：<input type="radio" v-model="pick1" v-bind:value="obj"></label>

對於所有的上面介紹的表單，都可以採用這種值繫結，限於篇幅，不一一介紹。

最後還有 - 修飾符

.lazy   .number   .trim

.lazy 改變 input 和 textarea 輸入框的更新模式。上面的兩個輸入框的例子，都是在敲鍵盤一邊輸入一邊更新；加入這個之後，變成失去焦點才會更新。

.number 則是將強制輸入轉換為 Number 型別。

.trim 去掉輸入的字串空格 ( 注意：加入之後，不但首尾的空格會去掉，中間部分連續多個空格會替換為單個空格 )。

比如如下例子： <textarea v-model.trim="message2" placeholder="多行文字"></textarea>

=================

今天的學習到此為止，程式碼都已更新。