在線演示

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>

//一個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>

//一個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>

//一個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>

//一個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>

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

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

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

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

該組件名就是 Vue.component 的第一個引數，

你給予組件的名字可能依賴于你打算拿它來做什么，

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

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

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

你可以在風格指南中查閱到關于組件名的其它建議，

HTML

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

// 注冊一個全域自定義組件 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>

// 注冊一個復雜全域自定義【組件】 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>

//一個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>

//一個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>

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

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

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

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285922.html

標籤：jQuery

上一篇：jQuery 筆記

下一篇：jQuery的鏈式編程風格

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

在線演示

下載地址

js參考

基礎用法

點擊事件和提示框

計算機屬性和偵聽器

文本

多行文本

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

自定義組件(復雜)：輸出一個ul無序串列

復選框

單選按鈕

下拉選擇框