文章目录

• 前言
• 一、Vue的安装和创建
• 二、Vue基本使用
• 三、props中的属性限制
• 四、生命周期
• • 组件装载期间
  • 组件更新期间
  • 组件销毁期间

前言

下面正式介绍在终端创建Vue项目。

一、Vue的安装和创建

二、Vue基本使用

用法与我们在引入链接时的差不多，所以这里将之前Vue复习（1）：引入Vue链接创建项目里面做过的练习，这里再写一遍
首先是文件目录：

<template>
  <div id="app" @click="add">
     {{num}}
     {{test}}
     <Demo name="Lucy" :age="123  "></Demo>
  </div>
</template>

<script>
import Demo from './components/Demo.vue'
export default {
  name: 'App',
  data:function(){
    return{
      num:100,
    }
  },
  components:{
    Demo:Demo
  },
  methods:{
    add:function(){
      this.num++;
    }
  },
  computed:{
    test:function(){
      return this.num%2==0?"偶数":"奇数"
    }
  }
}
</script>

<template>
    <div>
        <p>{{name}}</p>
        <p>{{age}}</p>
    </div>
</template>

<script>
export default {
    name:"Demo",
    props:{
        name:String,
        age:{
            type:Number,
        }
    }
}
</script>

代码结果显示（点击num加1，会判断奇偶，下方显示props参数）

三、props中的属性限制

如下对于age的限制， default:100000,指的是如果你没有传递age这个属性后的默认值，required:true则是强制性传递age，不然会报错

然后就是validator限制，你可以直接规定你的值的范围或满足其他的条件，这一限制是针对值的。 例如下面的代码：

这里的限制就是要求你的值大于5，不然就是不合法的，然后就会报错

四、生命周期

组件装载期间

1.beforeCreate

观察下面代码，在beforeCreate中打印data中的状态和调用methods中的函数，

<template>
  <div id="app" @click="add">
    {{num}}
  </div>
</template>

<script>
export default {
  name: 'App',
  data:function(){
    return{
       num:100,
       value:111
    }
  },
  methods:{
     add(){
       this.num++;
     }
  },
  beforeCreate(){
     console.log(this.num)
     console.log(this.value)
     this.add()
  }
}
</script>

结果如下，可以发现，状态的打印结果是underfined，而函数的调用则开始报错：

2.created

<template>
  <div id="app" @click="add">
    {{num}}
  </div>
</template>

<script>
export default {
  name: 'App',
  data:function(){
    return{
       num:100,
       value:111
    }
  },
  methods:{
     add(){
       this.num++;
     }
  },
  // beforeCreate(){
  //    console.log(this.num)
  //    console.log(this.value)
  //    this.add()
  // }
  created(){
    console.log(this.num)
    console.log(this.value)
    this.add()
  }
}
</script>

结果如下，add调用加1，显示结果：

3.beforeMount

<template>
  <div id="app" @click="add">
    {{num}}
  </div>
</template>

<script>
export default {
  name: 'App',
  data:function(){
    return{
       num:100,
       value:111
    }
  },
  methods:{
     add(){
       this.num++;
     }
  },
  beforeMount(){
     console.log(this.num)
     this.add()
     console.log(document.getElementById('app').innerText)
  }
}
</script>

结果34行打印为空。

4.mounted
此时已经将编译好的模板挂载到了页面上显示

<template>
  <div id="app" @click="add">
    {{num}}
  </div>
</template>

<script>
export default {
  name: 'App',
  data:function(){
    return{
       num:100,
       value:111
    }
  },
  methods:{
     add(){
       this.num++;
     }
  },
  mounted(){
     console.log(this.num)
     this.add()
     console.log(document.getElementById('app').innerText)
  },
}
</script>

组件更新期间

5.beforeUpdate

6.updated

两者代码一起写，比较观察：

<template>
  <div id="app" @click="add">
    {{num}}
  </div>
</template>

<script>
export default {
  name: 'App',
  data:function(){
    return{
       num:100,
       value:111
    }
  },
  methods:{
     add(){
       this.num++;
     }
  },
  beforeUpdate(){
    console.log('-------完成更新前-------')
    console.log('这是data里的num',this.num)
    console.log('这是页面上的num',document.getElementById('app').innerText)
  },
  updated(){
    console.log('-------完成更新后-------')
    console.log('这是data里的num',this.num)
    console.log('这是页面上的num',document.getElementById('app').innerText)
  }
}
</script>

组件销毁期间

7.beforeDestroy

8.destroyed