初識Vue2（一）：表單輸入綁定（附Demo）

在線演示

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)
        }
      },
});

 

計算機屬性和偵聽器

一、計算機屬性

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 同樣在模板中綁定計算屬性。

 

二、偵聽器

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

這就是爲何 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 創做不易，任何人或團體、機構所有轉載或者部分轉載、摘錄，請在文章明顯位置註明做者和原文連接。