Vue声明式渲染、条件与循环、事件绑定、双向绑定及生命周期

详情见vue官网

1. 声明式渲染
   {{ message }}
   App.vue：

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

export default {
  name: 'App',
  data() {
    return {
      message: 'hello word!',
    }
  },
}

2. 条件与循环
   v-if ： 条件性地渲染一块内容
   也可以用 v-else 添加一个“else 块”，

    <!-- 条件与循环： 为true显示if块内容，false显示else块内容-->
    <p v-if="seen">现在你看到我了</p>
    <p v-else>现在你看到否则内容</p>

  data() {
    return {
      seen: false,
    }
  },

v-for ：一个数组来渲染一个列表
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<template>
  <div id="app">
    <ol>
    <-- v-bind:key的简写方式为:key -->
      <li v-for="totd in toods"
          :key="totd.id">
        {{ totd.text}}
      </li>
    </ol>
  </div>
</template>

export default {
  name: 'App',
  data() {
    return {
      toods: [
        { id: 1, text: 'in后面是自定义数组名称' },
        { id: 2, text: ':key="item"' },
        { id: 3, text: '给每一个循环绑定一个标识' }
      ]
    }
  },
}

· v-for 还支持一个可选的第二个参数，即当前项的索引。

<template>
  <div id="app">
    <ol>
      <li v-for="(item,index) in toods"
          :key="item">
        {{index+1}}:{{ item.text}}
      </li>
    </ol>
  </div>
</template>

export default {
  name: 'App',
  data() {
    return {
      toods: [
        { text: 'in后面是自定义数组名称', name: 'aaa' },
        { text: ':key="item"', name: 'aaa' },
        { text: '给每一个循环绑定一个标识', name: 'aaa' }
      ],
    }
  },
}

4. 事件绑定 v-on:click

<template>
  <div id="app">
     <button v-on:click="reverseMessage">反转消息</button>
     <-- 简写时v-on可省略 -->
     <button @click="reverseMessage">反转消息2</button>
  </div>
</template>

export default {
  name: 'App',
  data() {
    return {
      message:"反转信息"
    }
  },
  methods: {
    //reverseMessage:function(){},:function可省略
    // split() 方法用于把一个字符串分割成字符串数组。
    // reverse() 方法用于颠倒数组中元素的顺序。
    // join() 方法用于把数组中的所有元素放入一个字符串。
    reverseMessage(){
        this.message=this.message.split('').reverse().join('')
    },
  }
}入代码片

6. 双向绑定 v-model

数据双向绑定 **表单元素

<input type="text" v-model="vmodel">
<p>{{vmodel}}</p>

8. 生命周期
   Vue实例从创建到销毁的过程，就是生命周期。
   共8个阶段：
   ① beforeCreate（创建前）
   ② created（创建后）
   ③ beforeMount（载入前）
   ④ mounted（载入后）
   ⑤ beforeUpdate（更新前）
   ⑥ updated（更新后）
   ⑦ beforeDestory（销毁前）
   ⑧ destoryed（销毁后）
   vue第一次加载会触发哪几个钩子函数？
   beforeCreate、created、beforeMount、mounted
   DOM渲染在哪几个周期中就已经完成？
   mounted
   关于生命周期的介绍