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