Vue方法函式備案

whjin發表於2017-11-17

文章已經發布在個人部落格，不斷進行更新歡迎收藏訂閱，或者提出批評意見。

有一些方法函式可能並不經常使用，但是遇到特定場景需要的時候卻想不起來，所以需要把平時碰到的這些方法和函式進行備案，在需要的時候可以查詢。

字串反轉

reverseMessage: function () {
    this.msg = this.msg.split(``).reverse().join(``)
}

Todos

<div id="app">
    <input v-model="newTodo" v-on:keyup.enter="addTodo">
    <ul>
        <li v-for="(todo,index) in todos">
            <span>{{todo.text}}</span>
            <button v-on:click="removeTodo(index)">X</button>
        </li>
    </ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<!--<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.js"></script>-->
<script>
    new Vue({
        data: {
            newTodo: ``,
            todos: [
                {text: `Add some todos`}
            ]
        },
        methods: {
            addTodo: function () {
                var text = this.newTodo.trim();
                if (text) {
                    this.todos.push({text: text});
                    this.newTodo = ``
                }
            },
            removeTodo: function (index) {
                this.todos.splice(index, 1)
            }
        }
    }).$mount(`#app`)
</script>

複選表單

<div id="app">
    <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>
    <br>
    <span>Checked names: {{checkedNames}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
    var vm = new Vue({
        el: `#app`,
        data: {
            checkedNames:[]
        }
    })
</script>

動態選項，用 v-for 渲染

<div id="app">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{option.text}}
        </option>
    </select>
    <br>
    <span>Selected: {{selected}}</span>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
    var vm = new Vue({
        el: `#app`,
        data: {
            selected:`A`,
            options:[
                {text:`One`,value:`A`},
                {text:`Two`,value:`B`},
                {text:`Three`,value:`C`}
            ]
        }
    })
</script>

指令例項屬性

<div id="app">
    <div id="demo" v-demo:hello.a.b="msg"></div>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
    Vue.directive(`demo`, {
        bind() {
            document.write(`demo bound! This is a test dialog.`)
        },
        update(value) {
            this.el.innerHTML =
                `name - ` + this.name + `<br>` +
                `expression - ` + this.expression + `<br>` +
                `argument - ` + this.arg + `<br>` +
                `modifiers - ` + JSON.stringify(this.modifiers) + `<br>` +
                `value - ` + value
        }
    });

    var vm = new Vue({
        el: `#app`,
        data: {
            msg: `Hello Vue.js!`
        }
    })
</script>

物件字面量

<div id="app">
    <div v-demo="styleObj"></div>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
    Vue.directive(`demo`, () => {
        console.log(styleObj.color);
        console.log(styleObj.text)
    });
    var styleObj = {
        color: `red`,
        text: `Hello!`
    };
    var vm = new Vue({
        el: `#app`,
        data: {
            styleObj: styleObj
        }
    })
</script>

MVVM 資料繫結

<!-- 指令 -->
<span v-text="msg"></span>
<!-- 插值 -->
<span>{{msg}}</span>
<!-- 雙向繫結 -->
<input v-model="msg">

利用v-if或者v-show進行條件判定

<div id="app">
    <section v-if="loginStatus">
        輸入您的姓名:<input type="text" v-model="name">
        <button @click="say">歡迎點選</button>
        <button @click="switchLoginStatus">退出登入</button>
    </section>

    <section v-if="!loginStatus">
        登入使用者:<input type="text">
        登入密碼:<input type="password">
        <button @click="switchLoginStatus">登入</button>
    </section>
</div>

<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
    var vm = new Vue({
        data: {
            name: `_Appian`,
            loginStatus: true
        },
        methods: {
            say: function () {
                alert(`歡迎` + this.name)
            },
            switchLoginStatus: function () {
                this.loginStatus = !this.loginStatus;
            }
        }
    }).$mount(`#app`)
</script>

Directive

對 Todo List 輸入的內容進行校驗（表單校驗）。基本邏輯就在在 bind 階段的時候就繫結事件，然後根據 update 時候傳入的 minlength 值來進行判斷。

Directive 基本結構如下：

Vue.directive("minlength", {
    bind: function () {
    },
    update: function (value) {
    },
    unbind: function () {
    }
});

Vue.directive("minlength", {
    bind: function () {
        var self = this,
            el = this.el;
        el.addEventListener("keydown", function (e) {
            if (e.keyCode === 13) {
                if (el.value.length < self.minlength) {
                    e.preventDefault();
                }
            }
        });
        var submit = el.parentNode.querySelector("button,[type=`submit`]");
        submit.disabled = true;
        el.addEventListener("keyup", function (e) {
            submit.disabled = (el.value.length < self.minlength);
        })
    },
    update: function (value) {
        this.minlength = parseInt(value);
    },
    unbind: function () {

    }
});

動態元件

<div id="app">
    <button id="home">Home</button>
    <button id="posts">Posts</button>
    <button id="archive">Archive</button>
    <br>
    <component :is="currentView"></component>
</div>

var vm = new Vue({
    data: {
        currentView: "home"
    },
    components: {
        home: {
            template: `<div>Home</div>`
        },
        posts: {
            template: `<div>Posts</div>`
        },
        archive: {
            template: `<div>Archive</div>`
        }
    }
}).$mount(`#app`);

