Vue方法函式備案

whjin發表於2017-11-17
Vue函式

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

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

  1. 字串反轉
  2. Todos
  3. 複選表單
  4. 動態選項，用 v-for 渲染
  5. 指令例項屬性
  6. 物件字面量
  7. MVVM 資料繫結
  8. 利用v-if或者v-show進行條件判定
  9. Directive
  10. 動態元件
  11. 使用script或template標籤
  12. 使用props
  13. 使用script或template標籤

字串反轉

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的繫結型別

單向繫結

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

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

雙向繫結

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

相關文章