【Vue】Day01

¶写在前面 / 链接存档

• ‍⁠⁠‬‍⁠‍‍‬‌⁠‍‌‍‬‬‬‌⁠‍‬‬‬‬‬‬前端框架 Vue2 + Vue3 全套教程 - 飞书云文档

• 因为项目涉及到改前端，而且看样子要求还挺高，所以要认真学一下了

Day01

¶创建Vue实例

¶核心步骤（4步）

1. 准备容器
2. 引包（官网） — 开发版本/生产版本
3. 创建Vue实例 new Vue()
4. 指定配置项，渲染数据
   1. el:指定挂载点
   2. data提供数据

¶插值表达式｛｛｝｝

（用英文符号，这里是为了通过hexo的部署，英文双括号符号会报错）

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

• 可以被求值的代码，JS引擎会讲其计算出一个结果

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

2. 语法

• 插值表达式语法：｛｛ 表达式 ｝｝

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

3. 错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

4. 总结

   1. 插值表达式的作用是什么

   2. 语法是什么

   3. 插值表达式的注意事项

¶响应式特性

简单理解：数据变，视图对应变

1. 如何访问 和 修改 data中的数据（响应式演示）

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

① 访问数据： 实例.属性名

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

2. 总结

1. 什么是响应式

2. 如何访问和修改data中的数据呢

¶Vue开发者工具安装

• 通过谷歌应用商店安装（国外网站）
• 极简插件下载（推荐） https://chrome.zzzmh.cn/index

• 安装之后可以F12后看到多一个Vue的调试面板

¶Vue中的常用指令

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

学习目的：提高程序员操作 DOM 的效率

• vue 中的指令按照不同的用途可以分为如下 6 大类：
  • 内容渲染指令（v-html、v-text）
  • 条件渲染指令（v-show、v-if、v-else、v-else-if）
  • 事件绑定指令（v-on）
  • 属性绑定指令 （v-bind）
  • 双向绑定指令（v-model）
  • 列表渲染指令（v-for）
• 指令是 vue 开发中最基础、最常用、最简单的知识点