Vue基础

目录

-Vue基础-

1、插值表达式 {{}}

2、Vue核心特性：响应式

3、开发者工具Vue Devtools(极简插件下载)

4、Vue指令

v-text

v-html

v-bind

v-on

v-if

v-show

v-for

v-model

5、Vue指令修饰符

.stop

.prevent

.capture

.self

.once

.enter、.tab、.delete、.esc 等

.ctrl、.alt、.shift、.meta

.lazy

.number

.trim

6、Vue实例属性

1. data

2.compute计算属性

3.watch监听器

4.created、mounted 等生命周期钩子

7、Vue的生命周期

8、工程化开发与脚手架 Vue CLI

两种开发模式

脚手架 Vue CLI

项目目录介绍

 9、组件化开发与根组件

10、VueRouter的使用

11、VueX的使用

---

概念：Vue 是一款用于构建用户界面的 JavaScript 框架。

快速上手：

-创建一个Vue应用-

前提条件：

• 已安装 18.3 或更高版本的 Node.js

方法1：使用npm指令构建

npm create vue@latest

✔ Project name: … 
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./...
Done.

安装完后，安装依赖并启动开发服务器：

cd 
npm install
npm run dev

当你准备将应用发布到生产环境时，请运行：

npm run build

方法二：通过 CDN 使用 Vue

//1、引入Vue的CDN

//2、创建容器
{{ message }}
//3、创建Vue实例并指定配置项

-Vue基础-

1、插值表达式 {{}}

作用：利用表达式进行插值并渲染到页面中（表达式是一个能被求值的代码）

注意事项：

• 使用数据必须存在，比如使用了msg，必须在Vue实例的data中声明该表达式，比如：

Message: {{ msg }}


