Vue生命周期（操作代码）& 常见指令

Vue生命周期

1.先做一个点击增加的功能
实现点击增加功能

<template>
  <div id="app">
    {
   
   { array }}
    <p><button @click="add">add</button></p>
  </div>
</template>

export default {
    
    
  name: 'App',
  data(){
    
    
    return {
    
    
      array: "1",
    }
  },
  components: {
    
    
    // HelloWorld
  },
  methods: {
    
    
    add: function () {
    
    
      this.array++
    },
  },
 }

2.运行项目打开控制台
会看到已经执行了

点击add按钮后

我就不再演示销毁了，道理是一样的

常见指令

1.{ { messarg }}声明式渲染

<template>
  <div id="app">
    <div>{
    
    {
    
     message }}</div>
  </div>
</template>

export default {
    
    
  name: 'App',
  data(){
    
    
    return {
    
    
      message: "Hellow, Vue！",
    }
  },
 }

2.v-if
以下模板不再重复

<h1 v-if="awsome">雷霆嘎巴</h1>

data(){
    
    
    return{
    
    
      awsome:true,//显示
      awsome:false,//不显示
    }
  }

3.v-for循环
2.0版本后:key必须要有

<p v-for="item in items" :key="item.message">
    {
    
    {
    
     item.message }}
</p>

items: [
  {
    
    message:'唱'},
  {
    
    message:'跳'},
  {
    
    message:'rap'},
  {
    
    message:'篮球'}
]

4.v-on:click事件绑定
v-on:可简写为@

<div id="app">
   本场比赛得分： {
    
    {
    
    count}}<br/>
   <button v-on:click="jiafen">加分</button>
   <button v-on:click="jianfen">减分</button>
</div>

data(){
    
    
  return{
    
    
    count:1
  }
},
methods:{
    
    
  jiafen:function(){
    
    
    this.count++;
  },
  jianfen:function(){
    
    
    this.count--;
  }
}

5.v-model双向绑定

<div id="app">
    <p>原始文本信息：{
   
   {message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>

data(){
  return{
    message:'hello Vue!'
  }
},