Vue基础

vue安装

好细的Vue安装与配置_vue配置_LCLANNADT的博客-CSDN博客

脚手架

src/main.js是应用的入口文件 可以在这里导入和配置Vue相关的插件、库、以及全局组件、指令

src/App.vue 这是应用的主组件，也是根组件，可以在这里定义应用的整体样式、布局 以及全局的数据和方法

src/components 用于存放应用的组件文件，可以在这里创建各种子组件，按需引入到主组件或其他组件中使用

src/views 存放应用的页面级组件文件 每个页面通常都对应一个独立的视图组件

src/router 管理应用的路由配置 可以添加新的路由和对应的组件，以实现页面间的导航和切换

路由

Vue基础知识总结 11：前端路由vue-router_哪 吒的博客-CSDN博客

语法

指令

vue指令是在 HTML 模板中以 v- 开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。

v-bind:

动态绑定元素属性

动态绑定样式

动态绑定class对象

动态绑定事件处理函数

动态绑定元素属性对象

可以实现动态更新属性、减少重复代码、简化样式和类绑定以及提供扩展性和灵活性。 v-for

用于根据源数据多次渲染元素或组件。通过遍历数组或对象的属性，可以循环生成多个相同的元素，并为每个元素绑定和更新动态数据。

缩写 

插值

{{xxx}}

HTML

使用v-html指令时，Vue会将message中的HTML代码直接插入到对应的DOM节点中，并绕过了Vue的编译过程。这意味着

中的内容不会被Vue所控制，因此无法应用作用域样式。所以要用行内式来写样式

或者用v-bind 

条件语句

v-if

用于根据特定条件来决定是否渲染或销毁元素。

根据给定的表达式的真假值来动态地控制元素的显示和隐藏。

• 适用于：切换频率较低的场景

• 特点：不展示的DOM元素直接被移除

• 注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断

v-show 

用于根据给定条件的真假值来控制元素的显示和隐藏。

通过修改 CSS 的 display 属性来控制元素的可见性，而不是从 DOM 中添加或移除元素，响应更快

• 写法：v-show="表达式"
• 适用于：切换频率较高的场景
• 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

循环语句

遍历数组

遍历对象

//以第二个参数为键名

//以第三个参数为索引

 显示过滤/排序后的结果

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

computed: {
        evenNumbers() {
            return this.numbers.filter(number => number % 2 === 0)
        }
    }

 

    
{{ n }}
  

v-for/v-if 联合使用 

   
      
   
   
您选中了:{{selOption}}

 

监听

 为什么需要监听属性？

在前端开发中，属性的变化经常会触发应用的不同行为，例如更新UI、发送HTTP请求、执行动画等。Vue.js作为一个现代的JavaScript框架，提供了一种响应式的数据绑定机制，使属性的变化能够自动地反映在UI上。然而，有时需要更进一步，需要在属性变化时执行一些自定义的逻辑。

监听属性的方法

Vue 3 中的属性监听可以通过 watch 函数或 watchEffect 函数来实现。

1. watch 

const stop = watch(source, callback, options);

source 是要监听的属性，可以是一个 ref、reactive 对象或计算属性。callback 是回调函数，当 source 发生变化时会被触发。options 是一个可选参数对象，用于配置监听行为。

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count 变为 ${newValue}，之前是 ${oldValue}`);
});

事件

v-on

监听事件

点击事件、鼠标事件、键盘事件

绑定方法 

可以直接绑定到一个方法 也可以内联JavaScript语句。有多个方法时，用‘，’分隔。

方法传参

修饰符 

事件修饰符

• stop - 阻止冒泡
• prevent - 阻止默认事件
• capture - 阻止捕获
• self - 只监听触发该元素的事件
• once - 只触发一次
• left - 左键事件
• right - 右键事件
• middle - 中间滚轮事件
• passive - 事件的默认行为立即执行，无需等待事件回调执行完毕

...

...

按键修饰符

Vue为一些常用的按键提供了别名

• .enter
• .tab
• .delete (捕获 "删除" 和 "退格" 键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统按键修饰键：

• .ctrl
• .alt
• .shift
• .meta

Do something

.exact 修饰符 

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

A


A


A

鼠标按钮修饰符:

• .left
• .right
• .middle

样式绑定

class属性绑定

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

 class 数组

用三元表达式来切换

style（内联样式）

 
Vue

 style直接绑定样式对象

 
Vue

style数组

Vue

 多重值 只会绑定最后一个浏览器支持的值

表单

表单绑定

v-model 

用于实现数据的双向绑定。它主要用于表单元素，将表单元素的值与 Vue 实例的数据属性进行绑定，当表单元素的值发生变化时，Vue 实例中的数据也会随之更新，反之亦然。

文本

Message is: {{ message }}

 文本域

Multiline message is:
{{ message }}

 复选框

{{ checked }}

 表单验证

必填字段验证

Vue3中可以通过设置HTML5的required属性或使用自定义的验证规则来实现必填字段验证。

格式验证

Vue3中可以使用正则表达式或第三方插件来实现格式验证。

表单处理

获取表单数据

我们可以使用ref或reactive来定义表单数据，并通过访问对应的引用变量来获取用户输入的数据。eg：通过name.value获取用户输入的姓名

表单重置 

Vue3提供了reset方法和v-model指令的.lazy修饰符来实现表单重置。

使用.lazy修饰符来延迟表单元素的更新，直到点击提交按钮时才将数据同步到name变量中。当用户点击重置按钮时，我们可以通过将name重置为空字符串来实现表单重置。 

组件

组件（Component）

是 Vue.js 最强大的功能之一。

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

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

 

vue 组件组成结构

每个 .vue 组件都由 3 部分构成，分别是：

template -> 组件的模板结构

script -> 组件的 JavaScript 行为

style -> 组件的样式

组件的 template 节点

 组件的 script 节点

组件注册的两种方式 

vue 中注册组件的方式分为“全局注册”和“局部注册”两种，其中：

• 被全局注册的组件，可以在全局任何一个组件内使用

• 被局部注册的组件，只能在当前注册的范围内使用

• 如果某些组件在开发期间的使用频率很高，推荐进行全局注册；

  如果某些组件只在特定的情况下会被用到，推荐进行局部注册。

//调用 app.component() 方法全局注册组件
app.component(Swiper.name, Swiper)
app.component(Test.name, Test)


export default {
  name: 'MyApp',
  components: {  // 通过 components 节点注册私有组件
      // 注册
    MyStyle
  }
}

组件样式

1.scoped属性

 style节点的 scoped 属性，用来自动为每个组件分配唯一的“自定义属性"，并自动为当前组件的 DOM 标签和 style 样式应用这个自定义属性，防止组件的样式冲突问题。

2./deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样

式对子组件生效，可以使用 /deep/ 深度选择器。

组件的props

other：

待完善