前端Vue学习笔记（一）

一、计算属性和监听

遇到报错：Component template should contain exactly one root element

意思就是：组件模板只能包含一个根元素

检查代码发现：标题标签和div都在外面了 只保留一个根元素即可解决。

<template>
  <div id="demo">
    <h1>计算属性和监听</h1>
    姓：<input type="text" placeholder="first name" v-model="firstName"><br>
    名：<input type="text" placeholder="last name" v-model="lastName"><br>
    姓名1：<input type="text" placeholder="full name1" v-model="fullName1"><br>
    姓名2：<input type="text" placeholder="full name2" v-model="fullName2"><br>
    姓名3：<input type="text" placeholder="full name3" v-model="fullName3"><br>
  </div>
  <script>
    export default {
      name: "testOne",
      data(){
        return{
          firstName:'A',
          lastName:'B',
          fullName2:'A B',
          fullName3:'C',
        }
      },
      computed:{
        // 什么时候执行：1.初始化页面的时候 2.data中的属性值发生改变的时候
        fullName1(){ // 计算属性的方法，方法的返回值作为一个属性
          return this.firstName + ' ' + this.lastName
        }
      },
      watch:{
        // 方法名为监视的属性名
        firstName:function (val) {
          this.fullName2 = val + this.lastName
        }
      }
    }
  </script>
</template>