您现在的位置是：首页 >其他 >vue的学习（1）网站首页其他

1Vue快速上手

1.Vue的概念

概念1：

概念2：

Vue 是一个用于 构建用户界面①的 渐进式 （循序渐进）② 框架 ③ 

• Vue 的两种使用方式：

• ① Vue 核心包开发
• 场景：局部 模块改造
• ② Vue 核心包 & Vue 插件 工程化开发
• 场景：整站 开发

• 优点：大大提升开发效率 (70%↑)
• 缺点：需要理解记忆规则 → 官网

• 总结：

• Vue 是一个用于 构建用户界面 的 渐进式 框架
• 1. 构建用户界面：基于 数据 动态 渲染 页面
• 2. 渐进式：循序渐进的学习
• 3. 框架：一套完整的项目解决方案，提升开发效率↑ (理解记忆规则)
• 规则 → 官网

2.创建实例 

创建 Vue 实例，初始化渲染

总结：

• 创建 Vue 实例，初始化渲染的核心步骤：
• 1. 准备容器
• 2. 引包 (官网) - 开发版本 / 生产版本
• 3. 创建 Vue 实例 new Vue()
• 4. 指定配置项 el data => 渲染数据
• ① el 指定挂载点，选择器指定控制的是哪个盒子
• ② data 提供数据

3.插值表达式{ { }}

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

• 1. 作用: 利用表达式进行插值，渲染到页面中
• 表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

• 1. 作用: 利用表达式进行插值，渲染到页面中
• 表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
• 2. 语法：{ { 表达式 }}

<h3>{
  
  {title}}</h3>
<p>{
  
  {nickname.toUpperCase()}}</p>
<p>{
  
  { age>=18?'成年':'未成年'}} </p>
<p>{
  
  { obj.name}}</p>

<p>{
   
   {hobby}}</p>  (是错的)

<p>{
   
   {if}}</p>X

<p title="{
   
   {username}}">我是一个p标签</p>  X

4.Vue 核心特性：响应式

• 聚焦于数据 → 数据驱动视图
• 使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可

• 总结：

• 1. 什么是响应式呢？
• 数据改变，视图自动更新
• 使用 Vue 开发 → 专注于业务核心逻辑 即可
• 2. 如何访问或修改数据呢？
• data中的数据, 最终会被添加到实例上
• ① 访问数据： "实例.属性名"
• ② 修改数据： "实例.属性名" = "值"

5.安装 Vue 开发者工具：装插件调试 Vue 应用

• （1）通过谷歌应用商店安装 （国外网站）
• （2）极简插件: 下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件

2.Vue指令

• Vue 会根据不同的【指令】，针对标签实现不同的【功能】
• 指令：带有 v- 前缀 的 特殊 标签属性

总结：

• 1. 什么是 Vue 指令呢？
•   指令就是带有 v- 前缀 的特殊 属性，不同属性 对应 不同的功能
•   学习不同指令 → 解决不同业务场景需求
• 2. 如果需要动态解析标签，可以用哪个指令？语法？
•    v-html = "表达式 " → 动态设置元素 innerHTML

1.Vue 指令 v-show vs v-if

• v-show
• 1. 作用： 控制元素显示隐藏
• 2. 语法： v-show = "表达式" 表达式值 true 显示， false 隐藏
• 3. 原理： 切换 display:none 控制显示隐藏
• 4. 场景： 频繁切换显示隐藏的场景

例子：

2.Vue 指令 v-else v-else-if

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

3.Vue 指令 v-on

• 1. 作用： 注册事件
• 2. 语法：
• ① v-on:事件名 = "内联语句"
• ② v-on:事件名 = "methods中的函数名"
• 3. 简写：@事件名

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

还有：

• 1. 作用： 注册事件
• 2. 语法：
• ① v-on:事件名 = "内联语句"
• ② v-on:事件名 = "methods中的函数名"
• 3. 简写：@事件名

<button @click="fn">-</button>

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

4.Vue 指令 v-bind

5.Vue 指令 v-for

<ul>
<li v-for="(item, index) in booksList" :key="item.id">
<span>{
    
    { item.name }}</span>
<span>{
    
    { item.author }}</span>
<button @click="del(item.id)">删除</button>
</li>
</ul>

• 原因：v-for 的默认行为会尝试 原地修改元素 （就地复用）

• 若不进行绑定，后面元素就会继承前面的特征

如

• 注意点：

• 1. key 的值只能是 字符串 或 数字类型
• 2. key 的值必须具有 唯一性
• 3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

6.Vue 指令 v-model

• 1. 作用: 给 表单元素 使用, 双向数据绑定

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

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