VUE3技术报告

news2025/6/26 17:46:03

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

node和webstorm基本概念

1. Node.js

基于 Chrome V8 引擎的 JavaScript 运行环境。类似与Java运行环境jdk。

2. npm

npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。类似于java中的Maven。

npm的初衷：JavaScript开发人员更容易分享和重用代码。

3.Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

4. Vue

是一款用于构建用户界面的 JavaScript 框架(类似 view),基于标准 HTML、CSS 和 JavaScript 构建，提供了一套 声明式的、组件化的编程模型。

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

webstorm创建vue项目

1. 通过npx create-vue创建vue项目

在这里插入图片描述

在这里插入图片描述

目录结构：

目录详情
node_modulesnpm 加载的项目依赖包
build项目构建(webpack)相关代码
config配置目录，包括端口号等。我们初学可以使用默认的
public公共资源目录
src项目核心文件(我们所写的代码都放在这里)
src/assets静态资源文件(样式类文件)，放置一些图片，如logo等
src/components公共组件，目录里面放了一个组件文件，可以不用
src/App.vue根组件,又叫项目入口文件,一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)，项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录
src/main.js程序入口文件,main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例
static静态资源(一般存放图片资源)
.gitignoregit上传需要忽略的文件位置
package.json项目基本配置信息
External Libraries外部依赖包
dist使用 npm run build 命令打包后会生成该目录
index.html首页入口文件，你可以添加一些 meta 信息或统计代码啥的
.xxxx文件配置文件，包括语法配置，git配置等

在这里插入图片描述

在这里插入图片描述

运行项目：
在这里插入图片描述
双击dev即可运行
在这里插入图片描述
在这里插入图片描述

2. 通过npx --package @vue/cli vue创建vue项目

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
运行：
在这里插入图片描述
双击serve
在这里插入图片描述
在这里插入图片描述

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

VUE3起步-创建应用-挂载应用

1. createApp 创建函数&mount挂载应用

  • Vue3 中的应用通过使用 createApp 函数来创建的，语法格式如下：

    const app = Vue.createApp({ /* 选项 */ })

  • 传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。

    如：Vue.createApp(HelloVueApp).mount('#hello-vue')
    使用 mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中

  • HTML 页面中有一个 div 元素：{{ }} 用于输出对象属性和函数返回值。
    {{ message }} 对应应用中 message 的值

  • HelloVueApp应用中的data 选项是一个函数。

    Vue 在创建新组件实例的过程中调用此函数。它应该 返回一个对象，
    然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

  • 实现：

    <!DOCTYPE html>
<!--Vue3 起步学习-->
<!--
Vue3 中的应用通过使用 createApp 函数来创建的，语法格式如下：
const app = Vue.createApp({ /* 选项 */ })
传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。
如：Vue.createApp(HelloVueApp).mount('#hello-vue')
使用 mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中
-->
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--HTML 页面中有一个 div 元素：{{ }} 用于输出对象属性和函数返回值。
{{ message }} 对应应用中 message 的值
-->
<div id="hello-vue" class="demo">
    {{ message }}
</div>

<!--Vue的HelloVueApp应用，
data 选项是一个函数。Vue 在创建新组件实例的过程中调用此函数。它应该返回一个对象，
然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
-->
<script>
    const HelloVueApp = {
        data() {
            return {
                message: 'Hello Vue!!'
            }
        }
    }
    // 创建HelloVueApp应用，mount('#hello-vue') 将 Vue 应用 HelloVueApp 挂载到 <div id="hello-vue"></div> 中
    Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>


</body>
</html>

    运行结果：在这里插入图片描述

2. 创建应用中的data选项

data 选项是一个函数，Vue 在创建新组件实例的过程中调用此函数。它应该 返回一个对象， 然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。

  • 下面实例属性仅在实例首次创建时被添加，所以你需要确保它们都在 data 函数返回的对象中。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue测试实例-data</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"></div>

<script>
//    创建一个应用app 返回值为4
const app = Vue.createApp({
    data () {
        return { count: 4}
    }
})
// 将Vue应用app挂载到id为app的div中
const vm = app.mount('#app')

// 将返回值写到页面
// 输出vm.$data页面会显示[object Object]
document.write(vm.$data) //[object Object]
document.write(vm.$data.count) //4
document.write('<br>')
document.write(vm.count) // 4
document.write('<br>')
// 修改vm.count的值也会更新$data.count
vm.count = 5
document.write(vm.$data.count)
document.write('<br>')
// 修改$data.count的值也会更新vm.count
vm.$data.count = 6
document.write(vm.count) // 6




</script>

</body>
</html>

    在这里插入图片描述

3. methods方法

可以在组件中添加方法，使用 methods 选项，该选项包含了所需方法的对象。

  • 以下实例我们添加了 methods 选项，选项中包含了 increment() 方法：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue测试实例-methods选项</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo"></div>

<script>
//    创建一个应用app
const app = Vue.createApp({
    // 返回值为4
    data () {
        return { count: 4}
    },
//     添加methods选项
    methods: {
    //     用increment实现count++自增
        increment() {
        //     this指向该组件实例
            this.count++
        }

    }

})
// 将Vue应用app挂载到id为app的div中
const vm = app.mount('#app')
document.write(vm.count)
document.write('<br>')
document.write(vm.$data.count)
document.write('<br>')
// 调用自增方法
vm.increment()
document.write(vm.$data.count)
document.write('<br>')





</script>

</body>
</html>

    在这里插入图片描述

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用

1. 概念

Vue 指令（Directives）是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用，用于将 响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。

Vue 指令是带有前缀 v- 的特殊 HTML 属性，它赋予 HTML 标签额外的功能。

与传统的 JavaScript 方法相比，使用 Vue 创建响应式页面要容易得多，并且需要的代码更少。

以下是几个常用的 Vue 指令：

在这里插入图片描述

2. 实例

2.1 使用v-model 指令实现表单数据双向绑定

v-model : 实现表单数据双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue测试实例- v-mode实现单数据双向绑定</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    在div中创建一个输入框 将Vue3中的应用中的message绑定到文本输入框-->
    <input type="text" v-model="message">
    <p>{{ message }}</p>
</div>

<script>
//    定义Vue3的HelloVueApp应用
const HellVueApp = {
    // 设置返回值message
    data() {
        return {
            message: 'Hello Vue！！v-mode实现单数据双向绑定'
        }
    }
}

// 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
Vue.createApp(HellVueApp).mount('#app')
</script>

</body>
</html>

在这里插入图片描述

2.2 v-bind数据绑定到HTML元素属性上

