Vue快速學習_第二節

時間  2019-12-10
標籤 vue 快速 學習 第二 简体版
原文   原文鏈接
  • 表單輸入綁定(v-model)

v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向數據綁定(注意只在表單這幾個能夠,實際上就是負責監聽用戶的輸入事件以更新數據)html

注意:v-model 會忽略全部表單元素的 value、checked、selected 特性的初始值而老是將 Vue 實例的數據做爲數據來源.vue

v-model 在內部爲不一樣的輸入元素使用不一樣的屬性並拋出不一樣的事件：數組

  • text 和 textarea 元素使用 value 屬性和 input 事件；app

  • checkbox 和 radio 使用 checked 屬性和 change 事件；函數

  • select 字段將 value 做爲 prop 並將 change 做爲事件。組件化

上面的解釋來源於官網,感受不錯就拿過來了,好了,接着來實際操做下看看吧post

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <!--下面是v-model使用實例,雙向數據綁定-->
    <!--1.input文本使用-->
    <input type="text" v-model="msg" placeholder="請輸入值">
    <p>{{ msg }}</p>
    <br>
    <!--2.textarea富文本使用,這樣一旦一個改變,界面上全部引用的地方都會改變,
    在文本區域插值 (<textarea>{{text}}</textarea>) 並不會生效，應用 v-model 來代替。-->
    <textarea v-model="msg" placeholder="富文本輸入"></textarea>
    <br>
    <!--3.單個複選框使用,checked選中就是true,沒選中就是false-->
    <input type="checkbox" id="checked" v-model="checked">
    <!--label的做用就是for關聯對應的id標籤,點擊label文本就至關於點擊了input-->
    <label for="checked">{{ checked }}</label>
    <br>
    <!--4.多個複選框使用-->
    <div>
        <input type="checkbox" id="c1" value="apple" v-model="checked_list">
        <label for="c1">apple</label>
        <input type="checkbox" id="c2" value="banana" v-model="checked_list">
        <label for="c2">banana</label>
        <input type="checkbox" id="c3" value="peach" v-model="checked_list">
        <label for="c3">peach</label>
        <br>
        <!--將選擇的value值存入checked_list中-->
        <span>多選的是: {{ checked_list }}</span>
    </div>
    <br>
    <!--5.單選使用,一樣是存儲value值-->
    <div>
        <input type="radio" id="r1" value="apple" v-model="radio_one">
        <label for="r1">apple</label>
        <input type="radio" id="r2" value="banana" v-model="radio_one">
        <label for="r2">banana</label>
        <br>
        <span>單選的是: {{ radio_one }}</span>
    </div>
    <br>
    <!--6.選擇框的使用-->
    <div>
        <!--v-model 表達式的初始值未能匹配任何選項，<select> 元素將被渲染爲「未選中」狀態,
        因此建議用下面的方法,第一個爲請選擇可是設置disabled-->
        <select v-model="selected">
            <!--在v-model下select下的option要設置value=""纔會默認第一個顯示-->
            <option disabled value="">請選擇</option>
            <option>A</option>
            <!--有value就會將value值賦值給selected,沒有則用文本的B-->
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
        <span>你的選擇是: {{ selected }}</span>
    </div>
    <br>
    <!--7.多選綁定到一個數組-->
    <div>
        <!--data裏面selecteds爲一個空數組-->
        <select multiple v-model="selecteds">
            <option disabled value="">請選擇</option>
            <option>A</option>
            <!--有value就會將value值賦值給selected,沒有則用文本的B-->
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
        <span>你的選擇是: {{ selecteds }}</span>
    </div>
    <!--依舊是多選,可是是用v-for動態渲染-->
    <div>
        <!--select_for賦值了A,所以會默認選中value爲A的選項-->
         <select v-model="select_for">
            <option v-for="(item, index) in option_list" :key="index" :value="item.value">{{ item.text }}</option>
        </select>
    </div>
    <br>
    <!--8.值的綁定,對於單選按鈕，複選框及選擇框的選項，v-model 綁定的值一般是靜態字符串 (對於複選框也能夠是布爾值),
    可是有時咱們可能想把值綁定到 Vue 實例的一個動態屬性上，這時能夠用 v-bind 實現，而且這個屬性的值能夠不是字符串-->
    <input type="radio" v-model="toggle" v-bind:value="bind_value">
    <!--value的值變成了動態屬性bind_value-->
    <span>{{toggle}}</span>
    <br>
    <!--9.修飾符 .lazy,在「change」時而非「input」時更新 ,也就是輸入中不改變msg,回車或肯定時改變-->
    <input v-model.lazy="msg" >
    <br>
    <!--10.修飾符 .number,自動將用戶的輸入值轉爲數值類型-->
    <input v-model.number="age" type="number">
    <br>
    <!--11.修飾符 .trim,自動過濾用戶輸入的首尾空白字符-->
    <input v-model.trim="msg">

