vue脚手架基础API全面讲解【内附多个案例】

2401_84152911

于 2024-05-14 23:36:02 发布

阅读量980

点赞数 9

分类专栏：程序员文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/2401_84152911/article/details/138875122

版权

程序员专栏收录该内容

176 篇文章 0 订阅

订阅专栏

this的指向
npm/yarn是什么, package.json干什么的, 下载包的命令是什么, 什么是模块化开发
函数的形参实参, 得马上反应过来, 哪个是变量哪个是值, 谁传给谁了

如果通不过, 请记住口诀:

变量是一个容器, 表达式原地都有返回结果

var a = 10;

console.log(a); // a就是变量, 运行后使用变量里的值再原地打印

console.log(10 + 50); // 10 + 50 就是表达式

console.log(a > 9); // 这叫判断表达式, 原地结果是true

new 类名() - 原地得到一个实例对象 - 对象身上有key(或叫属性, 叫键都行), 对应的值是我们要使用的
实例化对象就是new 类名() 创造出来的对象, 身上包含属性(key, 键) 对应的值
什么是属性和方法(固定格式)

let obj = { // 属性指的是a, b, c, d, e这些名字

a: 10,

b: [1, 2, 3],

c: function(){},

d () {},

e: () => {} // 值是冒号:右边的值

}

// 这个格式是固定的, 必须张口就来, 张手就写, 准确率100%

对象的复制和取值(固定格式)

有=(赋值运算符) 就是赋值, 没有就是取值

let obj = {

a: 10,

b: 20

}

console.log(obj.a); // 从obj对象的a上取值, 原地打印10

obj.b = 100; // 有=, 固定把右侧的值赋予给左侧的键, 再打印obj这个对象, b的值是100了

this指向口诀

在function函数中, this默认指向当前函数的调用者调用者.函数名()

在箭头函数中, this指向外层"函数"作用域this的值

学习目标

能够理解vue的概念和作用
能够理解vuecli脚手架工程化开发
能够使用vue指令

1. Vue基本概念

1.0_为何学Vue

目标: 更少的时间,干更多的活. 开发网站速度, 快

在这里插入图片描述

例如: 把数组数据-循环铺设到li中, 看看分别如何做的?

原生js做法

Vue.js做法

{{item}}
注意: 虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js

开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)

现在很多项目都是用vue开发的

市场上90%工作都要求会vue, 会vue拿高薪, 甚至java或测试都要学点vue

1.1_Vue是什么

渐进式javacript框架, 一套拥有自己规则的语法

官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)

什么是渐进式

渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用

Vue渐进式: Vue从基础开始, 会循序渐进向前学习, 如下知识点可能你现在不明白, 但是学完整个vue回过头来看, 会很有帮助

 什么是库和框架

补充概念:

库: 封装的属性或方法 (例jquery.js)

框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)

1.2_Vue学习的方式
- 传统开发模式：基于html/css/js文件开发vue
- 工程化开发方式：在webpack环境中开发vue，这是最推荐, 企业常用的方式
Vue如何学
1. 每天的知识点自测最好做到了如指掌 - 做不到只能花30分钟去记住结论和公式
2. 记住vue指令作用, 基础语法 - 弄一个字典(一一映射关系)
3. 在课上例子, 练习, 案例, 作业, 项目中, 反复磨炼使用
4. 学会查找问题的方式和解决方式(弄个报错总结.md, 避免反复进坑)
总结: vue是渐进式框架, 有自己的规则, 我们要记住语法, 特点和作用, 反复磨炼使用, 多总结

2. @vue/cli脚手架

 2.0_@vue/cli 脚手架介绍

目标: webpack自己配置环境很麻烦, 下载@vue/cli包,用vue命令创建脚手架项目
- @vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目
脚手架是为了保证各施工过程顺利进行而搭设的工作平台

 @vue/cli的好处
- 开箱即用
0配置webpack

babel支持

css, less支持

开发服务器支持

 2.1_@vue/cli安装

目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程
- 全局安装命令
yarn global add @vue/cli

OR

npm install -g @vue/cli

注意: 如果半天没动静(95%都是网速问题), 可以ctrl c
1. 停止重新来
2. 换一个网继续重来
- 查看vue脚手架版本
vue -V

总结: 如果出现版本号就安装成功, 否则失败

 2.2_@vue/cli 创建项目启动服务

目标: 使用vue命令, 创建脚手架项目

注意: 项目名不能带大写字母, 中文和特殊符号
1. 创建项目
vue和create是命令, vuecli-demo是文件夹名

vue create vuecli-demo
1. 选择模板
可以上下箭头选择, 弄错了ctrl+c重来

