Vue入門基礎（雙向數據綁定）

時間 2019-12-22

標籤 vue 入門基礎雙向數據綁定简体版

原文原文鏈接

V-model指令javascript

v-model.htmlhtml

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Insert title here</title>
</head>

<body>
    <div id="vue-app-model-events">
        <h1>雙向數據綁定 input /select /textarea</h1>
        <label>姓名</label>
        <!-- model 綁定 給vue對象的屬性賦值 lazy是輸入完再觸發-->
        <input type="text" v-model.lazy="name" />
        <span>{{name}}</span>

        <label>年齡</label>
        <input type="text" v-model="age" />
        <span>{{age}}</span>
    </div>

</body>
<script src="v-model.js">
</script>

</html>

v-model.jsvue

new Vue({
    el: '#vue-app-model-events',
    data() {
        return {
            name: "",
            age: 32
        }
    },
    methods: {
       
    }
});

頁面效果java

ref指令（功能相似js的選擇器）和 watch 方法（屬性值變化觸發）npm

ref.htmlapp

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Insert title here</title>
</head>

<body>
    <div id="vue-app-ref-events">
        <h1>ref 和 watch</h1>
        <label>姓名</label>
        <!-- 經過ref 能夠獲取refs中對應name的值 觸發方法getName-->
        <input type="text" ref="name" @keyup="getName" />
        <span>{{name}}</span>

        <label>年齡</label>
        <!-- 經過ref 能夠獲取refs中對應age的值 -->
        <input type="text" ref="age" @keyup="getAge" />
        <span>{{age}}</span>

        <button v-on:click="getref()">測試獲取ref的值</button>
    </div>

</body>
<script src="ref.js">
</script>

</html>

ref.js測試

new Vue({
    el: '#vue-app-ref-events',
    data() {
        return {
            name: "",
            age: 32
        }
    },
    methods: {
        getName() {
            //console.log(this.$refs.name.value);
            this.name = this.$refs.name.value;
        },
        getAge() {
            this.age = this.$refs.age.value;
        },
        getref(pms) {
            this.name = this.$refs.name.value + "666";
            //反過來改變標識上的值
            this.$refs.name.value = this.name;
        }
    },
    watch: { //watch  監聽vue的屬性值  發生變化時觸發
        name(v, o) {
            console.log(v, o);
        },
        age(v, o) {
            console.log(v, o);
        }
    }
});

頁面效果this