Vue学习笔记

一、 简介

• Vue.js 是一款流行的 JavaScript 前端框架，目的是简化 Web 开发。
• Vue 所关注的核心是 MVC 模式中的视图层，同时，它也能方便地获取数据更新，实现视图与模型的交互。

二、基本使用

1. 单向和双向绑定指令

• 单向绑定v-bind

<!-- 插值表达式 -->
{{msg}}
<!-- 单向绑定v-bind，简写使用冒号： -->
<div style="color: red;">
{{msg}}
</div>
<!-- v-bind -->
<div v-bind:style="mycolor">
{{msg}}
</div>
<!-- 冒号简写 -->
<div :style="mycolor">
{{msg}}
</div>

• 双向绑定v-model

<!-- 双向绑定 -->
<!-- 插值表达式 -->
{{msg}}
<!-- 单向绑定 -->
<input :value="msg"></input>
<!-- 双向绑定 -->
<input v-model="msg"></input>

2. 绑定事件
   v-on:事件名称=“调用方法”

<!-- 绑定事件 -->
<button v-on:click="show()">我是按钮</button><br>
<button @click="show()">我也是按钮</button>

3. 条件指令

<!-- 复选框，选中为true,未选中为false -->
<!-- 逻辑：复选框和v-if都绑定了数据ok，其中复选框是双向绑定。
当我们没有勾选复选框时，ok值为false，页面显示v-else里的内容，
当我们勾选复选框时，由于复选框做了双向绑定，复选框变成true，ok也变成true，所以页面显示v-if的内容-->
<input type="checkbox" v-model="ok" ></input></br>
<div v-if="ok">选中了</div>
<div v-else>没选中</div>

4. 循环指令

<!-- 循环指令 -->
<div v-for="user in userList">
{{user.name}} --- {{user.age}}
</div>
<!-- 遍历下标 -->
<div v-for="(user,index) in userList">
{{index}} --- {{user.name}} --- {{user.age}}
</div>

5. 生命周期
   注意生命周期函数都在methods外面

• 创建阶段
  beforeCreare：实例创建之前，这个时候什么都没有 data methods 都不能用 也没有 this
  created ：创建之后，页面渲染之前，也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了
  beforeMount：组件挂载之前
  mounted：页面渲染之后，组件挂载之后 这个时候能拿到 dom 节点使用
• 运行阶段(修改 data 就会触发)
  beforeUpdate ：数据变了 视图还没变
  updated：数据变了 视图也变了
• 销毁阶段
  beforeDestory：组件销毁之前 是最后一个能使用 data 和 methods 的钩子函数
  destoryed：组件销毁之后