</div>
</body>
<script src="vue.js"></script>
<script>
    // 多選列表數據
    var options = [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ];
    new Vue({
        el: '#box',
        data(){
            return {
                msg: '',
                checked: false,
                checked_list: [],
                radio_one: '',
                selected: '',
                selecteds: [],
                option_list: [],
                // 初始化給了A,這樣select就會選中value爲A的選項
                select_for: 'A',
                toggle: '',
                bind_value: '值被綁定了',
                age: '',
            }
        },
        created(){
            this.option_list = options
        }
    })
</script>
</html>

  • 組件化開發

  1. 全局組件(通用組件能夠考慮變成全局組件)

    // 聲明全局組件, 第一個參數是組件的名字(Vbtn), 第二個參數是options,聲明完以後就能夠在其餘組件調用,不須要掛載
    Vue.component('Vbtn', {
        data(){
            return {
                msg: '按鈕'
            }
        },
        template:`<button>{{ msg }}</button>`
    });

  2. 局部組件

    遵循三步驟: 聲子(建立組件), 掛子(掛載到父組件), 用子(父組件使用子組件),下面代碼使用包含全局組件的調用this

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">
        <!--直接使用App組件-->
        <App/>
    </div>

</body>
<script src="vue.js"></script>
<script>
    /* 注意:若是僅僅是實例化Vue實例化對象中 既有el又有template,若是template中定義模板的內容,
    那麼template模板的優先級大於el,就會使用template的內容,沒有的話就會使用el的內容 */

    // 聲明全局組件, 第一個參數是組件的名字(Vbtn), 第二個參數是options,聲明完以後就能夠在其餘組件調用,不須要掛載
    Vue.component('Vbtn', {
        data(){
            return {
                msg: '按鈕'
            }
        },
        // 經過slot插槽分發內容(組件傳遞內容),就至關於別的組件調用傳值會替換slot標籤的位置
        template:`<button>
                <slot></slot>
            </button>
        `
    });

    // 定義App下的header區域,第一步聲子,,而後App父組件就能夠調用了
    let Vheader = {
        data(){
            return {
                header_login: '登陸',
                header_reg: '註冊',
            }
        },
        // 定義herader區域的模板內容,使用全局組件Vbtn,界面顯示登陸和註冊按鈕
        template:`
        <div>
            <Vbtn>{{ header_login }}</Vbtn>
            <Vbtn>{{ header_reg }}</Vbtn>
        </div>
        `
    };

    // 1.聲子, Vue中 組件的名字首字母必須大寫(與標籤區分),組件中的data必須是一個函數且要有返回值,這裏定義一個App
    let App = {
         data(){
             return {
                name: 'liu',
             }
         },
        // 定義App組件內容,使用App組件的內容,注意template裏面必定是有一個根標籤包裹所有標籤,使用Vheader
        template:`
            <div class="app1">
                <h2>{{ name }}</h2>
                <Vheader/>
                <Vbtn>提交</Vbtn>
            </div>
        `,
        components: {
             // 掛載header組件
             Vheader
        }
    };

    new Vue({
        el:'#box',
        data(){
            return {

            }
        },
        // 組件掛載
        components:{
            // 2.掛子,若是key和value(App:App)同樣能夠只寫一個(App)
            // App:App
            App
        }
    })

</script>
</html>

  3. 組件的嵌套(單向數據流)

  4. 父子組件傳值

    • 父往子傳值(props)spa

      1. 在子組件中 使用props聲明(注意要聲明一個數組),能夠直接在子組件中任意使用code

        // 子組件Vheader