const app = new Vue({
el : '#cxk',
data: {
         msg: '我叫鸡太美'
}

• 支持的是表达式，而条件语句if等无法在插值表达式中使用
• 插值表达式不能够在标签中使用，比如 

2、Vue核心特性：响应式

响应式：数据变化，视图自动更新

3、开发者工具Vue Devtools(极简插件下载)

4、Vue指令

v-text

• 功能：更新元素的文本内容，会覆盖元素内原本的内容。
• 示例：

v-html

• 功能：更新元素的 innerHTML，会将绑定的值作为 HTML 代码进行渲染。
• 示例：

v-bind

• 功能：用于动态绑定 HTML 属性，可简写为 :。
• 示例：

v-on

• 功能：用于绑定 DOM 事件，可简写为 @。
• 示例：

  点击我

v-if

• 功能：根据表达式的值来决定是否渲染元素。如果表达式的值为 false，元素会被完全从 DOM 中移除；为 true 时才会渲染。
• 示例：

  
这是一个条件渲染的段落

v-show

• 功能：根据表达式的值来决定元素是否显示。如果表达式的值为 false，元素会通过设置 display: none 来隐藏，但元素仍然存在于 DOM 中。
• 示例：

  
这是一个通过 v-show 控制显示的段落

v-for

• 功能：用于基于一个数组或对象来渲染列表。
• 示例：

// items是源数据的数组名，item是该数组的迭代项，key用于管理状态，通过追踪id标识重新排序现有元素

  

    
{{ item.name }}
  

v-model

• 功能：用于在表单元素上创建双向数据绑定，即数据的变化会反映到视图上，视图的变化也会更新数据。
• 示例：

  
  
你输入的内容是：{{ message }}

案例：

图片切换案例

• 创建一个div盒子，用于存放图片以及上下一页两个按钮，div使用id属性进行Vue实例绑定，img通过v-bing动态绑定图片路径src，两个button按钮绑定点击事件
• 创建Vue实例，el绑定，data中，创建image[]数组用于存放图片路径，currentIndex设置初始值为0用于展示第一张图片，计算属性computed中，返回图片路径，methods方法中，创建两个方法，一个切换上一页，一个切换下一页

    
    
    
    
    



    

        
        
        
        上一张
        
        下一张
    
    


    

列表删除案例

    
    
    
    
    



    

        

            
            

                {{ item.name }}
                
                删除
            
        
    
    


    

5、Vue指令修饰符

事件修饰符

.stop

• 功能：阻止事件冒泡。事件冒泡指的是当一个元素上的事件被触发时，该事件会依次向上级元素传播，比如在嵌套div中，一个点击触发多个点击，点击事件从内向外顺序依次执行，就叫时间冒泡，反之则叫事件捕获。使用 .stop 可以阻止这种传播。
• 示例：

    点击我

.prevent

• 功能：阻止事件的默认行为。例如，在表单提交时，默认会刷新页面，使用 .prevent 可以阻止这种默认行为。
• 示例：

    
    提交

.capture

• 功能：使用事件捕获模式。默认情况下，事件是从内向外冒泡的，而使用 .capture 会让事件从外向内捕获。
• 示例：

    点击我

.self

• 功能：只有当事件是从绑定元素本身触发时才会执行处理函数，而不是从它的子元素触发。
• 示例：

    点击我

.once

• 功能：事件处理函数只执行一次，之后再触发该事件就不会再执行处理函数了。
• 示例：

只点击一次

按键修饰符

.enter、.tab、.delete、.esc 等

• 功能：分别监听回车键、制表键、删除键、Esc 键等特定按键的事件。
• 示例：

系统修饰符

.ctrl、.alt、.shift、.meta

• 功能：分别监听 Ctrl 键、Alt 键、Shift 键、Meta 键（在 Windows 上是 Windows 键，在 Mac 上是 Command 键）与其他按键或鼠标事件的组合。
• 示例：

Ctrl + 点击

表单修饰符

.lazy

• 功能：将 v-model 的数据更新从默认的 input 事件改为 change 事件。也就是说，只有在输入框失去焦点或者按下回车键时，数据才会更新。
• 示例：

.number

• 功能：将 v-model 绑定的输入值自动转换为数字类型。
• 示例：

.trim

• 功能：自动过滤输入值首尾的空格。
• 示例：

6、Vue实例属性

1. data

• 功能：data 是一个对象，用于存储 Vue 实例的数据。这些数据可以在模板中使用，并且当数据发生变化时，Vue 会自动更新与之绑定的 DOM 元素，实现数据的双向绑定。
• 使用方式：data 可以是一个对象，也可以是一个函数（在组件中必须是函数）。

2.compute计算属性

作用：能够根据已有的数据计算出新的值

基本语法：在 Vue 实例中，计算属性定义在 computed 选项里，其形式为一个对象，对象的每个属性都是一个函数。

    
    
    
    



    

        
        
全名: {{ fullName }}
    
    

compute计算属性与methods方法的区别：

compute用于对数据的处理求得结果，methods用于处理业务逻辑

3.watch监听器

在 Vue 里，watch 监听器的作用是监测数据的变化，当被监听的数据发生改变时，会执行特定的操作。

使用场景

异步操作：发送网络请求，请求数据资源，比如搜索框根据关键词变化发送请求

复杂数据处理：一个数据变化会影响多个数据变化或需要重新计算，比如计算商品总价

事例：

    
    
    
    



    

        
        
当前输入: {{ message }}
    
    

4.created、mounted 等生命周期钩子

• 功能：生命周期钩子是一些特殊的方法，它们在 Vue 实例的不同生命周期阶段被自动调用。例如，created 钩子在实例已经创建完成之后被调用，mounted 钩子在挂载完成后被调用。
• 使用方式：在 Vue 实例中直接定义这些钩子函数。
• 示例：

7、Vue的生命周期

Vue的生命周期分为四个阶段：创建，挂载，更新，销毁

创建（beforeCreate、created）

beforeCreate：此时 data 和 methods 等属性还未初始化，无法访问它们。通常用于在实例初始化开始时执行一些通用的初始化操作，比如添加全局的加载状态

created：可以访问 data 和 methods，但 DOM 还未挂载。常用于发送网络请求来获取初始数据。

挂载（beforeMount、mounted）

beforeMount：template 模板已编译为 render 函数，但 $el 仍然是虚拟的 DOM 节点。

mounted：可以操作 DOM 元素，常用于初始化第三方插件、操作 DOM 元素等。

更新（beforeUpdate、updated）

beforeUpdate：可以在数据更新但 DOM 未更新时进行一些操作，比如保存当前 DOM 状态。

updated：可以在 DOM 更新后进行一些操作，比如获取更新后的 DOM 元素信息。

销毁（beforeDestroy、destroyed）

beforeDestroy：可以在实例销毁前进行一些清理工作，比如取消定时器、解绑自定义事件等。

destroyed：实例已经完全销毁，无法再访问实例的属性和方法。

激活（仅适用于 包裹的组件）

activated：当组件被缓存并重新激活时执行，可用于恢复组件状态或重新发起请求。

deactivated：当组件被缓存时执行，可用于暂停组件中的一些操作，如暂停定时器。

错误捕获（errorCaptured）

触发时机：当捕获一个来自子孙组件的错误时被调用。
特点：可以在这个钩子中处理错误，防止错误向上传播，同时可以记录错误信息。

8、工程化开发与脚手架 Vue CLI

两种开发模式

传统开发模式：基于html、css、js文件，直接引入核心包，开发Vue

工程化开发模式：基于构建工具（webpack、vite）的环境开发Vue

脚手架 Vue CLI

概念：是一个全局命令工具

使用步骤：

1. 安装 Node.js 和 npm

//访问node.js官网下载安装后，通过一下命令验证安装
node -v
npm -v

2.安装 Vue CLI

//使用npm全局安装
npm install -g @vue/cli
//使用yarn全局安装
yarn global add @vue/cli

//验证安装成功
vue --version

3.创建项目

vue create project-name

4.启动项目

npm run serve   或  yarn serve

项目目录介绍

 9、组件化开发与根组件

组件化：将一个复杂的应用拆分成多个小的、可复用的组件，每个组件负责一个特定的功能或页面部分

优势：1、提高代码复用 2、便于维护与管理

语法高亮插件：Vetur

插件使用一：

组件注册方式：

局部注册：只能在注册的组件内使用

1、创建.vue文件

2、在使用的组件内导入并注册

全局注册：所有组件内都能使用

1、创建.vue文件

2、main.js中进行全局注册

组件的三大组成部分

注意点：