初識Vue2（一）：表單輸入繫結（附Demo）

學習中的苦與樂發表於2021-05-19
Vue

線上演示

http://demo.xiongze.net/

下載地址

https://gitee.com/xiongze/Vue2.git

js引用

<!--這裡可以自己下載下來引用，也可以使用外部動態連結引用-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

基礎用法

你可以用 v-model 指令在表單<input>、<textarea> 及<select>素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。

儘管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理。

v-model 會忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將 Vue 例項的資料作為資料來源。

你應該通過 JavaScript 在元件的 data 選項中宣告初始值。

 

v-model  在內部為不同的輸入元素使用不同的 property 並丟擲不同的事件：

  • text 和 textarea 元素使用 value property 和 input 事件；
  • checkbox 和 radio 使用 checked property 和 change 事件；
  • select 欄位將 value 作為 prop 並將 change 作為事件。

對於需要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model 不會在輸入法組合文字過程中得到更新。

如果你也想處理這個過程，請使用 input 事件。

 

點選事件和提示框

HTML

<div id="example">
  <button v-on:click="say('我是按鈕，你點選了我')">按鈕點選</button>
</div>

JS

//一個vue的例項
new Vue({
    el: '#example',
    data: {
        msg: 'Hello!'
    },
 　 //函式（用於彈框）
     methods: {
        say: function (i) {
            alert(i)
        }
      },
});

 

計算機屬性和偵聽器

1、計算機屬性

HTML

<div id="example">
  <div>計算屬性：{{toUp}}</div>
  <inputtype="text" v-model="ipt2">
</div>

JS

//一個vue的例項
        new Vue({
            el: '#example',
            data: {
                msg: 'Hello!',
                ipt: '我是計算機屬性'
            },

            //計算屬性
            computed: {
                toUp: function () {
                    var that = this;
                    var temp = that.ipt;
                    return temp;
                }
            },
        });

這裡我們宣告瞭一個計算屬性 toUp

你可以像繫結普通 property 一樣在模板中繫結計算屬性。

 

2、偵聽器

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。

這就是為什麼 Vue 通過 watch  選項提供了一個更通用的方法，來響應資料的變化。

當需要在資料變化時執行非同步或開銷較大的操作時，這個方式是最有用的。

HTML

<div id="example">
  <input type="text" v-model="ipt2">
</div>

JS

//一個vue的例項
        new Vue({
            el: '#example',
            data: {
                msg: 'Hello!',
                ipt2: '我是觀察者(偵聽器)'
            },
          //函式（用於彈框）
            methods: {
                say: function (i) {
                    alert(i)
                }
            },

            //觀察者
            watch: {
                // 如果 `ipt2` 發生改變，這個函式就會執行
                ipt2: function (newVal) {
                    this.say(newVal)
                    //console.log(this.ipt2);
                }
            }
        });

使用 watch 選項允許我們執行非同步操作 (訪問一個 API)，限制我們執行該操作的頻率，並在我們得到最終結果前，設定中間狀態。這些都是計算屬性無法做到的。

除了 watch 選項之外，您還可以使用命令式的 vm.$watch API。

 

文字

HTML

<div id="example">
   <input v-model="message" placeholder="單行文字">輸入的值: {{ message }}
</div>

JS

//一個vue的例項
new Vue({
    el: '#example',
    message :"",
});

 

多行文字

HTML

<div id="example">
   <textarea v-model="message" placeholder="多行文字"></textarea><br />
    <span>輸入的值:</span>
    <p style="white-space: pre-line;">{{ message }}</p>
</div>

JS

//一個vue的例項
new Vue({
    el: '#example',
    message :"",
});

 

自定義元件(簡單)：輸出指定內容

在註冊一個元件的時候，我們始終需要給它一個名字。比如在全域性註冊的時候我們已經看到了：

Vue.component('my-component-name', { /* ... */ })

該元件名就是 Vue.component 的第一個引數。

你給予元件的名字可能依賴於你打算拿它來做什麼。

當直接在 DOM 中使用一個元件 (而不是在字串模板或單檔案元件) 的時候，

我們強烈推薦遵循 W3C 規範中的自定義元件名 (字母全小寫且必須包含一個連字元)。

這會幫助你避免和當前以及未來的 HTML 元素相沖突。

你可以在風格指南中查閱到關於元件名的其它建議。

 

HTML

<div id="example">
  <simple></simple>
</div>

JS

// 註冊一個全域性自定義元件 simple
Vue.component("simple", Vue.extend({
    template: '<div>我是一個div塊哦</div>'
}));

//一個vue的例項
new Vue({
    el: '#example'
});

 

自定義元件(複雜)：輸出一個ul無序列表

HTML

<div id="example">
  <do-list v-bind:data="list">

   </do-list>
</div>

JS

// 註冊一個複雜全域性自定義【元件】 do-list
Vue.component("do-list", Vue.extend({
    //(父子傳參)子元件要顯式地用 props 選項宣告它預期的資料：
    props: ['data'],
    template: `
    <ul>
        <li v-for="item in data">{{item.name}}</li>
    </ul>
`
}));

//一個vue的例項
new Vue({
    el: '#example',
    list: [
        { name: '西遊記', author: '吳承恩' },
        { name: '紅樓夢', author: '曹雪芹' },
        { name: '水滸傳', author: '施耐庵' },
        { name: '三國演義', author: '羅貫中' }
     ],
});

 

核取方塊

HTML

<div id="example">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <span>選中的值: {{ checkedNames }}</span>
</div>

JS

//一個vue的例項
new Vue({
    el: '#example',
    checkedNames: [],   //多選
});

 

單選按鈕

HTML

<div id="example">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>選中的值: {{ picked }}</span>
</div>

JS

//一個vue的例項
new Vue({
    el: '#example',
    picked: '',    //單選
});

 

下拉選擇框

HTML

<div id="example">
    <select v-model="selected">
        <option disabled value="">請選擇</option>
        <option>Vue 1.x</option>
        <option>Vue 2.x</option>
        <option>Vue 3.x</option>
    </select>
    <span>選中的值: {{ selected }}</span>
</div>

JS

//一個vue的例項
new Vue({
    el: '#example',
    selected: ''  //單選框
});

如果 v-model 表示式的初始值未能匹配任何選項，<select> 元素將被渲染為“未選中”狀態。

在 iOS 中，這會使使用者無法選擇第一個選項。因為這樣的情況下，iOS 不會觸發 change 事件。

因此，更推薦像上面這樣提供一個值為空的禁用選項。

 

歡迎關注訂閱微信公眾號【熊澤有話說】，更多好玩易學知識等你來取
作者：熊澤-學習中的苦與樂
公眾號：熊澤有話說
出處： https://www.cnblogs.com/xiongze520/p/14764147.html
創作不易，任何人或團體、機構全部轉載或者部分轉載、摘錄，請在文章明顯位置註明作者和原文連結。  

 

相關文章