概念

vue是MVVM的框架

MVVM，一种软件架构模式，决定了写代码的方式。

• M：model数据模型(ajax获取到的数据)
• V：view视图（页面）
• VM：ViewModel 视图模型

MVVM通过数据双向绑定让数据自动地双向同步 不需要操作DOM

• V（修改视图） -> M（数据自动同步）
• M（修改数据） -> V（视图自动同步）

组件化思想

模块化：一个独立的js文件就是一个模块(.js)

组件化：一个组件会包含（HTML+CSS+JS） 把一个完整的页面拆分成多个组件构成。(.vue)

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

在vue中都是组件化开发的，组件化开发就是把一个完整的页面分割成一个一个的小组件。

组件树：

组件优点：

• 容易维护
• 易复用

开发vue

在webpack环境中开发。

vue-cli的使用

vue-cli也叫vue脚手架,vue-cli是vue官方提供的一个全局命令工具，这个命令可以帮助我们快速的创建一个vue项目的基础架子。

全局安装命令

npm i -g @vue/cli

查看版本

vue --version 
# OR
vue -V

初始化vue项目

vue create 项目名(不能用中文,路径合法，不要有括号)

选择vue2或者vue3

启动项目

npm run serve
npm run build

vue.config.js

可以覆盖webpack配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {// 自动打开浏览器open: true,// 自定义端口port: 3000,// 自定义主机名host: 'localhost'}
})

目录分析

• public/index.html不用动，提供一个最基础的页面
• src/main.js不用动， 渲染了App.vue组件
• src/App.vue默认有很多的内容，可以全部删除

Vue组件

单文件组件

• template(必须) 影响组件渲染的结构 html
  • 只能有一个根元素
• script 逻辑 js
• style 样式 css less scss
  • style用于提供组件的样式，默认只能用css
  • 可以通过lang="less"开启less的功能，需要安装依赖包

// template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码
// style 用于提供组件的样式

插值表达式

vue可以通过data提供数据，注意：data必须是一个**函数**，并且返回一个**对象**

插值表达式, 小胡子语法 mustach语法{{ }}

注意：

(1) 使用的数据在 data 中要存在

(2) 能使用表达式, 但是不能使用 if for

(3) 不能在标签属性中使用。

// 插值表达式
// template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

Vue指令

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个 v- 开头的指令, 都有着自己独立的功能, 将来vue解析时, 会根据不同的指令提供不同的功能

v-bind指令

• 描述：插值表达式不能用在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令
• 作用：动态的设置html的属性
• 语法：v-bind:title="msg"
• 简写：:title="msg"

// 插值表达式
// template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

v-on指令

注册事件

1. v-on:事件名=“要执行的少量代码"
2. v-on:事件名=“methods中的函数名"
3. v-on:事件名=“methods中的函数名(实参)"

基本使用

// 插值表达式
// template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

三种语法

// 插值表达式
// template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

阻止浏览器默认行为

阻止默认行为 e.preventDefault()

vue中获取事件对象

(1) 没有传参, 通过形参接收 e

(2) 传参了, 通过$event指代事件对象 e

// 插值表达式
// template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

事件修饰符

vue中提供的事件修饰符

.prevent 阻止默认行为

.stop 阻止冒泡

// 插值表达式 // template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

按键修饰符

@keyup.按键

// 插值表达式 // template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

v-if 和 v-show

v-show 和 v-if 功能: 控制盒子的显示隐藏

1. v-show

   语法: v-show=“布尔值” (true显示, false隐藏)

   原理: 实质是在控制元素的 css 样式, display: none;

2. v-if

   语法: v-if=“布尔值” (true显示, false隐藏)

   原理: 实质是在动态的 创建 或者 删除元素节点

应用场景:

• 如果是频繁的切换显示隐藏, 用 v-show

  v-if, 频繁切换会大量的创建和删除元素, 消耗性能

• 如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if

  v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销

// 插值表达式 // template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

v-if v-else 和 v-else-if

表示

• if
• else if
• else

// 插值表达式 // template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

v-model

给表单元素或者组件使用, 双向数据绑定.

1. 数据变化了, 视图会跟着变

2. 视图变化了, 数据要跟着变

   输入框内容变化了(监听用户的输入, 监听input事件), 数据要跟着变

在表单使用v-model

// 插值表达式 // template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

在组件使用v-model

注意：如果在组件使用v-model，子组件内部接收必须使用value，子传父发布的自定义事件必须是input

在子组件

在父组件

v-model 修饰符

• number

  如果想自动将用户的输入值, 用parseFloat转成数字类型, ，可以给 v-model 添加 number 修饰符：

  如果这个值如果这个值无法转数字，则会返回原始的值。

• trim

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

• lazy

  在change时而非input时更新，可以给 v-model 添加 lazy 修饰符：

v-text 和 v-html

// 插值表达式 // template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

v-for

v-for 作用: 遍历对象和数组

注意

1. 第一项是值 第二项是下标
2. 需要提供key，且key唯一

遍历数组

// 插值表达式 // template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式

遍历对象和数字

// 插值表达式 // template 代表组件要渲染的结构
// script 用于提供组件的逻辑代码，需要默认导出一个对象
// style 用于提供组件的样式