v-bind：将数据绑定到HTML元素属性上

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-bind数据绑定到HTML元素属性上</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    使用 v-bind 指令将 Vue 实例的数据绑定到 HTML 元素的属性上-->
    <img v-bind:src="imageSrc">
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message
        data() {
            return {
                imageSrc: 'https://static.runoob.com/images/code-icon-script.png'
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

在这里插入图片描述

2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件

v-if 和 v-else ：根据表达式的值来条件性地渲染元素或组件，相当于if-else语句

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件：</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件,相当于if-else语句
        showMessage值为true：页面输出Hell Vue!
        showMessage值为false：页面输出GoodBye Vue!
    -->
    <p v-if="showMessage">Hell Vue!</p>
    <p v-else>GoodBye Vue!</p>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message
        data() {
            return {
               // showMessage: true
                showMessage: false
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

  • showMessage值为true：页面输出Hell Vue!
    在这里插入图片描述

    在这里插入图片描述

  • showMessage值为false：页面输出GoodBye Vue!
    在这里插入图片描述

    在这里插入图片描述

2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件

v-for ：根据数组的属性值循环渲染元素或组件，相当于Java中的for循环

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环
    循环将返回的列表展示在页面-->
   <ul>
       <li v-for="item in items" key="item.id">
<!--           相当于用item.id遍历items-->
           {{ item.text }}
       </li>
   </ul>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值为一个列表
        data() {
            return {
               items: [
                   { id: 1, text: 'Item 1'},
                   { id: 2, text: 'Item 2'},
                   { id: 3, text: 'Item 3'}
               ]
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

在这里插入图片描述

  • 注意：返回值是一个列表
    在这里插入图片描述
    在页面显示利用item.id循环遍历显示每个item的值item.text
    在这里插入图片描述

2.5. v-show 根据表达式的值来条件性地显示或隐藏元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-show 是 Vue.js 提供的一种指令，用于根据表达式的值来条件性地显示或隐藏元素</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    定义一个按钮 设置点击按钮显示或者隐藏文字 showMessage值为true则显示Hello Vue，showMessage值为false则不显示
相当于每点击一次将showMessage的值重新设置为！showMessage
如showMessage为true时，点击按钮showMessage值变为false-->
<button v-on:click="showMessage = !showMessage">显示/隐藏</button>
<p v-show="showMessage">Hello Vue</p>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值为一个列表
        data() {
            return {
               showMessage: true
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：点击按钮会显示或隐藏Hello Vue文字

在这里插入图片描述

在这里插入图片描述

  • 注意：应用返回值showMessage始终为true

    在这里插入图片描述

    通过按钮控制：设置点击按钮显示或者隐藏文字 showMessage值为true则显示Hello Vue，showMessage值为false则不显示

    相当于每点击一次将showMessage的值重新设置为！showMessage
    如showMessage为true时，点击按钮showMessage值变为false

    标签<p/>设置为始终显示Hello Vue，通过点击按钮控制showMessage为true或false
    在这里插入图片描述

2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 使用 v-on 指令在 HTML 元素上绑定事件监听器</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
<!--    设置每个元素的style-->
    <style>
//        id为app的style
        #app {
            border: dashed black 1px;
            display: inline-block;
            padding-bottom: 10px;
        }
        // 按钮的style
        #app > button {
            display: block;
            margin: auto;
        }
//        id为lightDiv的div的style
        #lightDiv {
            position: relative;
            width: 150px;
            height: 150px;
        }
//        id为lightDiv的div中img的style
        #lightDiv > img {
            position: relative;
            width: 100%;
            height: 100%;
        }
//        id为lightDiv的div的style
        #lightDiv > div {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            border-radius: 50%;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    在id为app的div中创建一个id为lightDiv的div-->
   <div id="lightDiv">
       <!--    在id为lightDiv的div中创建一个div 显示lightOn-->
       <div v-show="lightOn"></div>
       <img src="https://static.runoob.com/images/svg/img_lightBulb.svg" decoding="async">
   </div>
    <!--    添加一个按钮 控制开关 用v-on:click设置点击按钮切换lightOn的值-->
    <button v-on:click="lightOn =! lightOn">开/关</button>

</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值为一个列表
        data() {
            return {
                lightOn: false
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：点击开关实现点亮/关闭灯泡
在这里插入图片描述
在这里插入图片描述

  • 注意：HelloVueApp应用返回值为lightOn为false

    在这里插入图片描述

    关键：在button标签中用v-on:click设置点击切换lightOn的值（true/false）
    lightOn值的变化会在<div v-show="lightOn"></div>标签中发生变化
    在这里插入图片描述

    文章目录

    • node和webstorm基本概念
      • 1. Node.js
      • 2. npm
      • 3.Webpack
      • 4. Vue
    • webstorm创建vue项目
      • 1. 通过npx create-vue创建vue项目
      • 2. 通过npx --package @vue/cli vue创建vue项目
    • VUE3起步-创建应用-挂载应用
      • 1. createApp 创建函数&mount挂载应用
      • 2. 创建应用中的data选项
      • 3. methods方法
    • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
      • 1. 概念
      • 2. 实例
        • 2.1 使用v-model 指令实现表单数据双向绑定
        • 2.2 v-bind数据绑定到HTML元素属性上
        • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
        • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
        • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
        • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
    • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
      • 1. 概念
      • 2. 插值
        • 2.1 文本
        • 2.2 HTML
      • 3. 属性
      • 4. 表达式
      • 5. 指令
      • 6. 参数
      • 7. 修饰符
      • 8. 用户输入
      • 9. v-on指令监听
      • 10. 缩写
    • Vue3条件语句-v-if/v-else/ v-else-if/v-show
      • 1. v-if
      • 2. v-else
      • 3. v-else-if
      • 4. v-show
    • 循环语句详解
      • 1. 循环使用 v-for 指令
      • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
      • 3. 模板template 中使用 v-for
      • 4. v-for 迭代对象-第一个参数为value
      • 5. v-for的第二个参数为键名
      • 6. v-for的第三个参数为索引
      • 7. v-for迭代整数
      • 8. computed计算属性显示过滤/排序后的结果
      • 9. v-for/v-if 联合使用
      • 10. 扩展小计`==`和`===`的区别
      • 11. 在组件上使用v-for实现todo-list
    • Vue3 组件Component
      • 1. 概念
      • 2. 实例
        • 2.1 全局组件实例
          • 2.1.1 概念
          • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
          • 2.1.3 组件的复用
        • 2.2 局部组件
          • 2.2.1 概念
          • 2.2.2 局部组件实例
        • 2.3 Prop子组件
        • 2.4 动态 Prop
      • 3. 在组件上使用v-for实现todo-list
      • 4. Prop 验证
    • Vue3 计算属性computed
      • 1. 引入-翻转字符串实例
      • 2. computed vs methods
      • 3. computed setter
    • Vue3 监听属性-watch
      • 1. 概念
      • 2. 实例
        • 2.1 通过使用 watch 实现计数器
        • 2.2 千米与米之间的换算
        • 2.3 异步加载中使用 watch
        • 2.4 小计
    • Vue3样式绑定
      • 1. class 属性绑定
        • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
        • 1.2 在对象中传入更多属性用来动态切换多个 class
        • 1.3 直接绑定数据里的一个对象
        • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
        • 1. 5 数据语法
        • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
      • 2. Vue.js style(内联样式)
        • 2.1 v-bind:style 直接设置样式
        • 2.2 直接绑定到一个样式对象
        • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
        • 2.4 多重值
      • 3. 组件上使用 class 属性
        • 3.1 带有单个根元素的自定义组件上使用 class 属性
        • 3.2 组件有多个根元素
    • Vue3事件处理
      • 1. 概念
      • 2. 实例
        • 2.1 点击按钮次数+1
        • 2.2 v-on 可以接收一个定义的方法来调用
        • 2.3 内联 JavaScript 语句
        • 2.4 事件处理程序中调用多个方法
      • 3. 事件修饰符
      • 4. 按键修饰符
    • Vue3表单
      • 1. 概念
      • 2. 输入框
      • 3. 复选框
      • 4. 单选按钮
      • 5. select下拉列表
        • 5.1 下拉列表单选
        • 5.1 下拉列表多选时绑定到数组
        • 5.3 使用 v-for 循环输出选项
      • 6. 值绑定
      • 7. 修饰符
        • 7.1 .lazy
        • 7.2 .number
        • 7.3 .trim
    • Vue3自定义指令
      • 1. 自定义全局指令v-focus
      • 2. 自定义局部指令v-focus
      • 3. 指令定义的钩子函数
        • 3.1 概念
        • 3.2 钩子函数参数
        • 3.3 vnode & prevNode
        • 3.4 简写
        • 3.5 指令函数接受JavaScript表达式
    • Vue3路由
      • 1. 载入vue-router 库
      • 2. 实例
        • 2.1 Vue.js + vue-router 实现单页应用
        • 2.2 router-link创建链接
        • 2.3 router-view显示与url对应组件
        • 2.4 `<router-link>` 相关属性
    • Vue3混入
      • 1. 概念
      • 2. 选项合并
      • 3. 全局合并
    • WebStorm使用Element组件库
      • 1. webstorm使用组件库
        • 1.1 webstorm使用vue文件
        • 1.2 首先需要安装Element Plus
      • 2. 项目完成引入---按钮组件
      • 3. 引入日历组件
      • 4. 引入走马灯组件
      • 5. image组件
        • 5.1 懒加载滚动
        • 5.2 大图预览
      • 6. Collapse 折叠面板手风琴组件
      • 8. Descriptions 描述列表

Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写

1. 概念

Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

2. 插值

2.1 文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

  • {{...}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。

    在这里插入图片描述

  • 注意： 如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。

    once 指令的主要优势在于可以有效减少组件的渲染次数，提高页面的渲染性能。特别是对于那些不需要响应式更新的静态内容，使用 v-once 指令可以大大减轻浏览器的压力，从而提升用户体验。

     比如，在一个电商网站的商品列表中，每个商品展示的标题、价格等信息都相对稳定，不需要进行频繁的变动，此时就可以使用 v-once 指令来减少页面的渲染次数，提高页面渲染效率。

    <script setup>
import {ref} from "vue"

const count = ref(0)

setInterval(() => {
  count.value++
}, 1000)
</script>

<template>
  <span v-once>使它从不更新: {{ count }}</span>
</template>

    v-once 指令应用到了 span 标签上，这样这个标签中的内容就只会被渲染一次，并且不会随着数据的变化而更新，而 content 数据则可以正常响应式更新。

  • 需要注意的是，v-once 只能被应用到具有确定性的模板中，并且不能用于包含循环或条件语句等动态模板的组件中，否则可能会引起意外结果。

2.2 HTML

  • 使用 v-html 指令用于输出 html 代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-html 指令用于输出 html 代码</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <p>使用双大括号的文本插值： {{ rawHtml }} </p>
    <p>使用V-html指令输出html代码：<span v-html="rawHtml"></span></p>
</div>

<script>
    //    定义Vue3的RenderHtmlApp应用
    const RenderHtmlApp = {
        // 设置返回值为一个列表
        data() {
            return {
                rawHtml: '<span style="color: red">这里会显示红色！！！</span>'
            }
        }
    }

    // 创建RenderHtmlApp应用，mount('#app') 将 Vue 应用 RenderHtmlApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(RenderHtmlApp).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
页面效果：使用{{ }} 文本插值，会直接将整个html标签显示在页面。使用v-html会直接显示html标签内的内容。
在这里插入图片描述

3. 属性

  • HTML 属性中的值应使用 v-bind 指令。v-bind：可以将数据绑定到HTML元素属性上

    <div v-bind:id="dynamicId"></div>

  • 对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。

    <button v-bind:disabled="isButtonDisabled">按钮</button>

  • 以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-bind数据绑定到HTML元素属性上</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    <style>
        .class1{
            background: #444;
            color: #eee;
        }
    </style>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    创建id为r1，checkbox类型的输入框，使用v-model 指令实现表单数据双向绑定
创建label标签，利用for属性指定关联id="r1"的输入框
-->
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br><br>
<!--    在id为app的div中创建一个div 使用v-bind将数据绑定到html的class属性上 判断use的值，如果为true使用class1类的样式，否则不使用该类-->
    <div v-bind:class="{'class1': use}">
        v-bind:class指令
    </div>

</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message 默认值是false
        data() {
            return {
                use: false
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

    页面效果：点击会选中
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

4. 表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效:

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

  • 案例

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 Vue.js 都提供了完全的 JavaScript 表达式支持</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <p>{{ 5+5 }}</p>
    <p>{{ ok ? 'YES' : 'NO'}}</p>
    {{ message.split('').reverse().join('') }}<br>
    <div v-bind:id="'list-' + id">v-bind数据绑定到HTML元素属性上</div>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message 默认值是false
        data() {
            return {
                ok: true,
                message: 'RUNOOB!!!',
                id:1
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

5. 指令

  • 指令是带有 v- 前缀的特殊属性。

    指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

  • v-if 指令：将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 指令是带有 v- 前缀的特殊属性,用于在表达式的值改变时，将某些行为应用到 DOM 上</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
   <p v-if="seen">现在你看到我了！！！</p>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message 默认值是false
        data() {
            return {
                // 改为false 信息就无法显示
                seen: true
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

  • v-for 指令：可以绑定数组的数据来渲染一个项目列表

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环
    v-for 指令可以绑定数组的数据来渲染一个项目列表
    循环将返回的列表展示在页面
    ol默认有序列表，ul默认无序列表-->
   <ol>
       <li v-for="site in sites" key="site.id">
<!--           相当于用item.id遍历items-->
           {{ site.text }}
       </li>
   </ol>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值为一个列表
        data() {
            return {
               sites: [
                   { id: 1, text: 'GOOGLE'},
                   { id: 2, text: 'RUNOOB'},
                   { id: 3, text: 'Taobao'}
               ]
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 扩展小计：ul和ol的区别以及经验总结

    ul是无序列表：网页中最为常见的列表，各个列表项之间为并列关系，没有顺序级别之分，如导航栏，新闻话题展示区等。默认示例表现为（默认带有实心圆）：

    在这里插入图片描述

      <ul>
      <li>无序列表项1</li>
      <li>无序列表项2</li>
      <li>无序列表项3</li>
  </ul>

    ol是有序列表： 各个列表项会按照一定顺序排列，如网页中常见的游戏排行榜，歌曲排行榜等。 默认示例表现为（默认带有数字）：

    在这里插入图片描述

      <ol>
      <li>有序列表项1</li>
      <li>有序列表项2</li>
      <li>有序列表项3</li>
  </ol>

    可以修改有序列表的起始数字由（默认的1变成2）

    在这里插入图片描述

    <ol start="2">
    <li>有序列表项1</li>
    <li>有序列表项2</li>
    <li>有序列表项3</li>
</ol>

6. 参数

  • 参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性，在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-bind数据绑定到HTML元素属性上</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    使用 v-bind 指令绑定超链接-->
    <p><a v-bind:href="url">V-bind绑定超链接</a></p>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message
        data() {
            return {
                url: 'https://static.runoob.com/images/code-icon-script.png'
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

    页面效果：点击超链接进入超链接页面
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • 另一个例子是 v-on 指令，它用于监听 DOM 事件：在这里参数是监听的事件名。例子在

    <!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

7. 修饰符

  • 修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

    <form v-on:submit.prevent="onSubmit"></form>

8. 用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定。

v-model 指令：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue测试实例- input 输入框中我们可以使用 v-model 指令来实现双向数据绑定</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    在div中创建一个输入框 将Vue3中的应用中的message绑定到文本输入框-->
    <p>{{ message }}</p>
    <input type="text" v-model="message">
</div>

<script>
//    定义Vue3的HelloVueApp应用
const HellVueApp = {
    // 设置返回值message
    data() {
        return {
            message: 'Runoob!'
        }
    }
}

// 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
Vue.createApp(HellVueApp).mount('#app')
</script>

</body>
</html>

页面效果：
在这里插入图片描述

9. v-on指令监听

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

  • 另一个例子是 v-on 指令，它用于监听 DOM 事件：在这里参数是监听的事件名

    <!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

  • 点击按钮实现字符串反转

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue测试实例- v-model 指令用来在 input、select、textarea、checkbox、radio 等
        表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    在div中创建一个输入框 将Vue3中的应用中的message绑定到文本输入框-->
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">翻转字符串</button>
</div>

<script>
//    定义Vue3的HelloVueApp应用
const HellVueApp = {
    // 设置返回值message
    data() {
        return {
            message: 'Runoob!'
        }
    },
    methods: {
        // 点击实现字符串反转
        reverseMessage() {
            this.message = this.message.split('').reverse().join('')
        }
    }
}

// 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
Vue.createApp(HellVueApp).mount('#app')
</script>

</body>
</html>

    页面效果：点击按钮字符串会反转
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述

10. 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

  • v-bind 缩写

    <!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

  • v-on 缩写

    <!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

Vue3条件语句-v-if/v-else/ v-else-if/v-show

1. v-if

  • v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-if指令表达式返回 true 时才会显示
    v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素
        seen值为true：页面输出现在你看到我了
        seen值为false：不显示信息
    -->
    <p v-if="seen">现在你看到我了</p>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
            return {
                // seen为false信息就无法显示
                seen: true
                // seen: false
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount("#app")
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  • v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 <template> 元素上，并在上面使用 v-if。最终的渲染结果将不包含 元素。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 条件判断使用 v-if 指令，指令的表达式返回 true 时才会显示</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-if指令表达式返回 true 时才会显示
    v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素
     v-if 是一个指令，所以必须将它添加到一个元素上。如果是多个元素，可以包裹在 <template> 元素上，
     并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素
    -->
    <template v-if="seen">
        <h1>网站</h1>
        <p>Google</p>
        <p>Runoob</p>
        <p>TaoBao</p>
    </template>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
            return {
                // seen为false信息就无法显示
                seen: true
                // seen: false
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount("#app")
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

2. v-else

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 条件判断可以用 v-else 指令给 v-if 添加一个 "else" 块</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--
    条件判断可以用 v-else 指令给 v-if 添加一个 "else" 块 相当于Java中的if-else
    随机生成一个数字，判断是否大于 0.5，然后输出对应信息
     -->
   <div v-if="Math.random() > 0.5">
       {{ message1 }}
   </div>
    <div v-else>
        {{ message2 }}
    </div>

</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
            return {
                // seen为false信息就无法显示
                // seen: true
                message1: "随机数大于0.5",
                message2: "随机数小于0.5"
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount("#app")
</script>
</body>
</html>

页面效果：刷新会重新随机生成随机数，并显示大于/小于0.5
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. v-else-if

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-else-if 即 v-if 的 else-if 块，可以链式的使用多次</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--
     v-else-if 即 v-if 的 else-if 块，可以链式的使用多次 相当于Java中的if-else if-else
     v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
    -->
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>Not A/B/C</div>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
            return {
                type: 'A'
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
   Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4. v-show

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例也可以使用 v-show 指令来根据条件展示元素</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    定义一个按钮 设置点击按钮显示或者隐藏文字 showMessage值为true则显示Hello Vue，showMessage值为false则不显示
相当于每点击一次将showMessage的值重新设置为！showMessage
如showMessage为true时，点击按钮showMessage值变为false-->
    <button v-on:click="showMessage = !showMessage" >显示/隐藏</button>
    <p v-show="showMessage">Hello Vue!!!</p>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
   const HelloVueApp = {
       data() {
           // 设置返回值showMessage
           return {
               showMessage: true
               // showMessage: false
           }
       }
   }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

点击按钮，会隐藏HelloVue
在这里插入图片描述
在这里插入图片描述

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

循环语句详解

1. 循环使用 v-for 指令

v-for 指令需要以 site in sites 形式的特殊语法

  • sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-for 可以绑定数据到数组来渲染一个列表 相当于Java中的for循环</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环
    循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表
    -->
   <ol>
       <li v-for="site in sites">
           {{ site.text }}
       </li>
   </ol>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值为一个列表
        data() {
            return {
                sites: [
                    {text: 'Google'},
                    {text: 'Runoob'},
                    {text: 'TaoBao'}
                ]
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引

index 为列表项的索引值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-for 还支持一个可选的第二个参数，参数值为当前项的索引</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环
    循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表
    index 为列表项的索引值
    -->
   <ol>
       <li v-for="(site, index) in sites">
           {{ index }} - {{ site.text }}
       </li>
   </ol>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值为一个列表
        data() {
            return {
                sites: [
                    {text: 'Google'},
                    {text: 'Runoob'},
                    {text: 'TaoBao'}
                ]
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

在这里插入图片描述

3. 模板template 中使用 v-for

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 在模板 <template> 中使用 v-for</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环
    循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表
    -->
   <ol>
<!--       在模板 <template> 中使用 v-for -->
       <template v-for="site in sites">
           <li>{{ site.text }}</li>
           <li>------------------</li>
       </template>
   </ol>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值为一个列表
        data() {
            return {
                sites: [
                    {text: 'Google'},
                    {text: 'Runoob'},
                    {text: 'TaoBao'}
                ]
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述

4. v-for 迭代对象-第一个参数为value

v-for 可以通过一个对象的属性来迭代数据，第一个参数为value

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-for 迭代对象 v-for 可以通过一个对象的属性来迭代数据</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环
    循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表
    -->
   <ol>
<!--       在模板 <template> 中使用 v-for -->
       <template v-for="value in object">
           <li>{{ value }}</li>
       </template>
   </ol>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
            // 设置返回值为一个对象
            return {
                object: {
                    name: 'Build Yours Dreams',
                    url: 'https://www.bydglobal.com/cn/index.html',
                    slogan: '科技 绿色 明天'
                }
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述

5. v-for的第二个参数为键名

v-for的第二个的参数为键名

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-for 迭代对象 v-for 可以通过一个对象的属性来迭代数据</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环
    循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表
    -->
   <ol>
<!--       在模板 <template> 中使用 v-for -->
       <template v-for="(value, key) in object">
           <li>{{ key }} : {{ value }}</li>
       </template>
   </ol>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
            // 设置返回值为一个对象
            return {
                object: {
                    name: 'Build Yours Dreams',
                    url: 'https://www.bydglobal.com/cn/index.html',
                    slogan: '科技 绿色 明天'
                }
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述

6. v-for的第三个参数为索引

v-for的第三个参数为索引

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-for 迭代对象 v-for 可以通过一个对象的属性来迭代数据</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-for 指令根据数组的属性值循环渲染元素或组件 相当于Java中的for循环
    循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表
    -->
   <ol>
<!--       在模板 <template> 中使用 v-for -->
       <template v-for="(value, key, index) in object">
           <li>{{ index }} . {{ key }} : {{ value }}</li>
       </template>
   </ol>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
            // 设置返回值为一个对象
            return {
                object: {
                    name: 'Build Yours Dreams',
                    url: 'https://www.bydglobal.com/cn/index.html',
                    slogan: '科技 绿色 明天'
                }
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

7. v-for迭代整数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-for 迭代整数</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-for 迭代整数 相当于Java中的for循环
    循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表
    -->
   <ul>
<!--       在模板 <template> 中使用 v-for -->
       <template v-for="n in 10">
           <li>{{ n }}</li>
       </template>
   </ul>
</div>

<script>
    // 创建app应用，mount('#app') 将 Vue 应用 app 挂载到 <div id="app" class="demo">中
    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

8. computed计算属性显示过滤/排序后的结果

可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-for 显示过滤/排序后的结果</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    v-for 显示过滤/排序后的结果 相当于Java中的for循环
    可以对数组的元素进行处理后再显示出来，一般可以通过创建一个计算属性，来返回过滤或排序后的数组
    循环将返回的列表展示在页面 ol标签是有序列表 ul是无序列表
    -->
   <ul>
<!--       在模板 <template> 中使用 v-for -->
       <template v-for="n in evenNumber">
           <li>{{ n }}</li>
       </template>
   </ul>
</div>

<script>
//    定义Vue应用app
    const HelloVueApp = {
        data() {
        //     定义返回值为一个数组
            return {
                numbers: [1, 2, 3, 4, 5]
            }
        },
    //     在计算属性中定义函数过滤数组找出偶数
        computed:{
            evenNumber() {
                return this.numbers.filter(number => number % 2 === 0)
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 app 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述

9. v-for/v-if 联合使用

联合使用 v-for/v-if 给 select 设置默认值：v-for 循环出列表，v-if 设置选中值

  • 实例：选择框

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 v-for/v-if 联合使用 </title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    设置选择框 v-mode实现单数据双向绑定 设置select改变-->
    <select v-model="selOption" @change="changeVal($event)">
        <!--       在模板 <template> 中使用 v-for设置选择框
        v-for遍历列表-->
        <template v-for="(site, index) in sites" :site="site" :index="index" :key="site.id">
<!--            设置每个选项 索引为1设置默认值 索引值从0开始-->
            <option v-if="index == 1" :value="site.name" selected>{{ site.name }}</option>
            <option v-else :value="site.name">{{ site.name }}</option>
        </template>
    </select>
<!--    设置div弹框-->
    <div>您选中了：{{ selOption }}</div>
</div>

<script>
    //    定义Vue应用HelloVueApp
    const HelloVueApp = {
        data() {
        //     设置返回值
            return {
                // 默认选择
                selOption: "Runoob",
                sites: [
                    {id: 1, name: "Google"},
                    {id: 2, name: "Runoob"},
                    {id: 3, name: "Taobao"}
                ]
            }
        },
    //     利用方法属性实现选择函数
        methods: {
            // 参数：传入的选中选项
            changeVal: function (event){
                this.selOption = event.target.value;
            //     选中后弹出选择提示弹窗
                alert("你选中了" + this.selOption);
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 app 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

    页面效果：重新选择会弹出弹窗提示
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

10. 扩展小计==和===的区别

vue.js中：

  • == ：用来比较或者判断两者是否相等，比较时可以自动转换数据类型
  • ===：用来较为严格的比较，除判断数据2这是否相等 ，还会判断两者数据类型是否相同 如不相同也不会转换数据类型 。返回（false）

11. 在组件上使用v-for实现todo-list

  • 在自定义组件上，你可以像在任何普通元素上一样使用 v-for：

      <my-component v-for="item in items" :key="item.id"></my-component>

  • 然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：

      <my-component
    v-for="(item, index) in items"
    :item="item"
    :index="index"
    :key="item.id"
  ></my-component>

  • 不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

  • 下面是一个简单的 todo 列表的完整例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 在组件上使用 v-for 实现to-do-list</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>

<!--创建一个名为todo-list-example的div-->
<div id="todo-list-example">
<!--    在名为todo-list-example的div中定义form表单 -->
    <form v-on:submit.prevent="andNewTodo">
<!--        定义label标签绑定到id为new-todo的输入框-->
        <label for="new-todo">添加 todo</label>
<!--        输入框 v-model双向绑定数据 id为new-todo placeholder 例如：明天早上跑步-->
        <input v-model="newToDoText" id="new-todo" placeholder="例如：明天早上跑步"/>
        <button>添加</button>
    </form>
<!--    todo-list-->
    <ul>
<!--        使用自定义的todo-item组件-->
        <todo-item
                v-for="(todo, index) in todos"
        :key="todo.id"
        :title="todo.title"
                @remove="todos.splice(index, 1)"
        ></todo-item>
    </ul>

</div>

<script>
//    创建一个Vue应用app
const app = Vue.createApp({
    data() {
        // 设置返回数据
        return{
            newToDoText: '',
            todos: [
                {id: 1, title:'看电影'},
                {id: 2, title: '吃饭'},
                {id: 3, title: '上Runoob学习'}
            ],
            nextTodoId: 4
        }
    },
//     利用methods定义函数实现添加to-do-list
    methods: {
        andNewTodo() {
            this.todos.push({
                id: this.nextTodoId++,
                title: this.newToDoText
            })
            this.newToDoText = ''
        }
    }
})

// 定义一个名为site-info的全局组件
app.component('todo-item', {
//     设置组件模板 点击删除按钮删除当前行的todo-list
    template: `
<li>
{{ title }}
<button @click="$emit('remove')">删除</button>
</li>
`,
//     设置组件属性
    props: ['title'],
    emits:['remove']
})

// 使用mount将HelloVueApp应用挂载到名为app的div上
app.mount('#todo-list-example')
</script>


</body>
</html>

页面效果：输入框填入内容，点击添加按钮，todo-list会增加一行，todo-list为空会添加一行空的todo-list
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

Vue3 组件Component

1. 概念

组件（Component） 是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
在这里插入图片描述
每个 Vue 应用都是通过用 createApp 函数创建的，传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。

  • 以下实例我们将 Vue 应用挂载到 <div id="app"></div>，应该传入 #app：

      const RootComponent = { /* 选项 */ }
  const app = Vue.createApp(RootComponent)
  const vm = app.mount('#app')

  • 注册一个全局组件语法格式如下：

      const app = Vue.createApp({...})
  
  app.component('my-component-name', {
    /* ... */
  })

  • my-component-name 为组件名，/* ... */ 部分为配置选项。注册后，我们可以使用以下方式来调用组件：

    <my-component-name></my-component-name>

2. 实例

2.1 全局组件实例

简单的 Vue 组件的实例：注册一个简单的全局组件 runoob，并使用它

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 注册一个简单的全局组件 runoob，并使用它</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>

<!--创建一个名为app的div-->
<div id="app">
<!--    在名为app的div中使用自定义的runoob组件-->
    <runoob></runoob>
</div>

<script>
//    创建一个Vue应用HelloVueApp
const HelloVueApp = Vue.createApp({

})

// 定义一个名为Runoob的新全局组件
HelloVueApp.component('runoob', {
    template: '<h1>自定义组件！！！</h1>'
})

// 使用mount将HelloVueApp应用挂载到名为app的div上
HelloVueApp.mount('#app')
</script>


</body>
</html>

页面效果：
在这里插入图片描述

在这里插入图片描述

2.1.1 概念

以上的实例中我们的组件都只是通过 component 全局注册的。

全局注册的组件可以在随后创建的 app 实例模板中使用，也包括根实例组件树中的所有子组件的模板中。


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 注册一个简单的全局组件 runoob，并使用它</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>

<!--创建一个名为app的div-->
<div id="app">
<!--    在名为app的div中使用自定义的runoob组件-->
    <runoob></runoob>
</div>

<script>
//    创建一个Vue应用HelloVueApp
const HelloVueApp = Vue.createApp({

})

// 定义一个名为Runoob的新全局组件
HelloVueApp.component('runoob', {
    template: '<h1>自定义组件！！！</h1>'
})

// 使用mount将HelloVueApp应用挂载到名为app的div上
HelloVueApp.mount('#app')
</script>


</body>
</html>
2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1

注意：template 中 ` 是反引号，不是单单引号 ’

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 注册一个 button-counter 组件，在每次点击后，计数器会加 1</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>

<!--创建一个名为app的div-->
<div id="app">
<!--    在名为app的div中使用自定义的button-counter组件-->
    <button-counter></button-counter>

</div>

<script>
//    创建一个Vue应用HelloVueApp
const HelloVueApp = Vue.createApp({

})

// 定义一个名为button-counter的新全局组件 实现点击count+1
HelloVueApp.component('button-counter', {
    data() {
        return {
            count: 0
        }
    },
    // 设置点击实现count+1
    template: '<button @click="count++">点击了{{ count }}次!!</button>'
})

// 使用mount将HelloVueApp应用挂载到名为app的div上
HelloVueApp.mount('#app')

</script>


</body>
</html>

页面效果：点击按钮一次，次数增加一次
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.1.3 组件的复用

可以将组件进行任意次复用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 注册一个 button-counter 组件，在每次点击后，计数器会加 1</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>

<!--创建一个名为app的div-->
<div id="app">
<!--    在名为app的div中使用自定义的button-counter组件-->
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

<script>
//    创建一个Vue应用HelloVueApp
const HelloVueApp = Vue.createApp({

})

// 定义一个名为button-counter的新全局组件 实现点击count+1
HelloVueApp.component('button-counter', {
    data() {
        return {
            count: 0
        }
    },
    // 设置点击实现count+1
    template: `<button @click="count++">点击了{{ count }}次!!</button>`
})

// 使用mount将HelloVueApp应用挂载到名为app的div上
HelloVueApp.mount('#app')

</script>


</body>
</html>

页面效果：点击每一个按钮都会自增
在这里插入图片描述

在这里插入图片描述

2.2 局部组件

2.2.1 概念

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

  • 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

      const ComponentA = {
    /* ... */
  }
  const ComponentB = {
    /* ... */
  }
  const ComponentC = {
    /* ... */
  }

  • 然后在 components 选项中定义你想要使用的组件：

      const app = Vue.createApp({
    components: {
      'component-a': ComponentA,
      'component-b': ComponentB
    }
  })

  • 对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字（component-a、component-b），其属性值就是这个组件的选项对象（ComponentA、ComponentB）。

2.2.2 局部组件实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 注册一个简单的局部组件 runoobA，并使用它</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>

<!--创建一个名为app的div-->
<div id="app">
<!--    在名为app的div中使用自定义的runoob局部组件 可以任意使用多次-->
    <runoob-a></runoob-a>
    <runoob-a></runoob-a>
</div>

<script>
//    定义一个名为Runoob局部组件
var runoobA = {
    template: '<h1>自定义组件</h1>'
}

//    创建一个Vue应用HelloVueApp
const HelloVueApp = Vue.createApp({
//     直接使用上面定义的局部组件
    components: {
        'runoobA': runoobA
    }
})


// 使用mount将HelloVueApp应用挂载到名为app的div上
HelloVueApp.mount('#app')
</script>


</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述

2.3 Prop子组件

prop 是子组件 ：用来接受父组件传递过来的数据的一个自定义属性。可以在prop 中定义自定义组件的属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  Prop子组件</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>

<!--创建一个名为app的div-->
<div id="app" class="demo">
<!--    在名为app的div中使用自定义的site-name组件及属性title -->
    <site-name title="Google"></site-name>
    <site-name title="Runoob"></site-name>
    <site-name title="TaoBao"></site-name>
</div>

<script>
//    创建一个Vue应用HelloVueApp
const HelloVueAPP = Vue.createApp({

})

// 定义一个名为site-name的全局组件
HelloVueAPP.component('site-name',{
//     用props设置子组件属性title
    props: ['title'],
    // 设置子组件模板
    template: `<h4>{{ title }}</h4>`
})

// 使用mount将HelloVueApp应用挂载到名为app的div上
HelloVueAPP.mount('#app')

</script>


</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述

2.4 动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。

每当父组件的数据变化时，该变化也会传导给子组件：循环控制子组件属性动态变化

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 动态Prop</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>

<!--创建一个名为app的div-->
<div id="app" class="demo">
<!--    在名为app的div中使用自定义的site-info组件及属性id、title -->
    <site-info
            v-for="site in sites"
            :id="site.id"
            :title="site.title"
    ></site-info>
</div>

<script>
//    创建一个Vue应用Site
const Site = {
    data() {
        return {
            sites: [
                {id: 1, title: 'Google'},
                {id: 2, title: 'Runoob'},
                {id: 3, title: 'TaoBao'}
            ]
        }
    }
}

// 创建Vue应用HelloVueApp
const HelloVueApp = Vue.createApp(Site)

// 定义一个名为site-info的全局组件
HelloVueApp.component('site-info', {
//     自定义site-info组件属性
    props: ['id', 'title'],
//     设置site-info组件模板
    template: `<h4>{{ id }} - {{ title }}</h4>`
})

// 使用mount将HelloVueApp应用挂载到名为app的div上
HelloVueApp.mount('#app')

</script>


</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述

3. 在组件上使用v-for实现todo-list

  • 在自定义组件上，你可以像在任何普通元素上一样使用 v-for：

      <my-component v-for="item in items" :key="item.id"></my-component>

  • 然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 props：

      <my-component
    v-for="(item, index) in items"
    :item="item"
    :index="index"
    :key="item.id"
  ></my-component>

  • 不自动将 item 注入到组件里的原因是，这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

  • 下面是一个简单的 todo 列表的完整例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 在组件上使用 v-for 实现to-do-list</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>

<!--创建一个名为todo-list-example的div-->
<div id="todo-list-example">
<!--    在名为todo-list-example的div中定义form表单 -->
    <form v-on:submit.prevent="andNewTodo">
<!--        定义label标签绑定到id为new-todo的输入框-->
        <label for="new-todo">添加 todo</label>
<!--        输入框 v-model双向绑定数据 id为new-todo placeholder 例如：明天早上跑步-->
        <input v-model="newToDoText" id="new-todo" placeholder="例如：明天早上跑步"/>
        <button>添加</button>
    </form>
<!--    todo-list-->
    <ul>
<!--        使用自定义的todo-item组件-->
        <todo-item
                v-for="(todo, index) in todos"
        :key="todo.id"
        :title="todo.title"
                @remove="todos.splice(index, 1)"
        ></todo-item>
    </ul>

</div>

<script>
//    创建一个Vue应用app
const app = Vue.createApp({
    data() {
        // 设置返回数据
        return{
            newToDoText: '',
            todos: [
                {id: 1, title:'看电影'},
                {id: 2, title: '吃饭'},
                {id: 3, title: '上Runoob学习'}
            ],
            nextTodoId: 4
        }
    },
//     利用methods定义函数实现添加to-do-list
    methods: {
        andNewTodo() {
            this.todos.push({
                id: this.nextTodoId++,
                title: this.newToDoText
            })
            this.newToDoText = ''
        }
    }
})

// 定义一个名为site-info的全局组件
app.component('todo-item', {
//     设置组件模板 点击删除按钮删除当前行的todo-list
    template: `
<li>
{{ title }}
<button @click="$emit('remove')">删除</button>
</li>
`,
//     设置组件属性
    props: ['title'],
    emits:['remove']
})

// 使用mount将HelloVueApp应用挂载到名为app的div上
app.mount('#todo-list-example')
</script>


</body>
</html>

页面效果：输入框填入内容，点击添加按钮，todo-list会增加一行，todo-list为空会添加一行空的todo-list
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4. Prop 验证

组件可以为 props 指定验证要求。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

  • type 可以是下面原生构造器：

      String
  Number
  Boolean
  Array
  Object
  Date
  Function
  Symbol

  • type 也可以是一个自定义构造器，使用 instanceof 检测。

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

Vue3 计算属性computed

1. 引入-翻转字符串实例

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

  • 实例 1：模板变的很复杂起来，也不容易看懂理解

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 计算属性-反转字符串</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    {{ message.split('').reverse().join('') }}

</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message
        data() {
            return {
               message: 'RUNOOB!'
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

  • 实例2：使用了计算属性的实例

    声明了一个计算属性 reversedMessage 。

    提供的函数将用作属性 vm.reversedMessage 的 getter 。

    vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 计算属性-反转字符串</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <p>原始字符串：{{ message }}</p>
<!--    使用计算属性翻转字符串-->
    <p>计算后反转字符串: {{ reverseMessage}}</p>

</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message
        data() {
            return {
               message: 'RUNOOB!'
            }
        },
        computed: {
        //     计算属性的getter实现翻转字符串
            reverseMessage: function () {
            //     this指向vm实例
                return this.message.split('').reverse().join('')
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

2. computed vs methods

  • 我们可以使用 methods 来替代 computed，效果上两个都是一样的

  • 但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

  • 而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

  • computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 计算属性VS.methods-反转字符串</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <p>原始字符串：{{ message }}</p>
<!--    使用计算属性翻转字符串-->
    <p>使用计算属性computed计算后反转字符串: {{ reverseMessage}}</p>
<!--    注意：使用methods定义方法，方法名后面必须带 -->
    <p>使用methods定义方法实现翻转字符串： {{ reverseMessage2() }}</p>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message
        data() {
            return {
               message: 'RUNOOB!'
            }
        },
        computed: {
        //     计算属性的getter实现翻转字符串
            reverseMessage: function () {
            //     this指向vm实例
                return this.message.split('').reverse().join('')
            }
        },
    //     使用methods实现翻转字符串
        methods: {
        //     定义翻转字符串函数
            reverseMessage2: function () {
                return this.message.split('').reverse().join('')
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

    在这里插入图片描述

3. computed setter

  • computed 属性默认只有 getter ，不过在需要时也可以提供一个 setter ：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 计算属性&Setter</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">

</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值message
        data() {
            return {
                name: 'Google',
                url: 'http://www.google.com'
            }
        },
        computed: {
        //     计算属性的getter
            site: {
                get: function () {
                    return this.name + ' ' + this.url
                },
                //     计算属性的setter 对传入的newValue值自己写
                set: function (newValue) {
                    // 将传入字符串的name和url分开 name和url用空格分开
                    var names = newValue.split(' ')
                    this.name = names[0]
                    this.url = names[names.length - 1]
                }
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    vm = Vue.createApp(HelloVueApp).mount('#app')
    document.write('name: ' + vm.name)；
    document.write('<br>')；
    document.write('url: ', vm.url)；
    document.write('<br>')；
    document.write('<br>-----------更新数据-------<br>')
    // 调用 setter更新site， vm.name 和 vm.url 也会被对应更新
    vm.site = '比亚迪官网 https://www.bydglobal.com/cn/index.html';
    document.write('name: ' + vm.name)；
    document.write('<br>')；
    document.write('url: ' + vm.url)；
    document.write('<br>')；




</script>
</body>
</html>

    页面效果： vm.site = '比亚迪官网 https://www.bydglobal.com/cn/index.html'; 时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。
    在这里插入图片描述

在这里插入图片描述

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

Vue3 监听属性-watch

1. 概念

Vue3 监听属性 watch，可以通过 watch 来响应数据的变化。

  • watch 的作用：用于监测响应式属性的变化，并在属性发生改变时执行特定的操作，它是 Vue 中的一种响应式机制，允许你在数据发生变化时做出相应的响应，执行自定义的逻辑。

  • watch 使得在响应式属性变化时能够有更多的控制权和灵活性，让你的组件能够更好地响应数据的变化并执行相应的逻辑。

2. 实例

2.1 通过使用 watch 实现计数器

监听器的使用语法：类似于Java中的

vm.$watch('counter', function (newValue, oldValue) {
        alert('计数器值的变化：' + oldValue + '变为' + newValue + '!!!')
    });

vm.$watch('counter',(newValue, oldValue)=>{
        alert('计数器值的变化：' + oldValue + '变为' + newValue + '!!!')
    });

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 监听属性Watch</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <p style="font-size: 25px;">计数器：{{ counter }}</p>
<!--    定义按钮 点击实现计数器+1-->
    <button @click="counter++" style="font-size: 25px;">点我</button>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        // 设置返回值counter
        data() {
            return {
                counter: 0
            }
        }
    }
    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    vm = Vue.createApp(HelloVueApp).mount('#app')
//     使用监听属性watch监听counter的变化 只要counter发生变化弹出窗口
//     vm.$watch('counter', function (newValue, oldValue) {
//         alert('计数器值的变化：' + oldValue + '变为' + newValue + '!!!')
//     });
    vm.$watch('counter',(newValue, oldValue)=>{
        alert('计数器值的变化：' + oldValue + '变为' + newValue + '!!!')
    });


</script>
</body>
</html>

页面效果：点击按钮会弹出弹框，提示值的变化情况
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.2 千米与米之间的换算

  • 创建两个输入框

  • data 属性中， kilometers 和 meters 初始值都为 0。

  • watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。

    当我们在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 监听属性Watch </title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。
watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。
当我们在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。-->
<div id = "app">
    千米 : <input type = "text" v-model = "kilometers"  @focus="currentlyActiveField = 'kilometers'">
    米 : <input type = "text" v-model = "meters" @focus="currentlyActiveField = 'meters'">
    <p id="info"></p>
</div>

<script>
    const app = {
        data() {
            return {
                kilometers : 0,
                meters:0
            }
        },
        watch : {
            kilometers:function(newValue, oldValue) {
                // 判断是否是当前输入框
                if (this.currentlyActiveField === 'kilometers') {
                    this.kilometers = newValue;
                    this.meters = newValue * 1000
                }
            },
            meters : function (newValue, oldValue) {
                // 判断是否是当前输入框
                if (this.currentlyActiveField === 'meters') {
                    this.kilometers = newValue/ 1000;
                    this.meters = newValue;
                }
            }
        }
    }
    vm = Vue.createApp(app).mount('#app')
    vm.$watch('kilometers', function (newValue, oldValue) {
        // 这个回调将在 vm.kilometers 改变后调用
        document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    })
</script>
</body>
</html>

    页面效果：输入千米值或米值会自动转换，并在下面提示千米变化前和变化后的值
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

2.3 异步加载中使用 watch

异步数据的加载 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。

以下实例我们使用 axios 库，后面会具体介绍。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 通过监听属性Watch 异步数据的加载Vue  </title>
    <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
    <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
    <script src="https://cdn.staticfile.org/axios/0.27.2/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body>
<!--以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。
watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。
当我们在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。-->
<div id = "app">
    <p>
        输入一个问题，已？结尾输出答案：<input v-model="question">
    </p>
    <p>{{ answer }}</p>
</div>

<script>
    const app = {
        data() {
            return {
                question: '',
                answer: '每个问题结尾需要输出?号'
            }
        },
    //     watch对象 创建获得答案的方法 传入的问题结尾问号兼容中英文
        watch : {
            question(newQuestion, oldQuestion){
                if (newQuestion.indexOf('?') > -1 || newQuestion.indexOf('？') > -1){
                    this.getAnswer()
                }
            }
        },
    //     定义获得答案的方法
        methods : {
            getAnswer() {
                this.answer = '加载中...'
            //     异步获得
                axios
                    .get('/try/ajax/json_vuetest.php')
                    .then(response => {
                        this.answer = response.data.answer
                    })
                    .catch(error => {
                        this.answer = '错误! 无法访问 API。 ' + error
                    })
            }
        }
    }
    Vue.createApp(app).mount('#app')

</script>
</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.4 小计

  • @blur 是当元素失去焦点时所触发的事件

  • @focus是元素获取焦点时所触发的事件

    <template>
	<input type="text" @blur="blurText"/>
</template>
<script>
export default {
	methods:{
		blurText(){
			console.log("blur事件被执行了")
        }
    }
}
</script>

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

Vue3样式绑定

1. class 属性绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。

v-bind:class 可以简写为 :class。

1.1 v-bind:class 设置一个对象，从而动态的切换 class

  • 实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  v-bind:class 设置一个对象，从而动态的切换 class </title>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<!--    定义样式-->
    <style>
        .active {
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <!--定义一个名为app的div-->
    <div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        v-bind:class可以缩写为 :class -->
        <div :class="{'active': isActive}"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>-->
    </div>


<script>
//    定义Vue应用HelloVueApp
    const HelloVueApp = {
        data () {
            return {
                // isActive为false则不显示
                isActive: true
            }
        }
    }

//     创建HelloVueApp应用 并挂载到名为app的div上
    Vue.createApp(HelloVueApp).mount('#app')


</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 以上实例 div class 渲染结果为：

    <div class="active"></div>

    在这里插入图片描述

1.2 在对象中传入更多属性用来动态切换多个 class

  • :class 指令也可以与普通的 class 属性共存

  • 实例：text-danger 类背景颜色覆盖了 active 类的背景色：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class
        :class 指令也可以与普通的 class 属性共存</title>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<!--    定义样式-->
    <style>
        .active {
            background: green;
        }
        .static {
            width: 100px;
            height: 100px;
        }
        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
    <!--定义一个名为app的div-->
    <div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        v-bind:class可以缩写为 :class -->
        <div :class="{'active': isActive, 'text-danger': hasError}" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>-->
    </div>


<script>
//    定义Vue应用HelloVueApp
    const HelloVueApp = {
        data () {
            return {
                // isActive为false则不显示
                isActive: false,
                hasError: true
            }
        }
    }

//     创建HelloVueApp应用 并挂载到名为app的div上
    Vue.createApp(HelloVueApp).mount('#app')


</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 以上实例 div class 渲染结果为：

    <div class="text-danger static"></div>

    在这里插入图片描述

  • 当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为 "static active text-danger"。
    在这里插入图片描述

1.3 直接绑定数据里的一个对象

  • text-danger 类背景颜色覆盖了 active 类的背景色

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class
        :class 指令也可以与普通的 class 属性共存 直接绑定数据里的一个对象</title>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
<!--    定义样式-->
    <style>
        .active {
            background: green;
        }
        .static {
            width: 100px;
            height: 100px;
        }
        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
    <!--定义一个名为app的div-->
    <div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class -->
        <div :class="classObject" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>-->
    </div>


<script>
//    定义Vue应用HelloVueApp
    const HelloVueApp = {
        data () {
            return {
            //     返回类型为一个对象
                classObject: {
                    // isActive为false则不显示
                    // isActive: true,
                    'active': false,
                    'text-danger': true
                }
            }
        }
    }

//     创建HelloVueApp应用 并挂载到名为app的div上
    Vue.createApp(HelloVueApp).mount('#app')


</script>
</body>
</html>

    页面效果：
    在这里插入图片描述

  • 以上实例 div class 渲染结果为：

    <div class="text-danger static"></div>

    在这里插入图片描述

    • 当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为 "static active text-danger"。

在这里插入图片描述

1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式

  • 也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class
        :class 指令也可以与普通的 class 属性共存 绑定一个返回对象的计算属性。这是一个常用且强大的模式</title>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
<!--    定义样式-->
    <style>
        .active {
            background: green;
        }
        .static {
            width: 100px;
            height: 100px;
        }
        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
    <!--定义一个名为app的div-->
    <div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class -->
        <div :class="classObject" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>-->
    </div>


<script>
//    定义Vue应用HelloVueApp
    const HelloVueApp = {
        data () {
            return {
            //     定义返回值
                isActive: true,
                error: null
            }
        },
    //     定义计算属性 为一个对象
        computed: {
            classObject () {
                // 定义对象返回值
                return {
                    active: this.isActive && !this.error,
                    'text-danger': this.error && this.error.type === 'fatal'
                }
            }
        }
    }

//     创建HelloVueApp应用 并挂载到名为app的div上
    Vue.createApp(HelloVueApp).mount('#app')


</script>
</body>
</html>

    页面效果：
    在这里插入图片描述

  • 以上代码的渲染结果为：

    <div class="active static"></div>

    在这里插入图片描述

1. 5 数据语法

  • 可以把一个数组传给 v-bind:class，实例如下:

    <div :class="[activeClass, errorClass]" class="static"></div>

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class
        :class 指令也可以与普通的 class 属性共存 可以把一个数组传给 v-bind:class </title>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
<!--    定义样式-->
    <style>
        .active {
            background: green;
        }
        .static {
            width: 100px;
            height: 100px;
        }
        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
    <!--定义一个名为app的div-->
    <div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class -->
        <div :class="[activeClass, errorClass]" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>-->
    </div>


<script>
//    定义Vue应用HelloVueApp
    const HelloVueApp = {
        data () {
            return {
            //     定义返回值
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        }
    }

//     创建HelloVueApp应用 并挂载到名为app的div上
    Vue.createApp(HelloVueApp).mount('#app')


</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 以上代码渲染结果：<div class="active text-danger static"></div>

    在这里插入图片描述

1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class
        :class 指令也可以与普通的 class 属性共存
        errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类 </title>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
<!--    定义样式-->
    <style>
        .active {
            background: green;
        }
        .static {
            width: 100px;
            height: 100px;
        }
        .text-danger {
            background: red;
        }
    </style>
</head>
<body>
    <!--定义一个名为app的div-->
    <div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class -->
        <div :class="[isActive ? activeClass : errorClass]" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>-->
    </div>


<script>
//    定义Vue应用HelloVueApp
    const HelloVueApp = {
        data () {
            return {
            //     定义返回值
                isActive: true,
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        }
    }

//     创建HelloVueApp应用 并挂载到名为app的div上
    Vue.createApp(HelloVueApp).mount('#app')


</script>
</body>
</html>

页面效果：isActive为true显示绿色，isActive为false显示红色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 以上实例的渲染结果:<div class="active static"></div>

    在这里插入图片描述

2. Vue.js style(内联样式)

2.1 v-bind:style 直接设置样式

  • 可以在 v-bind:style 直接设置样式，可以简写为 :style
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  v-bind:style 直接设置样式 </title>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body>
    <!--定义一个名为app的div-->
    <div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style-->
        <div :style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>
    </div>


<script>
//    定义Vue应用HelloVueApp
    const HelloVueApp = {
        data () {
            return {
                activeColor: 'red',
                fontSize: 30
            }
        }
    }

//     创建HelloVueApp应用 并挂载到名为app的div上
    Vue.createApp(HelloVueApp).mount('#app')

</script>
</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述

  • 以上代码渲染结果为:<div style="color: red; font-size: 30px;">v-bind:style 直接设置样式</div>

    在这里插入图片描述

2.2 直接绑定到一个样式对象

  • 也可以直接绑定到一个样式对象，让模板更清晰：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  v-bind:style 直接设置样式 </title>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body>
    <!--定义一个名为app的div-->
    <div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style-->
        <div :style="styleObject">v-bind:style 绑定样式对象</div>
    </div>


<script>
//    定义Vue应用HelloVueApp
    const HelloVueApp = {
        data () {
            return {
            //     设置返回结果为一个样式对象
                styleObject: {
                    color: "red",
                    fontSize: "30px"
                }
            }
        }
    }

//     创建HelloVueApp应用 并挂载到名为app的div上
    Vue.createApp(HelloVueApp).mount('#app')

</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 以上代码的渲染结果：<div style="color: red; font-size: 30px;">v-bind:style 绑定样式对象</div>
    在这里插入图片描述

2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上

  • v-bind:style 可以使用数组将多个样式对象应用到一个元素上

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  v-bind:style 可以使用数组将多个样式对象应用到一个元素上 </title>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body>
    <!--定义一个名为app的div-->
    <div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style-->
        <div :style="[baseStyles, overridingStyle]">v-bind:style 绑定样式对象</div>
    </div>


<script>
//    定义Vue应用HelloVueApp
    const HelloVueApp = {
        data () {
            return {
            //     设置返回结果为一个样式对象
                baseStyles: {
                    color: "green",
                    fontSize: "30px"
                },
                overridingStyle: {
                    'font-weight': 'bold'
                }
            }
        }
    }

//     创建HelloVueApp应用 并挂载到名为app的div上
    Vue.createApp(HelloVueApp).mount('#app')


</script>
</body>
</html>

    页面效果：
    在这里插入图片描述

    在这里插入图片描述

  • 上述案例渲染结果：<div style="color: green; font-size: 30px; font-weight: bold;">v-bind:style 绑定样式对象</div>

    在这里插入图片描述

  • 注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

2.4 多重值

  • 可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

  • 这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

3. 组件上使用 class 属性

3.1 带有单个根元素的自定义组件上使用 class 属性

  • 当在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  当你在带有单个根元素的自定义组件上使用 class 属性时，
        这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。 </title>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!--定义一个名为app的div-->
    <div id="app" class="demo">
<!--        使用自定义的全局组件runoob-->
        <runoob class="classC classD"></runoob>
    </div>


<script>
//    定义Vue应用HelloVueApp
    const HelloVueApp = Vue.createApp({})

//     在HelloVueApp组件上创建一个新全局组件
// 在自定义组件上使用class属性，这些属性会被添加到该元素上
    HelloVueApp.component('runoob', {
        template: '<h1 class="classA classB">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>'
    })

//     创建HelloVueApp应用 并挂载到名为app的div上
    HelloVueApp.mount('#app')

</script>
</body>
</html>

    页面效果：
    在这里插入图片描述

    在这里插入图片描述
    以上实例渲染结果：<h1 class="classA classB classC classD">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>
    在这里插入图片描述

  • 对于带数据绑定 class 也同样适用：

    <my-component :class="{ active: isActive }"></my-component>

  • 当 isActive 为 true 时，HTML 将被渲染成为：

    <p class="active">Hi</p>

3.2 组件有多个根元素

  • 组件有多个根元素，需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作

    template 中 ` 是反引号，不是单引号 ’

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作 </title>
    <script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!--定义一个名为app的div-->
    <div id="app" class="demo">
<!--        使用自定义的全局组件runoob-->
        <runoob class="classA"></runoob>
    </div>


<script>
//    定义Vue应用HelloVueApp
    const HelloVueApp = Vue.createApp({})

//     在HelloVueApp组件上创建一个新全局组件 含多个根元素
    HelloVueApp.component('runoob', {
        template: `
            <p :class="$attrs.class">组件有多个根元素 使用 $attrs 组件属性执行此操作</p>
            <span>这是runoob的子组件</span>
        `
    })

//     创建HelloVueApp应用 并挂载到名为app的div上
    HelloVueApp.mount('#app')


</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 以上代码渲染结果：

    <p class="classA">组件有多个根元素 使用 $attrs 组件属性执行此操作</p>
<span>这是runoob的子组件</span>

    在这里插入图片描述

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

Vue3事件处理

1. 概念

使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。v-on 指令可以缩写为 @ 符号。

  • 语法格式

    v-on:click="methodName"
或
@click="methodName"

2. 实例

2.1 点击按钮次数+1

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  v-on 指令来监听 DOM 事件，从而执行 JavaScript代码
        v-on 指令可以缩写为 @ 符号</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    定义一个按钮 记录算计次数 实现点击自增-->
<!--    <button v-on:click="counter++">点击次数+1</button>-->
<!--  v-on 指令可以缩写为 @ 符号 -->
    <button @click="counter++">点击次数+1</button>
    <p>按钮被点击了{{ counter }}次</p>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
            return {
                counter: 0
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

2.2 v-on 可以接收一个定义的方法来调用

  • 通常情况下，我们需要使用一个方法来调用 JavaScript 方法。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  v-on 可以接收一个定义的方法来调用  v-on 指令可以缩写为 @ 符号</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    定义一个按钮 记录算计次数 实现点击自增-->
<!--  v-on 指令可以缩写为 @ 符号 设置点击按钮执行自定义的greet方法 -->
    <button @click="greet">点我</button>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
            return {
                name: 'Runoob'
            }
        },
    //     定义方法
        methods: {
            greet(event) {
            //     方法greet内部执行操作
            //     `methods` 内部的 `this` 指向当前活动实例
                alert('Hello' + this.name + '!')
            //     `event` 是原生 DOM event
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：点击弹出弹框欢迎，点击确定后再弹出事件名称
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.3 内联 JavaScript 语句

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  除了直接绑定到一个方法，也可以用内联 JavaScript 语句用  v-on 指令可以缩写为 @ 符号</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    定义一个按钮 记录算计次数 实现点击自增-->
<!--  v-on 指令可以缩写为 @ 符号 调用say时就传入参数即要弹出的内容 -->
    <button @click="say('hi')">Say hi!</button>
    <br>
    <button @click="say('what')">Say what</button>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     返回值为空
        },
    //     定义方法
        methods: {
            say(message) {
            //     弹框弹出message
                alert(message)
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：点击Say hi弹出hi欢迎信息，点击Say what弹出what
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.4 事件处理程序中调用多个方法

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  事件处理程序中可以有多个方法，这些方法由逗号运算符分隔  v-on 指令可以缩写为 @ 符号</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    定义一个按钮 记录算计次数 实现点击自增-->
<!--  v-on 指令可以缩写为 @ 符号 one() 和 two()执行按钮点击事件 -->
    <button @click="one($event),two($event)">点我</button>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     返回值为空
        },
    //     定义方法
        methods: {
            one(event) {
                alert("第一个事件处理器逻辑...")
            },
            two() {
                alert("第二个事件处理器逻辑...")
            }
        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：点击按钮弹出弹框
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 事件修饰符

  • Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

  • Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

      .stop - 阻止冒泡
  .capture - 阻止捕获
  .self - 只监听触发该元素的事件
  .once - 只触发一次
  .left - 左键事件
  .right - 右键事件
  .middle - 中间滚轮事件
  .passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

    <!-- 阻止单击事件冒泡 单击事件将停止传递-->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

  • 注意：请勿同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告。

4. 按键修饰符

  • Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

    <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

  • 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

    <!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

      全部按键别名：
  	.enter
  	.tab
  	.delete (捕获 "删除" 和 "退格" 键)
  	.esc
  	.space
  	.up
  	.down
  	.left
  	.right

  • 系统按键修饰符： 可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发

      .ctrl
  .alt
  .shift
  .meta

    <!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

    注意：系统按键修饰符和常规按键不同。与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。换句话说，keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。

  • 鼠标按钮修饰符：这些修饰符将处理程序限定为由特定鼠标按键触发的事件

      .left
  .right
  .middle

    <p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

  • .exact 修饰符—允许控制由精确的系统修饰符组合触发的事件

    修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。

    <!--当按下 Ctrl 时 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

Vue3表单

1. 概念

可以用 v-model 指令在表单 、 及 等元素上创建双向数据绑定。

在这里插入图片描述

  • v-model 会根据控件类型自动选取正确的方法来更新元素。

  • v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。

  • v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

      text 和 textarea 元素使用 value 属性和 input 事件；
  checkbox 和 radio 使用 checked 属性和 change 事件；
  select 字段将 value 作为属性并将 change 作为事件。

2. 输入框

  • input 和 textarea 元素中使用 v-model 实现双向数据绑定：

  • 注意：在文本区域 textarea 插值是不起作用，需要使用 v-model 来代替

  • textarea 是多行文本输入

    <!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  form表单 输入框</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <!--    对输入框使用v-mode双向数据绑定message1 placeholder设置默认信息-->
    <p>input元素：</p>
    <input v-model="message1" placeholder="编辑我">
    <p>input表单输入消息为：{{ message1 }}</p>

<!--    textarea元素 多行文本输入 使用v-mode双向数据绑定-->
    <p>textarea元素</p>
    <textarea v-model="message2" placeholder="多行文本输入..."></textarea>
    <p>textarea输入的表单消息为：</p>
    <p style="white-space: pre">{{ message2 }}</p>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     定义返回值
            return {
                message1: '',
                message2: '比亚迪官网\r\nhttps://www.bydglobal.com/cn/index.html'
            }

        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

3. 复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

  • 复选框的双向数据绑定

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  form表单 输入框</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--   复选框是一个则为逻辑值 使用v-mode双向数据绑定-->
    <p>单个复选框：</p>
    <input type="checkbox" id="check" v-model="checked">
    <label for="check">{{ checked }}</label>

<!--    多个复选框是多个 使用v-mode双向数据绑定到同一个数组checkedNames中-->
    <p>多个复选框</p>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    <label for="runoob">Runoob</label>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">Google</label>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="taobao">Taobao</label>
    <br>
    <span>
        选择的值为：{{ checkedNames }}
    </span>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     定义返回值
            return {
                checked: false,
                checkedNames: []
            }

        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

4. 单选按钮

单选按钮的双向数据绑定：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  form表单 单选框</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--   复选框是一个则为逻辑值 使用v-mode双向数据绑定-->
    <p>单选框：</p>
    <input type="radio" id="runoob" value="Runoob" v-model="picked">
    <label for="runoob">Runoob</label>
    <br>
    <input type="radio" id="google" value="Google" v-model="picked">
    <label for="google">Google</label>
    <br>
    <input type="radio" id="taobao" value="Tabobao" v-model="picked">
    <label for="taobao">Taobao</label>
    <br>
    <span>
        选择的值为：{{ picked }}
    </span>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     定义返回值
            return {
                picked: 'Runoob'
            }

        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：

在这里插入图片描述
在这里插入图片描述

5. select下拉列表

5.1 下拉列表单选

  • 下拉列表的双向数据绑定

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  form表单 下拉列表</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--   下拉列表 使用v-mode双向数据绑定-->
    <p>下拉列表：</p>
    <select v-model="selected" name="site">
        <option value="">选择一个网站</option>
        <option value="www.runoob.com">Runoob</option>
        <option value="www.google.com">Google</option>
        <option value="www.taobao.com">Taobao</option>
    </select>
    <br><br>
    <span>
        选择的值为：{{ selected }}
    </span>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     定义返回值
            return {
                selected: ''
            }

        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

    页面效果：在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

5.1 下拉列表多选时绑定到数组

多选时在select 标签后使用multiple<select v-model="selected" name="site" multiple>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  form表单 下拉列表多选绑定值到数组</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--   下拉列表 使用v-mode双向数据绑定-->
    <p>下拉列表：</p>
    <select v-model="selected" name="site" multiple>
        <option value="">选择一个网站</option>
        <option value="www.runoob.com">Runoob</option>
        <option value="www.google.com">Google</option>
        <option value="www.taobao.com">Taobao</option>
    </select>
    <br><br>
    <span>
        选择的值为：{{ selected }}
    </span>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     定义返回值
            return {
                selected: ''
            }

        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述

5.3 使用 v-for 循环输出选项

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  form表单 下拉列表 使用v-for输出循环项</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--   下拉列表 使用v-mode双向数据绑定-->
    <p>下拉列表：</p>
    <select v-model="selected">
        <option v-for="option in options" :value="option.value">
            {{ option.text }}
        </option>
    </select>
    <br><br>
    <span>
        选择的值为：{{ selected }}
    </span>
</div>

<script>
    //    定义Vue3的HelloVueApp应用
    const HelloVueApp = {
        data() {
        //     定义返回值
            return {
                selected: 'www.runoob.com',
                options: [
                    { text: 'Runoob', value: 'www.runoob.com'},
                    { text: 'Google', value: 'www.google.com'},
                    {text: 'Taobao', value: 'www.taobao.com'}
                ]
            }

        }
    }

    // 创建HelloVueApp应用，mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述

6. 值绑定

  • 对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

    <!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

  • 把值绑定到当前活动实例的一个动态属性上，这时可以用 v-bind 实现，此外，使用 v-bind 可以将输入值绑定到非字符串。

    • 复选框 (Checkbox)：

      <input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
...
// 选中时
vm.toggle === 'yes'
// 取消选中 
vm.toggle === 'no'

    • 单选框 (Radio)：

      <input type="radio" v-model="pick" v-bind:value="a" />
// 当选中时
vm.pick === vm.a

    • 下拉选择框选项 (Select)：

    <select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>
// 当被选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

7. 修饰符

7.1 .lazy

  • 在默认情况下， v-model 在 input 事件中同步输入框的值与数据

  • 可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步

    <!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

7.2 .number

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">
  • 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型

7.3 .trim

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg">

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

Vue3自定义指令

1. 自定义全局指令v-focus

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

  • 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  自定义v-focus 在页面加载时，元素获得焦点</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <p>页面加载时，input自动获取焦点</p>
<!--    使用自定义的v-focus聚焦指令-->
    <input v-focus>
</div>

<script>
    //    创建HelloVueApp应用
    const HelloVueApp = Vue.createApp({

    })

    // 注册全局指令v-focus 在页面加载时 元素获得焦点
    HelloVueApp.directive('focus',
    //     当元素被绑定挂载到DOM中时...
        {
            mounted (el) {
                // 聚焦元素
                el.focus()
            }
        }
    )


    // mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    HelloVueApp.mount("#app")
</script>
</body>
</html>

    页面效果：页面载入时，input 元素自动获取焦点
    在这里插入图片描述

    在这里插入图片描述

2. 自定义局部指令v-focus

  • 可以使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  自定义局部指令v-focus 使指令只能在这个实例中使用</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <p>页面加载时，input自动获取焦点</p>
<!--    使用自定义的v-focus聚焦指令-->
    <input v-focus>
</div>

<script>
    //    定义HelloVueApp应用
    const HelloVueApp = {
        data () {
            return {

            }
        },
        // 注册局部指令v-focus 使指令只能在这个实例中使用
        directives : {
            focus : {
            //     获得焦点
                mounted(el) {
                    el.focus()
                }
            }
        }
    }

    // 创建HelloVueApp应用，使用mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    Vue.createApp(HelloVueApp).mount("#app")
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

3. 指令定义的钩子函数

3.1 概念

指令定义函数提供了几个钩子函数（可选）：

  • created : 在绑定元素的属性或事件监听器被应用之前调用。

  • beforeMount : 指令第一次绑定到元素并且在挂载父组件之前调用。。

  • mounted : 在绑定元素的父组件被挂载后调用。。

  • beforeUpdate: 在更新包含组件的 VNode 之前调用。。

  • updated: 在包含组件的 VNode 及其子组件的 VNode 更新后调用。

  • beforeUnmount: 当指令与在绑定元素父组件卸载之前时，只调用一次。

  • unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次。

    import { createApp } from 'vue'
const app = createApp({})
 
// 注册
app.directive('my-directive', {
  // 指令是具有一组生命周期的钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 绑定元素的父组件被挂载时调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 卸载绑定元素的父组件时调用
  unmounted() {}
})
 
// 注册 (功能指令)
app.directive('my-directive', () => {
  // 这将被作为 `mounted` 和 `updated` 调用
})
 
// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')

3.2 钩子函数参数

钩子函数的参数有：

  • el：el 指令绑定到的元素。这可用于直接操作 DOM。

  • binding：binding 是一个对象，包含以下属性：

    • instance：使用指令的组件实例。

    • value：传递给指令的值。例如，在 v-my-directive=“1 + 1” 中，该值为 2。

    • oldValue：先前的值，仅在 beforeUpdate 和 updated 中可用。值是否已更改都可用。

    • arg：参数传递给指令 (如果有)。例如在 v-my-directive:foo 中，arg 为 “foo”。

    • modifiers：包含修饰符 (如果有) 的对象。例如在 v-my-directive.foo.bar 中，修饰符对象为 {foo: true，bar: true}。

    • dir：一个对象，在注册指令时作为参数传递。例如，在以下指令中：

      app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

      dir 将会是以下对象：

      {
  mounted(el) {
    el.focus()
  }
}

3.3 vnode & prevNode

  • vnode：作为 el 参数收到的真实 DOM 元素的蓝图。

  • prevNode：上一个虚拟节点，仅在 beforeUpdate 和 updated 钩子中可用。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例  vnode：作为 el 参数收到的真实 DOM 元素的蓝图</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    使用自定义的runoob组件-->
    <div v-runoob="{name: '比亚迪', url: 'https://www.bydglobal.com/cn/index.html'}"></div>
</div>

<script>
    //    创建HelloVueApp应用
    const HelloVueApp = Vue.createApp({

    })

    // 指令定义的钩子函数参数： el绑定到的元素，可用于直接操作 DOM
    // binding 是一个对象，vnode：作为 el 参数收到的真实 DOM 元素的蓝图。
    HelloVueApp.directive('runoob', (el, binding, vnode)=>{
        console.log(binding.value.name)
        console.log(binding.value.url)
        var s = JSON.stringify
        el.innerHTML = s(binding.value)
    })


    // mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    HelloVueApp.mount("#app")
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

3.4 简写

有时候我们不需要其他钩子函数，我们可以简写函数，如下格式：

Vue.directive('runoob', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

3.5 指令函数接受JavaScript表达式

  • 指令函数可接受所有合法的 JavaScript 表达式，以下实例传入了 JavaScript 对象：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 指令函数可接受所有合法的 JavaScript 表达式 传入了 JavaScript 对象</title>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
<!--    使用自定义的runoob组件  传入了 JavaScript 对象-->
    <div v-runoob="{color: 'green', text: '比亚迪'}"></div>
</div>

<script>
    //    创建HelloVueApp应用
    const HelloVueApp = Vue.createApp({

    })

    // 指令定义的钩子函数参数： el绑定到的元素，可用于直接操作 DOM
    // binding 是一个对象，vnode：作为 el 参数收到的真实 DOM 元素的蓝图。
    HelloVueApp.directive('runoob', (el, binding, vnode)=>{
        // el:绑定到的元素 直接直接操作DOM
        // binding：接收的对象
        el.innerHTML = binding.value.text
        el.style.backgroundColor = binding.value.color

    })


    // mount('#app') 将 Vue 应用 HelloVueApp 挂载到 <div id="app" class="demo">中
    HelloVueApp.mount("#app")
</script>
</body>
</html>

    页面效果：在这里插入图片描述
    在这里插入图片描述

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

Vue3路由

1. 载入vue-router 库

Vue.js 路由需要载入vue-router 库

  • 安装直接下载地址：https://unpkg.com/vue-router@4

  • NPM使用使用淘宝镜像：

    npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install vue-router@4

    在这里插入图片描述
    在这里插入图片描述

2. 实例

2.1 Vue.js + vue-router 实现单页应用

  • <router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。

    以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：

    <script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
 
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

2.2 router-link创建链接

上面实例没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

2.3 router-view显示与url对应组件

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 router-link 来创建链接 router-view 将显示与 url 对应的组件</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app" class="demo">
    <h1>Hello App</h1>
<!--   使用router-link组件进行导航 to传递制定链接-->
<!--    页面效果：<router-link></router-link>将呈现一个带有正确herf属性的<a>标签-->
    <p>
<!--        使用Home路由组件-->
        <router-link to="/">Go to Home</router-link>
<!--        使用About路由组件-->
        <router-link to="/about">Go to About</router-link>
    </p>

<!--    路由入口 路由匹配到的组件将渲染在这里-->
    <router-view></router-view>
</div>


<script>
//    1. 定义路由组件 也可以从其他文件导入
    const Home = { template: '<div>Home</div>'}
    const About = { template: '<div>About</div>'}

//  2.定义一些路由并映射到路由组件 每个路由都需要映射到一个组件
    const routes = [
        { path: '/', component: Home},
        { path: '/about', component: About},
    ]

//  3.创建路由实例并传递routes配置 可以在此输入更多的配置 单一般不输入 保持简单
    const router = VueRouter.createRouter({
    //     4. 内部提供了history模式实现 为了简单起见，我们在这里使用 hash 模式
        history: VueRouter.createWebHistory(),
        // routes:routes的缩写为routes
        routes,
    })

//  5. 创建并挂载根实例
    const app = Vue.createApp({})

//  确保_use_ 路由实例使整个应用支持路由
    app.use(router)
//  将app应用挂载到名为app的div
    app.mount('#app')

</script>
</body>
</html>

页面效果：
在这里插入图片描述
点击Go to Home在这里插入图片描述
点击Go to About
在这里插入图片描述
在这里插入图片描述

  • 以上导航渲染结果：点击过的导航链接都会加上样式 class ="router-link-exact-active router-link-active"。

    <a href="/" class="router-link-active router-link-exact-active" aria-current="page">Go to Home</a>
<a href="/about" class="">Go to About</a>

在这里插入图片描述

2.4 <router-link> 相关属性

  • to表示目标路由的链接

    当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

    <!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'home'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

  • replace

    设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

    <router-link :to="{ path: '/abc'}" replace></router-link>

  • append

    设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

    <router-link :to="{ path: 'relative/path'}" append></router-link>

  • tag

    有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

    <router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

  • active-class

    设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。注意这里 class 使用 active-class="_active"。

    <style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

  • exact-active-class

    配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

    <p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

  • event

    声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

    如：设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。

    <router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

Vue3混入

1. 概念

混入 (mixins)定义了一部分可复用的方法或者计算属性。

混入对象可以包含任意组件选项。

当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

  • 实例

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 混入实例</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app"></div>

<script type="text/javascript">
//    定义混入对象
    const myMinxin = {
        created() {
            // 调用hello方法
            this.hello()
        },
        methods: {
            // 定义hello方法
            hello() {
                document.write('欢迎来到混入实例')
            }
        }
    }

    // 定义HelloVueApp应用 使用混入实例
    const app = Vue.createApp({
        mixins: [myMinxin]
    })

    app.mount('#app')
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

2. 选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

比如，数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin 对象的钩子将在组件自身钩子之前调用。

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

  • 以下实例中，Vue 实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 选项合并 Vue 实例与混入对象包含了相同的方法</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app"></div>

<script type="text/javascript">
//    定义混入对象
    const myMixin = {
        data() {
            return {
                message: 'hello',
                foo: 'runoob'
            }
        }
    }

    // 创建HelloVueApp应用 使用混入实例
    const app = Vue.createApp({
    //     使用混入实例
        mixins: [myMixin],
    //     混入对象数据和app应用数据重名
        data() {
            return {
                message: 'boodbye',
                bar: 'def'
            }
        },
        created() {
            document.write(JSON.stringify(this.$data))
        }
    })


    app.mount('#app')
</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 同名钩子函数将合并为一个数组，因此都将被调用。另外，mixin 对象的钩子将在组件自身钩子之前调用。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 同名钩子函数将被合并为数组</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app"></div>

<script type="text/javascript">
//    定义混入对象
    const myMixin = {
        created() {
            console.log('myMixin对象的钩子被调用')
        }
    }

    // 创建HelloVueApp应用 使用混入实例
    const app = Vue.createApp({
    //     使用混入实例myMixin
        mixins: [myMixin],
    //     混入对象数据和app应用数据重名
        created() {
            console.log('组件钩子被调用')
        }
    })


    app.mount('#app')


// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"
</script>
</body>
</html>

  • 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 值为对象的选项，例如 methods、components 和 directives，
        将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app"></div>

<script type="text/javascript">
//    定义混入对象
    const myMixin = {
        methods: {
            foo() {
                console.log('foo')
            },
            conflicting() {
                console.log('from mixin')
            }
        }
    }

    // 创建HelloVueApp应用 使用混入实例
    const app = Vue.createApp({
    //     使用混入实例myMixin
        mixins: [myMixin],
        methods:{
            bar() {
                console.log('bar')
            },
            conflicting(){
                console.log('from self')
            }
        }
    })


    var vm = app.mount(`#app`)
    vm.foo() // foo
    vm.bar()  // bar
    vm.conflicting() // from self


// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"
</script>
</body>
</html>

    调用了三个方法：vm.foo()、vm.bar()、vm.conflicting()。从输出结果 methods 选项中如果碰到相同的函数名则 Vue 实例有更高的优先级会执行输出。

3. 全局合并

也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。

  • 谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 全局混入</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!--创建一个id为app class为demo的div-->
<div id="app"></div>

<script type="text/javascript">
    // 创建HelloVueApp应用 使用混入实例
    const app = Vue.createApp({
    //     自定义选项myOption
        myOption: 'hello'
    })

    // 为自定义选项myOption注入一个处理器
    app.mixin({
        created() {
            const myOption = this.$options.myOption
            if (myOption) {
                document.write(myOption)
            }
        }
    })


    app.mount(`#app`)


// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"
</script>
</body>
</html>

在这里插入图片描述

文章目录

  • node和webstorm基本概念
    • 1. Node.js
    • 2. npm
    • 3.Webpack
    • 4. Vue
  • webstorm创建vue项目
    • 1. 通过npx create-vue创建vue项目
    • 2. 通过npx --package @vue/cli vue创建vue项目
  • VUE3起步-创建应用-挂载应用
    • 1. createApp 创建函数&mount挂载应用
    • 2. 创建应用中的data选项
    • 3. methods方法
  • Vue3指令-v-bind、v-if、v-else、v-for、v-on、v-show、v-model作用及使用
    • 1. 概念
    • 2. 实例
      • 2.1 使用v-model 指令实现表单数据双向绑定
      • 2.2 v-bind数据绑定到HTML元素属性上
      • 2.3. 使用 v-if 和 v-else 指令根据表达式的值来条件性地渲染元素或组件
      • 2.4. 使用v-for 指令根据数组的属性值循环渲染元素或组件
      • 2.5. v-show 根据表达式的值来条件性地显示或隐藏元素
      • 2.6. 使用v-on 在HTML元素上绑定事件监听器，使其能够出发Vue实例中的方法或函数
  • Vue3模板语法-属性、表达式、指令、参数、修饰符、用户输入、缩写
    • 1. 概念
    • 2. 插值
      • 2.1 文本
      • 2.2 HTML
    • 3. 属性
    • 4. 表达式
    • 5. 指令
    • 6. 参数
    • 7. 修饰符
    • 8. 用户输入
    • 9. v-on指令监听
    • 10. 缩写
  • Vue3条件语句-v-if/v-else/ v-else-if/v-show
    • 1. v-if
    • 2. v-else
    • 3. v-else-if
    • 4. v-show
  • 循环语句详解
    • 1. 循环使用 v-for 指令
    • 2. v-for 还支持一个可选的第二个参数，参数值为当前项的索引
    • 3. 模板template 中使用 v-for
    • 4. v-for 迭代对象-第一个参数为value
    • 5. v-for的第二个参数为键名
    • 6. v-for的第三个参数为索引
    • 7. v-for迭代整数
    • 8. computed计算属性显示过滤/排序后的结果
    • 9. v-for/v-if 联合使用
    • 10. 扩展小计`==`和`===`的区别
    • 11. 在组件上使用v-for实现todo-list
  • Vue3 组件Component
    • 1. 概念
    • 2. 实例
      • 2.1 全局组件实例
        • 2.1.1 概念
        • 2.1.2 注册一个 button-counter 组件，在每次点击后，计数器会加 1
        • 2.1.3 组件的复用
      • 2.2 局部组件
        • 2.2.1 概念
        • 2.2.2 局部组件实例
      • 2.3 Prop子组件
      • 2.4 动态 Prop
    • 3. 在组件上使用v-for实现todo-list
    • 4. Prop 验证
  • Vue3 计算属性computed
    • 1. 引入-翻转字符串实例
    • 2. computed vs methods
    • 3. computed setter
  • Vue3 监听属性-watch
    • 1. 概念
    • 2. 实例
      • 2.1 通过使用 watch 实现计数器
      • 2.2 千米与米之间的换算
      • 2.3 异步加载中使用 watch
      • 2.4 小计
  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素
  • Vue3事件处理
    • 1. 概念
    • 2. 实例
      • 2.1 点击按钮次数+1
      • 2.2 v-on 可以接收一个定义的方法来调用
      • 2.3 内联 JavaScript 语句
      • 2.4 事件处理程序中调用多个方法
    • 3. 事件修饰符
    • 4. 按键修饰符
  • Vue3表单
    • 1. 概念
    • 2. 输入框
    • 3. 复选框
    • 4. 单选按钮
    • 5. select下拉列表
      • 5.1 下拉列表单选
      • 5.1 下拉列表多选时绑定到数组
      • 5.3 使用 v-for 循环输出选项
    • 6. 值绑定
    • 7. 修饰符
      • 7.1 .lazy
      • 7.2 .number
      • 7.3 .trim
  • Vue3自定义指令
    • 1. 自定义全局指令v-focus
    • 2. 自定义局部指令v-focus
    • 3. 指令定义的钩子函数
      • 3.1 概念
      • 3.2 钩子函数参数
      • 3.3 vnode & prevNode
      • 3.4 简写
      • 3.5 指令函数接受JavaScript表达式
  • Vue3路由
    • 1. 载入vue-router 库
    • 2. 实例
      • 2.1 Vue.js + vue-router 实现单页应用
      • 2.2 router-link创建链接
      • 2.3 router-view显示与url对应组件
      • 2.4 `<router-link>` 相关属性
  • Vue3混入
    • 1. 概念
    • 2. 选项合并
    • 3. 全局合并
  • WebStorm使用Element组件库
    • 1. webstorm使用组件库
      • 1.1 webstorm使用vue文件
      • 1.2 首先需要安装Element Plus
    • 2. 项目完成引入---按钮组件
    • 3. 引入日历组件
    • 4. 引入走马灯组件
    • 5. image组件
      • 5.1 懒加载滚动
      • 5.2 大图预览
    • 6. Collapse 折叠面板手风琴组件
    • 8. Descriptions 描述列表

WebStorm使用Element组件库

1. webstorm使用组件库

1.1 webstorm使用vue文件

  • 在Test.vue文件中书写模板,并暴露对外接口
    在这里插入图片描述

    <script>
export default {
  name: "Test"
}
</script>

<template>
  <div>
    <h1>Hello Vue</h1>
  </div>
</template>

<style scoped>

</style>

  • 在App.vue中使用

    在这里插入图片描述

  • 此时main.js不变

    import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

  • 页面效果：
    在这里插入图片描述

1.2 首先需要安装Element Plus

参考链接

  • 安装命令如下：
    npm install element-plus --save
    在webstorm命令窗口安装：在这里插入图片描述
  • 安装成功可以在package.json中查看是否安装成功;在这里插入图片描述

2. 项目完成引入—按钮组件

  • 使用button组件模板button-element.vue在这里插入图片描述

    <script>
export default {
  name: "button-element"
}
</script>

<template>
  <el-row>
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </el-row>

  <el-row>
    <el-button plain>朴素按钮</el-button>
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" plain>成功按钮</el-button>
    <el-button type="info" plain>信息按钮</el-button>
    <el-button type="warning" plain>警告按钮</el-button>
    <el-button type="danger" plain>危险按钮</el-button>
  </el-row>

  <el-row>
    <el-button round>圆角按钮</el-button>
    <el-button type="primary" round>主要按钮</el-button>
    <el-button type="success" round>成功按钮</el-button>
    <el-button type="info" round>信息按钮</el-button>
    <el-button type="warning" round>警告按钮</el-button>
    <el-button type="danger" round>危险按钮</el-button>
  </el-row>

  <el-row>
    <el-button icon="el-icon-search" circle></el-button>
    <el-button type="primary" icon="el-icon-edit" circle></el-button>
    <el-button type="success" icon="el-icon-check" circle></el-button>
    <el-button type="info" icon="el-icon-message" circle></el-button>
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
  </el-row>
</template>

<style scoped>

</style>

  • 在APP.vue中使用button-element.vue组件在这里插入图片描述

    <template>
  <div>
<!--    <test></test>-->
<!--    <calendar></calendar>-->
<!--    <component-a></component-a>-->
<!--    <component-b></component-b>-->
    <button-element></button-element>
  </div>
</template>

<script>
import Test from "@/components/Test.vue";
import Calendar from "@/components/calendar.vue";
import ComponentA from "@/components/ComponentA.vue";
import ComponentB from "@/components/ComponentB.vue";
import ButtonElement from "@/components/button-element.vue";


export default {
  name: 'App',
  components: {
    ButtonElement
    // ComponentB,
    // ComponentA,
    // Calendar,
    // Test
  }
}
</script>

<style lang="scss" scoped>

</style>

  • 需要修改main.js文件：导入并使用ElementPlus插件在这里插入图片描述

    import './assets/main.css'

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')
// createApp(App).mount('#app')

3. 引入日历组件

  • 需要修改main.js文件：导入并使用ElementPlus插件

    在这里插入图片描述

    import './assets/main.css'

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')

  • 在calendar.vue直接使用官方给出的模板在这里插入图片描述

    <script>
/*export default {
  name: "calendar"
}*/
export default {
  data() {
    return {
      value: new Date()
    }
  }
}
</script>

<template>
  <el-calendar v-model="value"></el-calendar>
</template>

<style scoped>

</style>

  • 在App.vue中使用后calendar.vue在这里插入图片描述

    	<template>
	  <div>
	<!--    <test></test>-->
	    <calendar></calendar>
	  </div>
	</template>
	
	<script>
	import Test from "@/components/Test.vue";
	import Calendar from "@/components/calendar.vue";
	
	
	export default {
	  name: 'App',
	  components: {
	    Calendar,
	    // Test
	  }
	}
	</script>
	
	<style lang="scss" scoped>
	
	</style>

  • 运行后即可在页面显示日历：

在这里插入图片描述

4. 引入走马灯组件

  • carrousel.vue在这里插入图片描述

    <script>
//走马灯组件
export default {
  name: "carrousel"
}
</script>

<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

  • App.vue在这里插入图片描述

    <template>
  <div>
<!--    <test></test>-->
<!--    <calendar></calendar>-->
<!--    <component-a></component-a>-->
<!--    <component-b></component-b>-->
<!--    <button-element></button-element>-->
    <carrousel></carrousel>
  </div>
</template>

<script>
import Test from "@/components/Test.vue";
import Calendar from "@/components/calendar.vue";
import ComponentA from "@/components/ComponentA.vue";
import ComponentB from "@/components/ComponentB.vue";
import ButtonElement from "@/components/button-element.vue";
import Carrousel from "@/components/carrousel.vue";


export default {
  name: 'App',
  components: {
    Carrousel
    // ButtonElement
    // ComponentB,
    // ComponentA,
    // Calendar,
    // Test
  }
}
</script>

<style lang="scss" scoped>

</style>

  • main.js在这里插入图片描述

    import './assets/main.css'

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')
// createApp(App).mount('#app')

  • 页面效果：点击左右箭头会滑动在这里插入图片描述
    在这里插入图片描述

5. image组件

5.1 懒加载滚动

可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载。可通过scroll-container来设置滚动容器，若未定义，则为最近一个overflow值为auto或scroll的父元素。

  • image-element.vue

    <script>
export default {
  name: "image-element",
  data() {
    return {
      urls: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ]
    }
  }
}
</script>

<template>
  <!--    可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载。
可通过scroll-container来设置滚动容器，若未定义，则为最近一个overflow值为auto或scroll的父元素。-->
  <div id="app">
    <div class="demo-image__lazy">
      <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
    </div>
  </div> 
</template>

<style scoped>

</style>

  • App.vue

    <template>
  <div>
<!--    <test></test>-->
<!--    <calendar></calendar>-->
<!--    <component-a></component-a>-->
<!--    <component-b></component-b>-->
<!--    <button-element></button-element>-->
<!--    <carrousel></carrousel>-->
    <image-element></image-element>
  </div>
</template>

<script>
import Test from "@/components/Test.vue";
import Calendar from "@/components/calendar.vue";
import ComponentA from "@/components/ComponentA.vue";
import ComponentB from "@/components/ComponentB.vue";
import ButtonElement from "@/components/button-element.vue";
import Carrousel from "@/components/carrousel.vue";
import ImageElement from "@/components/image-element.vue";


export default {
  name: 'App',
  components: {
    ImageElement
    // Carrousel
    // ButtonElement
    // ComponentB,
    // ComponentA,
    // Calendar,
    // Test
  }
}
</script>

<style lang="scss" scoped>

</style>

  • main.js

    import './assets/main.css'

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')
// createApp(App).mount('#app')

  • 运行结果：可以通过滑块滑动

在这里插入图片描述

5.2 大图预览

可通过 previewSrcList 开启预览大图的功能

  • image-previewSrcList.vue

    <script>
export default {
  name: "image-previewSrcList",
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ]
    }
  }
}
</script>

<template>
  <div class="demo-image__preview">
    <el-image
        style="width: 100px; height: 100px"
        :src="url"
        :preview-src-list="srcList">
    </el-image>
  </div>
</template>

<style scoped>

</style>

  • App.vue

    <template>
  <div>
<!--    <test></test>-->
<!--    <calendar></calendar>-->
<!--    <component-a></component-a>-->
<!--    <component-b></component-b>-->
<!--    <button-element></button-element>-->
<!--    <carrousel></carrousel>-->
<!--    <image-element></image-element>-->
    <image-previewSrcList></image-previewSrcList>
  </div>
</template>

<script>
import Test from "@/components/Test.vue";
import Calendar from "@/components/calendar.vue";
import ComponentA from "@/components/ComponentA.vue";
import ComponentB from "@/components/ComponentB.vue";
import ButtonElement from "@/components/button-element.vue";
import Carrousel from "@/components/carrousel.vue";
import ImageElement from "@/components/image-element.vue";
import ImagePreviewSrcList from "@/components/image-previewSrcList.vue";


export default {
  name: 'App',
  components: {
    ImagePreviewSrcList
    // ImageElement
    // Carrousel
    // ButtonElement
    // ComponentB,
    // ComponentA,
    // Calendar,
    // Test
  }
}
</script>

<style lang="scss" scoped>

</style>

  • main.js

    import './assets/main.css'

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')
// createApp(App).mount('#app')

  • 页面效果：点击图片会进入大图预览，可通过左右箭头翻

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. Collapse 折叠面板手风琴组件

Collapse.vue

<script>
export default {
  name: "Collapse",
  data() {
    return {
      activeName: '1'
    };
  }
}
</script>

<template>
  <div>
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item title="一致性 Consistency" name="1">
        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
      </el-collapse-item>
      <el-collapse-item title="反馈 Feedback" name="2">
        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
      </el-collapse-item>
      <el-collapse-item title="效率 Efficiency" name="3">
        <div>简化流程：设计简洁直观的操作流程；</div>
        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
      </el-collapse-item>
      <el-collapse-item title="可控 Controllability" name="4">
        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped>

</style>

App.vue

<template>
  <div>
<!--    <test></test>-->
<!--    <calendar></calendar>-->
<!--    <component-a></component-a>-->
<!--    <component-b></component-b>-->
<!--    <button-element></button-element>-->
<!--    <carrousel></carrousel>-->
<!--    <image-element></image-element>-->
<!--    <image-previewSrcList></image-previewSrcList>-->
<!--    <nav-menu></nav-menu>-->
    <collapse></collapse>

  </div>
</template>

<script>
import Test from "@/components/Test.vue";
import Calendar from "@/components/calendar.vue";
import ComponentA from "@/components/ComponentA.vue";
import ComponentB from "@/components/ComponentB.vue";
import ButtonElement from "@/components/button-element.vue";
import Carrousel from "@/components/carrousel.vue";
import ImageElement from "@/components/image-element.vue";
import ImagePreviewSrcList from "@/components/image-previewSrcList.vue";
import NavMenu from "@/components/navMenu.vue";
import Collapse from "@/components/Collapse.vue";


export default {
  name: 'App',
  components: {
    Collapse
    // NavMenu
    // ImagePreviewSrcList
    // ImageElement
    // Carrousel
    // ButtonElement
    // ComponentB,
    // ComponentA,
    // Calendar,
    // Test
  }
}
</script>

<style lang="scss" scoped>

</style>

main.js

import './assets/main.css'

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(ElementPlus).mount('#app')
// createApp(App).mount('#app')

页面效果：点击每个分组会实现手风琴效果
在这里插入图片描述
在这里插入图片描述

8. Descriptions 描述列表

Descriptions.vue

<script>
//¶Descriptions 描述列表
export default {
  name: "Descriptions",
  data () {
    return {
      size: ''
    };
  }
}
</script>

<template>
  <el-radio-group v-model="size">
    <el-radio label="">默认</el-radio>
    <el-radio label="medium">中等</el-radio>
    <el-radio label="small">小型</el-radio>
    <el-radio label="mini">超小</el-radio>
  </el-radio-group>

  <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
    <template slot="extra">
      <el-button type="primary" size="small">操作</el-button>
    </template>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名
      </template>
      kooriookami
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      18100000000
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        居住地
      </template>
      苏州市
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        备注
      </template>
      <el-tag size="small">学校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        联系地址
      </template>
      江苏省苏州市吴中区吴中大道 1188 号
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions class="margin-top" title="无边框列表" :column="3" :size="size">
    <template slot="extra">
      <el-button type="primary" size="small">操作</el-button>
    </template>
    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
    <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
    <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
    <el-descriptions-item label="备注">
      <el-tag size="small">学校</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
  </el-descriptions>
</template>

<style scoped>

</style>

App.vue

<template>
  <div>
<!--    <test></test>-->
<!--    <calendar></calendar>-->
<!--    <component-a></component-a>-->
<!--    <component-b></component-b>-->
<!--    <button-element></button-element>-->
<!--    <carrousel></carrousel>-->
<!--    <image-element></image-element>-->
<!--    <image-previewSrcList></image-previewSrcList>-->
<!--    <nav-menu></nav-menu>-->
<!--    <collapse></collapse>-->
    <descriptions></descriptions>

  </div>
</template>

<script>
import Test from "@/components/Test.vue";
import Calendar from "@/components/calendar.vue";
import ComponentA from "@/components/ComponentA.vue";
import ComponentB from "@/components/ComponentB.vue";
import ButtonElement from "@/components/button-element.vue";
import Carrousel from "@/components/carrousel.vue";
import ImageElement from "@/components/image-element.vue";
import ImagePreviewSrcList from "@/components/image-previewSrcList.vue";
import NavMenu from "@/components/navMenu.vue";
import Collapse from "@/components/Collapse.vue";
import Descriptions from "@/components/Descriptions.vue";


export default {
  name: 'App',
  components: {
    Descriptions
    // Collapse
    // NavMenu
    // ImagePreviewSrcList
    // ImageElement
    // Carrousel
    // ButtonElement
    // ComponentB,
    // ComponentA,
    // Calendar,
    // Test
  }
}
</script>

<style lang="scss" scoped>

</style>

页面效果：展示描述列表，上面的选择框可选列表显示大小
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1066747.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Django实战项目-学习任务系统-用户登录

Django实战项目-学习任务系统-用户登录

第一步&#xff1a;先创建一个Django应用程序框架代码 1&#xff0c;先创建一个Django项目 django-admin startproject mysite将创建一个目录&#xff0c;其布局如下&#xff1a;mysite/manage.pymysite/__init__.pysettings.pyurls.pyasgi.pywsgi.py 2&#xff0c;再创建一个…
阅读更多...
实时监视分析 IIS 日志

实时监视分析 IIS 日志

Microsoft IIS服务器&#xff0c;无论是Web还是FTP&#xff0c;对于企业来说都是必不可少的。但是&#xff0c;IT 安全管理员的工作并不止于部署 IIS 服务器&#xff0c;部署后&#xff0c;管理员必须采取安全措施来保护这些服务器&#xff0c;监视 IIS 服务器安全性的一种行之…
阅读更多...
免杀对抗-反沙盒+反调试

免杀对抗-反沙盒+反调试

反VT-沙盒检测-Go&Python 介绍&#xff1a; 近年来&#xff0c;各类恶意软件层出不穷&#xff0c;反病毒软件也更新了各种检测方案以提高检率。 其中比较有效的方案是动态沙箱检测技术&#xff0c;即通过在沙箱中运行程序并观察程序行为来判断程序是否为恶意程序。简单来说…
阅读更多...
ubuntu 设置x11vnc服务

ubuntu 设置x11vnc服务

Ubuntu 18.04 设置x11vnc服务 自带的vino-server也可以用但是不好用&#xff0c;在ubuntu论坛上看见推荐的x11vnc&#xff08;ubuntu关于vnc的帮助页面&#xff09;&#xff0c;使用设置一下&#xff0c;结果发现有一些坑需要填&#xff0c;所以写下来方便下次使用 转载请说明…
阅读更多...
＜el-input＞ textarea文本域显示滚动条（超过高度就自动显示）+ ＜el-input ＞不能正常输入，输入了也不能删除的问题

＜el-input＞ textarea文本域显示滚动条（超过高度就自动显示）+ ＜el-input ＞不能正常输入，输入了也不能删除的问题

需求&#xff1a;首先是给定高度&#xff0c;输入文本框要自适应这个高度。文本超出高度就会显示滚动条否则不显示。 <el-row class"textarea-row"><el-col :span"3" class"first-row-title">天气</el-col><el-col :span&…
阅读更多...
外卖小程序源码vs定制开发：何时选择哪种方式？

外卖小程序源码vs定制开发：何时选择哪种方式？

在数字餐饮行业的蓬勃发展中&#xff0c;外卖应用程序已经成为餐厅和创业者的必备工具。然而&#xff0c;当涉及到开发外卖应用程序时&#xff0c;您会面临一个重要的决策&#xff1a;是使用外卖小程序源码还是进行定制开发&#xff1f;这两种方法各有优势和劣势&#xff0c;取…
阅读更多...
这款可视化拖拽式低代码平台，真香！

这款可视化拖拽式低代码平台，真香！

目录 一、产品介绍 二、设计原理 三、界面展示 1、代码生成器 2、工作流程 3、门户设计 4、大屏设计 5、报表设计 6、第三方登录 7、多租户实现 8、分布式调度 9、消息中心 四、功能框架 我们在低代码领域探索了很多年&#xff0c;从2014 开始研发低代码前端渲染&#xff0c;从…
阅读更多...
DRM全解析 —— CRTC详解（1）

DRM全解析 —— CRTC详解（1）

本文参考以下博文&#xff1a; Linux内核4.14版本——drm框架分析(4)——crtc分析 特此致谢&#xff01; 1. 简介 CRTC实际上可以拆分为CRTC。CRT的中文意思是阴极摄像管&#xff0c;就是当初老电视上普遍使用的显像管&#xff08;老电视之所以都很厚&#xff0c;就是因为它…
阅读更多...
初学者如何选择：前端开发还是后端开发？

初学者如何选择：前端开发还是后端开发？

#开发做前端好还是后端好【话题征文】# 作为一名有多年开发经验的过来人&#xff0c;我认为前端开发和后端开发都有其独特的魅力和挑战。下面我将就我的个人经历和观点来分享一些关于前端开发和后端开发的看法。 首先&#xff0c;让我们将编程世界的大城市比作前端开发和后端开…
阅读更多...
微信小程序获取用户头像调整

微信小程序获取用户头像调整

微信小程序获取用户头像&#xff0c;由于用户隐私策略调整&#xff0c;腾讯对获取用户信息也进行了调整。 记录内容如下&#xff1a; 1 新方式 新的方式&#xff1a;当触发获取用户头像时&#xff0c;由用户选择头像图片&#xff0c;输入昵称。 具体代码如下&#xff0c;即&…
阅读更多...
Mybatis-plus 使用

Mybatis-plus 使用

1. 注解使用 mybatis-plus提供了 TableName, TableId, TableField, TableLogic 四种注解&#xff0c;其含义分别为&#xff1a; TableName TableName("SPF_Require_Vehicle") 用于声明当前class所对应数据库中的表&#xff0c;如果class的名字和表的名字完全相同&…
阅读更多...
基于SSM的宿舍管理系统（有报告）。Javaee项目。

基于SSM的宿舍管理系统（有报告）。Javaee项目。

演示视频&#xff1a; 基于SSM的宿舍管理系统&#xff08;有报告&#xff09;。Javaee项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringMvc My…
阅读更多...
面试高频手撕算法 - 背包问题2

面试高频手撕算法 - 背包问题2

目录 1. 完全背包 1.1 【模板】完全背包 1.2 零钱兑换 1.3 零钱兑换 II 1.4 完全平方数 2. 二维费用的背包问题 2.1 一和零 2.2 盈利计划 --- 如果背包问题原先没有基础的&#xff0c;建议先看上一篇博客 --- 面试高频手撕算法 - 01背包系列 1. 完全背包 1.1 【模板】…
阅读更多...
天眼销|企业数据查询必备

天眼销|企业数据查询必备

首先&#xff0c;得介绍一下天眼销是一个什么样的平台&#xff0c;请往下看&#xff1a; 可能会有一些还是觉得懒得看&#xff0c;简单理解&#xff0c;它与我们熟知的某查查&#xff0c;天眼某相类似&#xff0c;有很多共同之处。比如&#xff1a;某查查的服务模式&#xff08…
阅读更多...
数据结构与算法（七）--使用链表实现栈

数据结构与算法（七）--使用链表实现栈

一、前言 之前我们已经学习了链表的所有操作及其时间复杂度分析&#xff0c;我们可以了解到对于链表头的相关操作基本都是O(1)的&#xff0c;例如链表头增加、删除元素&#xff0c;查询元素等等。那我们其实有一个数据结构其实可以完美利用到这些操作的特点&#xff0c;都是在…
阅读更多...
Idea升级版本后踩坑关于Local History

Idea升级版本后踩坑关于Local History

版本升级&#xff1a;IntelliJ IDEA 2022.1.2 (Ultimate Edition) Local History本地历史修改记录在idea升级后默认只保留 5天 以内的修改记录&#xff0c;导致时间过长的一些内容就自动被清除掉了。可通过File->Setting-Advanced Setting 进行修改。
阅读更多...
数据结构——常见的十种排序算法

数据结构——常见的十种排序算法

一、常见的十种排序算法&#xff1a; 冒泡排序、选择排序、插入排序、归并排序、快速排序、希尔排序、堆排序、计数排序、桶排序、基数排序 1.【知识框架】 补充&#xff1a; 内部排序&#xff1a;整个排序过程完全在内存中进行。 外部排序&#xff1a;由于待排序记录数据量太…
阅读更多...
python进行接口自动化测试

python进行接口自动化测试

一、接口自动化测试的流程 1、需求分析 1、1请求&#xff08;url,方法、数据&#xff09; 2、挑选需要做自动化测试的接口 3、设计自动化测试用例 4、搭建自动化测试环境 5、设计自动化执行框架&#xff08;报告、参数化、 用例执行框架&#xff09; 6、编写代码 7、执…
阅读更多...
工程派工单，建筑工程派工单

工程派工单，建筑工程派工单

工程派工单是指建设项目管理人员或工程维修人员发出的文件&#xff0c;用于标明工人或维修人员在建设项目或设备中处理或维修问题的任务。派工单包括建设项目的实际维护任务、所需材料、工具等信息&#xff0c;以及具体的执行人员和完成时间。工程派工单是保证建设项目顺利开展…
阅读更多...
用《斗破苍穹》的视角打开C#3 标签与反射（人物创建与斗技使用）

用《斗破苍穹》的视角打开C#3 标签与反射（人物创建与斗技使用）

随着剧情的发展&#xff0c;主线人物登场得越来越多&#xff0c;时不时跳出一个大佬&#xff0c;对我张牙舞爪地攻击。眼花缭乱的斗技让我不厌其烦&#xff0c;一个不小心&#xff0c;我就记不清楚在哪里遇上过什么人&#xff0c;他会什么斗技了。这时候&#xff0c;我就特别希…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023