let Vheader = {
    data(){
        return {
        }
    },
    // 在子組件中 使用props聲明(注意要聲明一個數組),能夠直接在子組件中任意使用
    props:['t_name', 'title', 'post2'],
    // 定義herader區域的模板內容,下面是使用父組件傳過來的值
    template:`
    <div>
    <span>{{ t_name }}</span>
    <span>{{ title }}</span>
    <span>{{ post2.title }}</span>
    </div>
    `
    };

      2. 父組件要定義自定義屬性

        // 父組件App
let App = {
    data(){
        // 父組件的數據
        return {
            name: 'liu',
            post1: {
                id: 1,
                title: 'My Journey with Vue'
            },
            post2: {
                id: 2,
                title: 'test post'
            }
        }
    },
    // 傳入一個對象的全部屬性能夠v-bind="post1"也能夠:post2="post2",第一種至關於 v-bind:id="post1.id"和v-bind:title="post1.title",因此在子組件中直接接收id和title並使用.
    template:`
    <Vheader :t_name="name" v-bind="post1" :post2="post2"></Vheader>
    `,
    components: {
        // 掛載header組件
        Vheader
    }
};

    • 子往父傳值(經過事件向父級組件傳值,示例也包含了父向子傳值)

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">
        <!--直接使用App組件-->
        <App/>
    </div>

</body>
<script src="vue.js"></script>
<script>
    // 全局組件Vbtn
    Vue.component('Vbtn', {
        data(){
            return {
            }
        },
        props:['id'],
        template:`<button @click="clickHandler">
                {{ id }}
            </button>
        `,
        methods:{
            // 1.點擊觸發clickHandler方法,接着$emit就去觸發父組件的事件方法
            clickHandler(){
                // $emit是vue方法,第一個參數寫父組件聲明自定義的事件,第二個參數傳值
                this.$emit('headerClick', this.id)
            }
        }
    });

    // Vheader組件
    let Vheader = {
        data(){
            return {
            }
        },
        props:['post'],
        // 2.父組件自定義事件,子組件點擊按鈕後經過$emit()觸發父組件的headerClick中的headerHandler方法
        template:`
        <div>
            <Vbtn :id="post.id" @headerClick="headerHandler"></Vbtn>
        </div>
        `,
        methods: {
            // 3.觸發方法後,接着又去觸發app父組件的appClick事件
            headerHandler(val){
                this.$emit('appClick', val)
            }
        }
    };

    // App父組件
    let App = {
         data(){
             return {
                name: 'liu',
                 post: {
                      id: 1,
                      title: 'My Journey with Vue'
                    },
             }
         },
        // 4.header子組件經過$emit()觸發父組件的appClick中的appHandler方法
        template:`
            <div class="app1">
                <Vheader :t_name="name" :post="post" @appClick="appHandler"></Vheader>
            </div>
        `,
        components: {
             // 掛載header組件
             Vheader
        },
        methods:{
             // 5.該方法就是接收子組件的傳值,並加1,從新賦值渲染界面
             appHandler(val){
                 val++;
                 this.post.id = val;
             }
        }
    };

    new Vue({
        el:'#box',
        data(){
            return {
            }
        },
        // 組件掛載
        components:{
            App
        }
    })

</script>
</html>

  5. 平行組件傳值

注意:A->B傳值,那麼B要聲明事件,經過$on('事件的名稱', function(){}), A則要觸發事件 $emit('B組件中聲明的事件名', '值val'),還有記住,前提條件是這兩個方法必須綁定在同一個實例化對象中(好比let bus = new Vue()),同時綁定到bus上
let bus = new Vue();
// 全局組件Test, Test向Vheader傳值msg, 所以$emit('Vheader組件中聲明的事件名', '值val')
Vue.component('Test', {
    data(){
        return {
            msg: '我是全局子組件的數據',
        }
    },
    template:`<button @click="clickHandler">
按鈕
</button>
`,
    methods:{
        clickHandler(){
            // $emit和$on的事件要同樣
            bus.$emit('testData', this.msg)
        }
    }
});

// Vheader組件
let Vheader = {
    data(){
        return {
            // 定義一個text接收msg
            text: ''
        }
    },
    template:`
<div>
<Test />
{{ text }}
</div>
`,
    methods: {
    },
    // 接收$emit()傳過來的值
    created(){
        // 這裏的是bus調用,this指的是bus,因此要指向Vheader就須要用箭頭函數指向父級
        bus.$on('testData', (val) => {
            this.text = val;
        })
    }
};
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程