👨🏻‍💻's 博客

获取版本号

1

swift -version

Hello world

1

print("Hello, world!")

末尾不需要分号

Transition

<Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。

内置组件可以在任意的组件中被使用，无需注册。它可以将进入和和离开动画应用到传递给它的元素或组件上

进入或离开的触发条件

• 由 v-if 所触发的切换
• 由 v-show 所触发的切换
• 由特殊元素 切换的动态组件
• 改变特殊的 key 属性

1
2
3
4

<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>

介绍

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码

1
2
3
4
5
6
7

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* 可选的选项 */
})

一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数：

对象的写法

1
2
3
4
5

const myPlugin = {
  install(app, options) {
    // 配置此应用
  }
}

学完互动教程,已经有个基本印象,再看看文档,基础部分有涉及了,所以看深入组件那部分文档

注册

全局注册

可以使用 Vue 应用实例的 .component() 方法，让组件在当前 Vue 应用中全局可用

1
2
3
4
5
6
7
8
9
10
11
12

import { createApp } from 'vue'

const app = createApp({})

app.component(
  // 注册的名字
  'MyComponent',
  // 组件的实现
  {
    /* ... */
  }
)

如果使用单文件组件，你可以注册被导入的 .vue 文件：

1
2
3

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

.component() 方法可以被链式调用:

全局注册的组件可以在此应用的任意组件的模板中使用

互动教程(Vue3)

列表渲染

条件语句后是循环操作,也是基本操作

可以使用 v-for 指令来渲染一个基于源数组的列表

1
2
3
4
5

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

这里的 todo 是一个局部变量，表示当前正在迭代的数组元素。它只能在 v-for 所绑定的元素上或是其内部访问，就像函数的作用域一样。

注意，我们还给每个 todo 对象设置了唯一的 id，并且将它作为特殊的 key attribute 绑定到每个 <li>。key 使得 Vue 能够精确地移动每个

为了快速熟悉Vue,学习下互动教程。

早上出门有事情,没学完,学到哪算哪

互动教程(Vue3)

声明式渲染

Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

能在改变时触发更新的状态被认为是响应式的。在 Vue 中，响应式状态被保存在组件中。

小结

1. 使用 data 组件选项来声明响应式状态，该选项应该是一个返回对象的函数
2. 使用双花括号”状态值“渲染文本（双大括号写法又名:mustache语法)
3. 双花括号中的内容并不只限于标识符或路径——我们可以使用任何有效的 JavaScript 表达式

什么是 Vue

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

核心功能

• 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
• 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

声明式渲染:开发界面也是所见即所得

响应性: 比如最近关税问题,对不同国家的关税是有差异,应用就是当外部输入变化时能做出对应响应的东西

Flask 数据库操作

Flask 提供了多种方式来与数据库进行交互，包括直接使用 SQL 和利用 ORM（对象关系映射）工具，如 SQLAlchemy。

1. 使用SQLAlchemy
2. 创建和管理数据库：使用 db.create_all() 创建表。
3. CRUD 操作：添加、读取、更新和删除记录。
4. 查询操作：执行基本和复杂查询，包括排序和分页。
5. Flask-Migrate：使用 Flask-Migrate 管理数据库迁移。
6. 执行原始 SQL：使用原始 SQL 语句进行数据库操作。

表单处理

1. 基本表单处理：使用 request.form 获取表单数据。
2. 使用 Flask-WTF：结合 WTForms 进行表单处理和验证，简化表单操作。
3. 表单验证：使用验证器确保表单数据的有效性。
4. 文件上传：处理文件上传和保存文件。
5. CSRF 保护：确保表单免受跨站请求伪造攻击。

前言

继续…

Flask 模板渲染

模板是包含占位符的 HTML 文件

Flask 使用 Jinja2 模板引擎来处理模板渲染。模板渲染允许你将动态内容插入到 HTML 页面中，使得应用能够生成动态的网页内容。

1. 创建模板：将 HTML 文件放在 templates 文件夹中，使用 Jinja2 占位符。
2. 渲染模板：使用 render_template 函数在视图函数中渲染模板。
3. 模板继承：创建基础模板，允许其他模板继承和扩展。
4. 控制结构：使用条件语句和循环在模板中控制逻辑。
5. 过滤器：使用过滤器格式化变量数据。
6. 宏和模板包含：创建和使用宏以及模板包含，提高模板的复用性。
7. 安全性：Jinja2 默认对模板变量进行自动转义以防止 XSS 攻击。
8. 模板上下文：将数据传递给模板，并在模板中使用这些数据。