Vue 第一天

一、Vue快速上手

    1.  Vue 概念

概念：Vue 是一个用于构建用户界面的渐进式框架

      

构建用户界面：基于数据渲染出用户看到的页面

渐进式：循环渐进的学习

框架：一套完整的项目解决方案，提升开发效率

    2.  创建实例

核心步骤：

1. 准备容器

2. 官网引包

3. 创建 Vue 实例    

4. 指定配置项，渲染数据

     el      指定挂载点

     data  提供数据

    3.  插值表达式  

     插值表达式是一种 Vue 的模板语法

作用：利用表达式进行插值，渲染到页面中

语法：{{ 表达式 }}

      表达式：是可以被求值的代码，JS 引擎会将其计算出一个结果

注意：

1. 使用的数据必须存在（data）

2. 支持的是表达式，而非语句  if  for ...

3. 不能在标签属性中使用

    4.  响应性特性

Vue 核心特性：响应式

响应式：数据变化，视图自动更新  

1.  访问数据："实例.属性名"

2.  修改数据："实例.属性名 = 值"

    5.  开发者工具

打开 Vue 运行的页面，调试工具中 Vue 栏，即可查看修改数据，进行调试

---

 

二、Vue 指令

    指令：带有 v- 前缀 的特殊标签属性

    Vue 会根据不同指令，针对标签实现不同功能

•  v-html

作用：动态设置元素的 innerHTML

语法：v-html = "表达式"

 

 

---

•  v-show 和 v-if

 v-show：控制元素显示隐藏

                 语法：v-html = "表达式"    表达式值为 true 显示，false 隐藏

                 原理：切换 display: none 来控制显示隐藏

                 场景：频繁切换显示隐藏的场景

        v-if：控制元素显示隐藏（条件渲染）

                 语法：v-if = "表达式"    表达式值为 true 显示，false 隐藏

                 原理：根据 判断条件 控制元素的创建和移除

                 场景：要么显示，要么隐藏，不频繁切换的场景

•  v-else 和 v-else-if（辅助 v-if 进行条件渲染，不可单独使用）

   v-if  搭配  v-else                      两个显示一个

   v-if  搭配  v-else 和 v-else-if    多个显示一个

 

---

 

•  v-on

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

语法：

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

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

简写：

      @事件名 = "内联语句或者函数名"

 // 内联语句
 <button @click="count++">+</button>

 

    v-on 调用传参 

---

 

•  v-bind

作用：动态设置 html 的标签属性    src、url、title

语法：v-bind:属性名 = "表达式"

简写：:属性名 = "表达式"

---

 

案例

---

 

•  v-for

作用：基于数据循环，多次渲染整个页面

语法：v-for = "(item, index) in 数组"  :key="唯一值"     推荐使用id作为唯一值

           item：每一项

           index：下标

filter 过滤函数：把满足条件的对应项 组成一个新数组，不会改变原数组

 

---

 

•  v-model

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

语法：v-model = "变量"

---

 

三、综合案例 — 小黑记事本

• 列表渲染
• 删除功能
• 添加功能
• 底部统计
• 清空