vue学习-第三个DEMO(计算属性和监视) v-model基础用法

<div id="demo">
    姓：<input type="text" placeholder="First Name" v-model="fristname"><br>
    名：<input type="text" placeholder="Last Name" v-model="lastname"><br>
    姓名1（单向）：{{fulname1}}<br>
    姓名2（单向）：<input type="text" placeholder="name" v-model="fulname2"><br>
    姓名3（双向）：<input type="text" placeholder="name"><br>
</div>

<script>
    const vm = new Vue({
        el:"#demo",
        data:{
            fristname:"A",
            lastname:"B",
           // fullname1:"A B"
            fulname2:"A B"
        },
        computed:{
            //什么时候执行：初始化的时候，相关的属性数据发生变化的时候
            fulname1(){  //计算属性中的一个方法，方法的返回值作为属性值
                return this.fristname + ' ' + this.lastname;
            }
        },
        watch:{  //配置监视
            fristname:function (value) {    //fristname发生变化
                this.fulname2 = value + ' '+ this.lastname    //this就是vm对象
            }
        }
    })
    vm.$watch('lastname',function (value) {
        //更新fulname2
        this.fulname2 = this.fristname+ ' '+value
    })
</script>

v-model基础用法

(详见https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95)

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

• text 和 textarea 元素使用 value 属性和 input 事件；

• checkbox 和 radio 使用 checked 属性和 change 事件；

• select 字段将 value 作为 prop 并将 change 作为事件。

对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。

在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。