vue详解（1） - 技术栈

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

准备容器
引包 (官网) - 开发版本 / 生产版本
CDN：<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
创建 Vue 实例 new Vue()
指定配置项 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:事件名 = "内联语句"

简写：@事件名

javascript 复制代码

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

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

javascript 复制代码

<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 调用传参

javascript 复制代码

<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**:属性名**="表达式"
注意：简写形式 :属性名="表"

javascript 复制代码

<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进行列表项的正确排序复用。

javascript 复制代码

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

注意点：

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

Vue 指令 v-model

1.作用：给 表单元素 使用, 双向数据绑定 → 可以快速获取或设置表单元素内容

① 数据变化 → 视图自动更新

② 视图变化 → 数据自动更新

2.语法: v-model = '变量'