document.getElementById(`home`).onclick = function () {
    vm.currentView = "home";
};
document.getElementById(`posts`).onclick = function () {
    vm.currentView = "posts";
};
document.getElementById(`archive`).onclick = function () {
    vm.currentView = "archive";
};

使用script或template標籤

使用script標籤

<div id="app">
    <my-component></my-component>
</div>
<script type="text/x-template" id="myComponent">
    <div>This is a test component.</div>
</script>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
    Vue.component(`my-component`, {
        template: `#myComponent`
    });

    new Vue({
        el: "#app"
    });
</script>

使用template標籤

<div id="app">
    <my-component></my-component>
</div>
<template id="myComponent">
    <div>This is a test component.</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
    Vue.component(`my-component`, {
        template: `#myComponent`
    });

    new Vue({
        el: "#app"
    });
</script>

使用props

元件例項的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。可以使用 props 把資料傳給子元件。

props基礎示例

// 將父元件資料通過已定義好的props屬性傳遞給子元件
<div id="app">
    <my-component :my-name="name" :my-age="age"></my-component>
</div>
<template id="myComponent">
    <table>
        <thead>
        <tr>
            <th colspan="2">
                子元件資料
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>my name</td>
            <td>{{myName}}</td>
        </tr>
        <tr>
            <td>my age</td>
            <td>{{myAge}}</td>
        </tr>
        </tbody>
    </table>
</template>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            name: `keepfool`,
            age: 28
        },
        components: {
            `my-component`: {
                template: `#myComponent`,
                props: [`myName`, `myAge`]
            }
        }
    });
</script>

如果我們想使用父元件的資料，則必須先在子元件中定義props屬性，也就是props: [‘myName`, ‘myAge`]這行程式碼。

注意：在子元件中定義prop時，使用了camelCase命名法。由於HTML特性不區分大小寫，camelCase的prop用於特性時，需要轉為 kebab-case（短橫線隔開）。例如，在prop中定義的myName，在用作特性時需要轉換為my-name。

在父元件中使用子元件時，通過以下語法將資料傳遞給子元件：

<child-component v-bind:子元件prop="父元件資料屬性"></child-component>

prop的繫結型別

單向繫結

修改了子元件的資料，沒有影響父元件的資料。
修改了父元件的資料，同時影響了子元件。

prop預設是單向繫結：當父元件的屬性變化時，將傳導給子元件，但是反過來不會。這是為了防止子元件無意修改了父元件的狀態。

雙向繫結

可以使用.sync顯式地指定雙向繫結，這使得子元件的資料修改會回傳給父元件。

前端Vue：函式式元件
2019-05-07
前端Vue函式元件
Vue函式式元件的應用
2021-12-08
Vue函式元件
Date函式方法
2020-10-27
函式
java方法/函式
2020-12-23
Java函式
vue在一個函式中呼叫另外一個函式
2019-02-21
Vue函式
vue所有生命週期函式/鉤子函式理解
2018-12-16
Vue函式
Vue中render函式的使用
2018-01-31
Vue函式
vue tendet函式簡單分享
2017-09-04
Vue函式
如何理解Vue的render函式
2017-08-29
Vue函式
Sanic websocket() 方法/函式
2019-06-04
Web函式
Sanic exception() 方法/函式
2019-06-04
Exception函式
Sanic get() 方法/函式
2019-06-04
函式
Sanic post() 方法/函式
2019-06-04
函式
Sanic delete()方法/函式
2019-06-04
delete函式
Sanic listener() 方法/函式
2019-06-04
函式
Sanic route() 方法/函式
2019-06-04
函式
Sanic run() 方法/函式
2019-06-04
函式
Sanic static() 方法/函式
2019-06-04
函式
JavaScript | 函式與方法
2018-08-31
JavaScript函式
scala 函式和方法
2015-10-30
函式
round函式與trunc函式的使用方法
2016-12-13
函式
【函式】Oracle中聚合函式rank()使用方法
2012-04-25
函式Oracle
vue3函式setUp和reactive函式詳細講解
2021-06-09
Vue函式React
Excel函式公式大全，辦公文員必備Excel函式公式
2018-11-03
Excel函式公式
Vue核心知識-Vue的元件之render函式
2018-09-08
Vue元件函式
Vue 中 render 函式有點意思
2020-02-27
Vue函式
Vue元件實現函式防抖
2019-02-28
Vue元件函式
Vue實現函式防抖元件
2019-03-03
Vue函式元件
Vue生命週期鉤子函式
2019-07-12
Vue函式
Vue原始碼: 建構函式入口
2019-05-02
Vue原始碼函式
Vue 原始碼中的工具函式
2022-07-06
Vue原始碼函式
# vue3 ref 和 reactive 函式
2022-07-03
VueReact函式
# Vue3 toRef 和 toRefs 函式
2022-07-04
Vue函式
理解Vue中的Render渲染函式
2017-09-15
Vue函式
VBA 自定義常用函式 (備用)
2020-03-30
函式
JS 利用高階函式實現函式快取(備忘模式)
2017-12-20
JS函式快取模式
Sanic middleware() 方法/函式
2019-06-04
函式
Sanic url_for() 方法/函式
2019-06-04
函式