选择用什么方式下载脚手架项目需要的依赖包
1. 回车等待生成项目文件夹+文件+下载必须的第三方包们
1. 进入脚手架项目下, 启动内置的热更新本地服务器
cd vuecil-demo

npm run serve

或

yarn serve

只要看到绿色的 - 啊. 你成功了(底层node+webpack热更新服务)

打开浏览器输入上述地址

总结: vue命令创建工程目录, 项目内置webpack本地热更新服务器, 帮我们打包项目预览项目

 2.3 @vue/cli 目录和代码分析

目标: 讲解重点文件夹, 文件的作用, 以及文件里代码的意思

vuecil-demo # 项目目录

├── node_modules # 项目依赖的第三方包

├── public # 静态文件目录

├── favicon.ico# 浏览器小图标

└── index.html # 单页面的html文件(网页浏览的是它)

├── src # 业务文件夹

├── assets # 静态资源

└── logo.png # vue的logo图片

├── components # 组件目录

└── HelloWorld.vue # 欢迎页面vue代码文件

├── App.vue # 整个应用的根组件

└── main.js # 入口js文件

├── .gitignore # git提交忽略配置

├── babel.config.js # babel配置

├── package.json # 依赖包列表

├── README.md # 项目说明

└── yarn.lock # 项目包版本锁定和缓存地址

主要文件及含义

node_modules下都是下载的第三方包

public/index.html – 浏览器运行的网页

src/main.js – webpack打包的入口文件

src/App.vue – vue项目入口页面

package.json – 依赖包列表文件

 2.4_@vue/cli 项目架构了解

目标: 知道项目入口, 以及代码执行顺序和引入关系

 2.5_@vue/cli 自定义配置

目标：项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js

src并列处新建vue.config.js

/* 覆盖webpack的配置 */

module.exports = {

devServer: { // 自定义服务配置

open: true, // 自动打开浏览器

port: 3000

}

}

2.6_eslint了解

目标: 知道eslint的作用, 和如何暂时关闭, 它是一个代码检查工具

例子: 先在main.js 随便声明个变量, 但是不要使用

观察发现, 终端和页面都报错了

记住以后见到这样子的错误, 证明你的代码不严谨

方式1: 手动解决掉错误, 以后项目中会讲如何自动解决

方式2: 暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务

 2.7_@vue/cli 单vue文件讲解

目标: 单vue文件好处, 独立作用域互不影响

Vue推荐采用.vue文件来开发项目

template里只能有一个根标签

vue文件-独立模块-作用域互不影响

style配合scoped属性, 保证样式只针对当前template内标签生效

vue文件配合webpack, 把他们打包起来插入到index.html

欢迎使用vue

最终: Vue文件配合webpack, 把他们打包起来插入到index.html, 然后在浏览器运行

 2.8_@vue/cli 欢迎界面清理

目标: 我们开始写我们自己的代码, 无需欢迎页面
- src/App.vue默认有很多内容, 可以全部删除留下框
- assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)
3. Vue指令

 3.0_vue基础-插值表达式

目的: 在dom标签中, 直接插入内容

又叫: 声明式渲染/文本插值

语法: {{ 表达式 }}

{{ msg }}

{{ obj.name }}

{{ obj.age > 18 ? '成年' : '未成年' }}

总结: dom中插值表达式赋值, vue的变量必须在data里声明

 3.1_vue基础-MVVM设计模式

目的: 转变思维, 用数据驱动视图改变, 操作dom的事, vue源码内干了

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。

演示: 在上个代码基础上, 在devtool工具改变M层的变量, 观察V层(视图的自动同步)

等下面学了v-model再观察V改变M的效果
- MVVM，一种软件架构模式，决定了写代码的思想和层次
- M： model数据模型 (data里定义)
- V： view视图（html页面）
- VM： ViewModel视图模型 (vue.js源码)
- MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM
- V（修改视图） -> M（数据自动同步）
- M（修改数据） -> V（视图自动同步）
1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)

总结: vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 挺高开发效率

 3.2_vue指令-v-bind

目标: 给标签属性设置vue变量的值

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

每个指令, 都有独立的作用
- 语法：v-bind:属性名="vue变量"
- 简写：:属性名="vue变量"
我是a标签

总结: 把vue变量的值, 赋予给dom属性上, 影响标签显示效果

 3.3_vue指令-v-on

目标: 给标签绑定事件
- 语法
- v-on:事件名=“要执行的少量代码”
- v-on:事件名=“methods中的函数”
- v-on:事件名=“methods中的函数(实参)”
- 简写: @事件名=“methods中的函数”
你要买商品的数量: {{count}}

增加1

增加1个

一次加5件

<button @click=“subFn”>减少

