學習資料

慕課網 - vue2.5入門

基礎語法

示例程式碼1

<div id="root">
    <h1>hello {{msg}}</h1>
</div>
<script>
    new Vue({
        el: "#root",
        template: '<h1>hello {{msg}}</h1>',
        data: {
            msg: "world"
        }
    })
</script>

掛載點：vue例項繫結的dom節點

模板：掛載點輸出的內容，可以直接在掛載點內部編寫，也可以通過template屬性實現。

示例程式碼1中div標籤內部的<h1>hello {{msg}}</h1>和vue中的template: '<h1>hello {{msg}}</h1>'效果一致

例項: 指定掛載點、指定模板、繫結資料後可以自動結合模板、資料生成最終要展示的內容，並放到掛載點之中

插值表示式：兩個花括號包裹一個變數

{{msg}} 就是一個插值表示式

示例程式碼2

<div id="root">
    <div v-html="msg" v-on:click="handleClick"></div>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "<h1>hello</h1>"
        },
        methods: {
            handleClick: function () {
                this.msg = 'world'
            }
        }
    })
</script>
 

指令

• v-html: 以html格式解析變數
• v-text: 以文字格式輸出變數
• v-on: 事件繫結，簡寫為@
• v-bind: 屬性繫結，簡寫為:
• v-model: 雙向資料繫結
• v-if: 不符合條件時整個元素dom都清除，符合條件時再重新建立該dom
• v-show: 不符合條件時，dom元素增加display:nonecss屬性，
• v-for: 用法(item, index) in/of list，item是元素列表每個元素值，index是每個元素的索引值

事件

click就是一個點選事件, v-on:click表示繫結一個點選事件，簡寫方式為@click

示例程式碼3

<div id='app'>
    <h1 v-html='msg' v-on:click='handleClick' v-bind:title='title1'></h1>
    <input v-model='content'/>
    <div>{{content}}</div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            msg: 'hello world',
            title1: 'this is a title',
            content: 'this is content'
        },
        methods: {
            handleClick: function () {
                this.msg = 'ready to learn'
            }
        }
    })
</script>
 

雙向資料繫結: 當頁面資料變化時，變數的值也會同時變化

示例程式碼4

<div id='app'>
    姓 <input v-model="firstName">
    名 <input v-model="lastName">
    <div>{{fullName}}</div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            firstName: '',
            lastName: '',
        },
        // 計算屬性
        computed: {
            fullName : function () {
                return this.firstName + ' ' + this.lastName
            }
        },
        // 偵聽器
        watch: {
            firstName: function () {
                this.count ++
            },
            lastName: function () {
                this.count ++
            },
            //等價於
            fullName: function () {
                this.count ++
            },
        }
    })
</script>

計算屬性: 一個屬性的值是通過其他屬性計算得來

偵聽器: 監聽一個屬性的變化後進行資料處理

示例程式碼5

<input v-model="todo"/>
    <button @click="submit">提交</button>
    <div v-for="(item, index) in todoList" :key="index" v-model="todoList">
        <input type="checkbox" /> {{item}}
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            todo: '',
            todoList: []
        },
        methods: {
            submit: function () {
                this.todoList.push(this.todo)
                this.todo = ''
            }
        },

    })
</script>

效果圖

• 給列表增加元素:push()

元件

頁面中的某一部分

全域性元件: 在掛載點中可以直接使用

Vue.component('todo-item', {
    template: "<li>item</li>"
})

區域性元件: 需要在例項中宣告才能在掛載點中使用

var TodoItem = {
    template: "<li>item</li>"
}
new Vue({
    // ...
    // 註冊區域性元件
    components: {
        'todo-item': todoItem
    },
    // ...
})

元件傳值: 接收外部傳遞的屬性值

外部傳值

<todo-item v-for="(item, index) in todoList" :key="index" :content="item"></todo-item>

元件接收

Vue.component('todo-item', {
    props: ["content"],
    template: "<li>{{content}}</li>"
})

父子元件通訊：

子元件=>父元件：子元件通過釋出訂閱模式，向父元件傳遞資料

父元件=>子元件：父元件的模板中增加屬性，子元件中接收屬性

父元件的模板中使用子元件模板:

<!-- @delete="checkout"用於訂閱子元件的delete事件，並觸發父元件的checkout方法-->
<todo-item
    v-for="(item, index) in todoList"
    :key="index"
    :content="item"
    :index="index"
    @delete="checkout"
></todo-item>

子元件：

Vue.component('todo-item', {
    // 接收屬性值
    props: ["content", "index"],
    template: "<li @click='checkout'>{{content}}</li>",
    methods: {
        // 子元件模板中的checkout事件
        checkout: function () {
            // 釋出訂閱模式, 釋出delete事件
            this.$emit('delete', this.index)
        }
    }
})

父元件：

new Vue({
    el: "#app",
    data: {
        todo: '',
        todoList: []
    },
    methods: {
        submit: function () {
            this.todoList.push(this.todo)
            this.todo = ''
        },
        checkout: function (index) {
            this.todoList.splice(index, 1)
        }
    },
})