1. 创建 Vue 实例，初始化渲染的核心步骤：

1. 准备容器
2. 引包 (官网) – 开发版本 / 生产版本
   CDN：<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
3. 创建 Vue 实例 new Vue()
4. 指定配置项 el data => 渲染数据
   ① el 指定挂载点，选择器指定控制的是哪个盒子
   ② data 提供数据

2. 插值表达式

作用及语法：

利用表达式进行插值，将数据渲染页面中
语法格式：{{ 表达式 }}

插值表达式的注意点：

① 使用的数据要存在 （data）
② 支持的是表达式，而非语句 if … for
③ 不能在标签属性里面使用

3. 如何访问或修改数据呢？

data中的数据, 最终会被添加到实例上

• 访问数据： "实例.属性名"
• 修改数据： "实例.属性名" = "值"
  app.message = "你好"

4. Vue 指令

定义：带有 v- 前缀 的 标签属性;不同属性 对应 不同的功能

v-html:

作用：动态解析标签
语法：v-html = "表达式"
场景：动态设置元素 innerHTML

Vue 指令 v-show 和 v-if

v-show

• 作用： 控制元素显示隐藏
• 语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
• 原理： 切换 display:none 控制显示隐藏
• 场景： 频繁切换显示隐藏的场景（下拉框）

v-if

• 作用： 控制元素显示隐藏（条件渲染）
• 语法： v-if = "表达式" 表达式值 true 显示， false 隐藏
• 原理： 基于条件判断，是否 创建 或 移除元素节点
• 场景： 要么显示，要么隐藏，不频繁切换的场景（登录成功与否）

Vue 指令 v-else 和 v-else-if

• 作用： 辅助 v-if 进行判断渲染
• 语法： v-else v-else-if = "表达式"
• 注意： 需要紧挨着 v-if 一起使用

Vue 指令 v-on

• 作用： 注册事件 = 添加监听 + 提供处理逻
• 语法：
  

  v-on:事件名 = "内联语句"

  简写：@事件名

  <button v-on:click="count++">按钮</button>
  //简写写法
  <button @click="count++">按钮</button>

  v-on:事件名 = "methods中的函数名"

  <div id="app">
  <button @click="fn">切换显示隐藏</button>
  </div>
  <script>
  const app4 = new Vue({
    el: '#app',
    data: {
      isShow: true
    },
    methods: {
      fn () {
        // 让提供的所有methods中的函数，this都指向当前实例app4
        // console.log('执行了fn', app4.isShow)
        // console.log(app4 === this)
        this.isShow = !this.isShow
      }
    }
  })
  </script>

• 注意：methods函数内的 this 指向 Vue 实例

Vue 指令 v-on 调用传参

<div id="app">
<button @click="fn(2,3)">按钮</button>
</div>
<script>
    const app4 = new Vue({
      el: '#app',
      methods: {
        fn (a1,b1) {
         console.log(`这是一个${a1+b1} 函数`)
        }
      }
    })
  </script>

Vue 指令 v-bind

• 作用： 动态的设置html的标签属性 → src url title …
• 语法： v-bind:属性名="表达式"
• 注意： 简写形式 :属性名="表"

<div id="app">
    <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    <img :src="imgUrl" :title="msg" alt="">
  </div>
 <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgUrl: '图片路径',
        msg: 'hello 波仔'
      }
    })
  </script>

Vue 指令 v-for

• 作用： 基于数据循环， 多次渲染整个元素→ 数组、对象、数字
• 遍历数组语法：v-for = "(item, index) in 数组"
• item 每一项， index 下标
• 另一种写法省略index: v-for = "item in 数组"

v-for 中的 key

key作用：给元素添加的唯一标识，便于Vue进行列表项的正确排序复用。

要分清修改元素内容和删除元素的区别：不加key（元素没变，变的是里面的内容罢了）

注意点：

• key 的值只能是 字符串 或 数字类型
• key 的值必须具有 唯一性
• 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）
  <li v-for="(item,index) in xxx" :key="唯一值">

Vue 指令 v-model

1.作用：给 表单元素 使用, 双向数据绑定 → 可以快速 获取 或 设置 表单元素内容
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
2.语法: v-model = ‘变量’