总结: 常用@事件名, 给dom标签绑定事件, 以及=右侧事件处理函数

 3.4_vue指令-v-on事件对象

目标: vue事件处理函数中, 拿到事件对象
- 语法:
- 无传参, 通过形参直接接收
- 传参, 通过$event指代事件对象传给事件处理函数
<a @click=“one” href=“http://www.baidu.com”>阻止百度

<a @click=“two(10, $event)” href=“http://www.baidu.com”>阻止去百度

 3.5_vue指令-v-on修饰符

目的: 在事件后面.修饰符名 - 给事件带来更强大的功能
- 语法:
- @事件名.修饰符=“methods里函数”
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为
- .once - 程序运行期间, 只触发一次事件处理函数
<button @click.stop=“btn”>.stop阻止事件冒泡

<a href=“http://www.baidu.com” @click.prevent=“btn”>.prevent阻止默认行为

<button @click.once=“btn”>.once程序运行期间, 只触发一次事件处理函数

总结: 修饰符给事件扩展额外功能

 3.6_vue指令-v-on按键修饰符

目标: 给键盘事件, 添加修饰符, 增强能力
- 语法:
- @keyup.enter - 监测回车按键
- @keyup.esc - 监测返回按键
更多修饰符

<input type=“text” @keydown.enter=“enterFn”>

<input type=“text” @keydown.esc=“escFn”>

总结: 多使用事件修饰符, 可以提高开发效率, 少去自己判断过程

 3.7__案例-文字反转

目标: 点击按钮 - 把文字取反显示 - 再点击取反显示(回来了)

提示: 把字符串取反赋予回去

效果演示:

正确代码:

{{ message }}

<button @click=“btn”>逆转世界

总结: 记住方法特点, 多做需求, vue是数据变化视图自动更新, 减少操作DOM时间, 提高开发效率

 3.8_vue指令 v-model

目标: 把value属性和vue数据变量, 双向绑定到一起
- 语法: v-model=“vue数据变量”
- 双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
- 演示: 用户名绑定 - vue内部是MVVM设计模式
用户名:

密码:

来自于:
北京南京天津

爱好:

抽烟

喝酒

写代码

性别:

男

女

自我介绍

总结: 本阶段v-model只能用在表单元素上, 以后学组件后讲v-model高级用法

 3.9_vue指令 v-model修饰符

目标: 让v-model拥有更强大的功能
- 语法:
- v-model.修饰符=“vue数据变量”
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy 在change时触发而非inupt时
年龄:

人生格言:

自我介绍:

总结: v-model修饰符, 可以对值进行预处理, 非常高效好用

 3.10_vue指令 v-text和v-html

目的: 更新DOM对象的innerText/innerHTML
- 语法:
- v-text=“vue数据变量”
- v-html=“vue数据变量”
- 注意: 会覆盖插值表达式
总结: v-text把值当成普通字符串显示, v-html把值当做html解析

 3.11_vue指令 v-show和v-if

目标: 控制标签的隐藏或出现
- 语法:
- v-show=“vue变量”
- v-if=“vue变量”
- 原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上移除
- 高级
- v-else使用
v-show的盒子

v-if的盒子

我成年了

还得多吃饭

总结: 使用v-show和v-if以及v-else指令, 方便通过变量控制一套标签出现/隐藏

 3.12_案例-折叠面板

目标: 点击展开或收起时，把内容区域显示或者隐藏

此案例使用了less语法, 项目中下载模块

yarn add less@3.0.4 less-loader@5.0.0 -D

只有标签和样式

案例：折叠面板

芙蓉楼送辛渐

收起

寒雨连江夜入吴,

平明送客楚山孤。

洛阳亲友如相问，

一片冰心在玉壶。

总结: 使用v-show和v-if以及v-else指令, 方便通过变量控制一套标签出现/隐藏

 3.12_案例-折叠面板

目标: 点击展开或收起时，把内容区域显示或者隐藏

此案例使用了less语法, 项目中下载模块

yarn add less@3.0.4 less-loader@5.0.0 -D

只有标签和样式

案例：折叠面板

芙蓉楼送辛渐

收起

寒雨连江夜入吴,

平明送客楚山孤。

洛阳亲友如相问，

一片冰心在玉壶。

2401_84152911

关注

9
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
vue脚手架基础API全面讲解【内附多个案例】

渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用Vue渐进式: Vue从基础开始, 会循序渐进向前学习, 如下知识点可能你现在不明白, 但是学完整个vue回过头来看, 会很有帮助补充概念:库: 封装的属性或方法 (例jquery.js)框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)目标: webpack自己配置环境很麻烦, 下载@vue/cli包,用vue命令创建脚手架项目@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目。
复制链接

扫一扫