【前端Vue】Vue从0基础到大神完整教程第1篇:vue基本概念,vue-cli的使用【附代码文档】

Vue从0基础到大神学习完整教程完整教程(附代码资料)主要内容讲述:vue基本概念,vue-cli的使用,vue的插值表达式,{{ gaga }},{{ if (obj.age > 18 ) { } }},vue指令,综合案例 - 文章标题编辑vue介绍,开发vue的方式,基本使用,如何覆盖webpack配置,目录分析与清理,vue单文件组件的说明,vue通过data提供数据,通过插值表达式显示数据,安装vue开发者工具,v-bind指令,v-on指令,v-if 和 v-show,v-model,v-text 和 v-html。day-08vuex介绍,语法,模块化,小结。面经PC端-element (上)初始化,request,router,login模块,layout模块,dashboard模块(了解)。面经PC端 - Element (下)Article / list 列表,Article / add 添加,Article / del 删除,Article / upd 修改,Article / preview 预览,yarn-补充。vue指令(下),成绩案例,计算属性,属性监听v-for,样式处理,基本结构与样式,基本渲染,删除,新增,处理日期格式,基本使用,计算属性的缓存的问题,成绩案例-计算属性处理总分 和 平均分,计算属性的完整写法,大小选,基本使用,复杂类型的监听-监听的完整写法,成绩案例-监听数据进行缓存,配置步骤 (两步),使用演示。vue指令(下),成绩案例,计算属性,属性监听v-for,样式处理,基本结构与样式,基本渲染,删除,新增,处理日期格式,基本使用,计算属性的缓存的问题,成绩案例-计算属性处理总分 和 平均分,计算属性的完整写法,大小选,基本使用,复杂类型的监听-监听的完整写法,成绩案例-监听数据进行缓存,配置步骤 (两步),使用演示。组件化开发,组件通信,todo案例,作业什么是组件化开发,组件的注册,全局注册组件,组件的样式冲突 ,组件通信 - 父传子 props 传值,v-for 遍历展示组件练习,单向数据流,组件通信 - 子传父,props 校验,布局,任务组件todo,列表,删除,修改:不做了!下面代码其实就是我想让大家练习,添加,剩余数量,清空已完成,小选与大选,筛选:作业,本地存储,附加练习_1.喜欢小狗狗吗,附加练习_2.点击文字变色,附加练习_3. 循环展示狗狗,附加练习_4.选择喜欢的狗。v-model,ref 和 $refs,$nextTick,dynamic 动态组件,自定义指令,插槽,案例:商品列表v-model 语法糖,v-model给组件使用,动态组件的基本使用,自定义指令说明,自定义指令 - 局部注册,自定义指令 - 全局注册,自定义指令 - 指令的值,默认插槽 slot,后备内容 (默认值),具名插槽,作用域插槽,案例概览,静态结构,MyTag 组件,MyTable 组件。生命周期,单页应用程序与路由,vue-router研究生命周期的意义,生命周期函数(钩子函数),组件生命周期分类,SPA - 单页应用程序,路由介绍,vue-router介绍,vue-router使用,配置路由规则,路由的封装,vue路由 - 声明式(a标签转跳)导航,vue路由 - 重定向和模式,vue路由 - 编程式(JS代码进行转跳)导航,综合练习 - 面经基础版,组件缓存 keep-alive。面经 H5 端 - Vant(上)初始化,vant,axios封装,router,主题定制-了解,登录&注册。面经 H5 端 - Vant(下)列表,详情,收藏 与 喜欢,我的(个人中心)。Day01_vuex今日学习目标(边讲边练),1.vuex介绍,2.vuex学习内容,3.vuex例子准备,vuex-store准备,5.vuex-state数据源,【vuex-mutations定义-同步修改,【vuex-mutations使用,8.vuex-actions定义-异步修改,9.vuex-actions使用,10.vuex-重构购物车-准备Store,11.vuex-重构购物车-配置项(上午结束),vuex-getters定义-计算属性,13.vuex-getters使用,14.vuex-modules定义-分模块,15.分模块-影响state取值方式,16.分模块-命名空间,扩展: 使用Devtools调试vuex数据。

全套笔记资料代码移步: 前往gitee仓库查看

感兴趣的小伙伴可以自取哦,欢迎大家点赞转发~


vue基本概念

Vue

  • 为什么要学习vue (vue/react/angular)
  • 公司对vue有要求 [BOSS直聘](<
  • 开发更加的效率和简洁,并且容易维护。

vue介绍

  • [vue 中文网]( 尤雨溪
  • [Vue.js 是什么](
  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式javascript框架

渐进式的概念

渐进式:逐渐增强,可以在项目中使用vue的一部分功能,也可以使用vue的全家桶来管理整个项目。

angular: 全家桶

框架的概念

  • [我们所说的前端框架与库的区别?](

Library

  • 代表:moment axios
  • 库,本质上是一些函数的集合。每次调用函数,实现一个特定的功能 工具箱

  • 使用库的时候,把库当成工具使用,需要自己控制代码的执行逻辑。

Framework

  • 代表:vue、angular、react、bootstrap
  • 框架,是一套完整的解决方案

  • 使用框架的时候,框架实现了大部分的功能,我们只需要按照框架的规则写代码

库和框架的区别

  • 使用库的时候,很自由,只要调用库提供的各种各样的方法就行,也可以不用其他的一些方法
  • 使用框架的时候,需要按照框架的规则写代码,限制会非常多,但同时框架的功能也很强大,可以极大的提升开发的效率。

vue是 MVVM 的框架

  • MVVM思想:一种软件架构模式,决定了写代码的方式。
  • M:model数据模型(ajax获取到的数据)
  • V:view视图(页面)
  • VM:ViewModel 视图模型

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

  • V(修改视图) -> M(数据自动同步)
  • M(修改数据) -> V(视图自动同步)

1. 在vue中,不推荐直接手动操作DOM!!!

2. 在vue中,通过数据驱动视图,不要在想着怎么操作DOM,而是想着如何操作数据!!

开发vue的方式

开发vue有两种方式

  • 传统开发模式:基于html/css/js文件开发vue
  • 工程化开发方式:在webpack环境中开发vue,这是最推荐的方式。
  • 现代化的项目也都是在webpack环境下进行开发的。

vue-cli的使用

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

  • 开箱即用
  • 零配置
  • webpack、babel

基本使用

  • 全局安装命令

```bash npm install -g @vue/cli

OR

yarn global add @vue/cli ```

  • 查看版本vue

js vue --version

  • 初始化一个vue项目

js vue create 项目名(不能用中文)

  • 启动项目

yarn serve yarn build

如何覆盖webpack配置

注意:我们在项目无法找到webpack.config.js文件,因为vue把它隐藏。

如果需要覆盖webpack的配置,可以修改vue.config.js文件,覆盖webpack配置文件

jsx const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, // 配置端口号 devServer: { port: 3000 } })

目录分析与清理

image-20210105120624992

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

```jsx

123

```

  • assets文件夹与components直接删除

vue单文件组件的说明

一个.vue文件就是一个组件,后续开发vue,所有的功能都是基于组件实现。

安装插件 image-20210521104327942

一个单文件组件由三部分构成

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

yarn add less-loader@7.2.1 less -D

vue的插值表达式

vue通过data提供数据

vue中通过template可以提供模板,但是这样的数据是写死的。

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

```jsx

<script> export default { data () { return { money: 100, msg: 'hello' } } } </script>

```

通过插值表达式显示数据

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

  1. 作用: 使用 data 中的数据渲染视图(模板)

  2. 基本语法, 支持三元运算符

```jsx {{ msg }} {{ obj.name }} {{ msg.toUpperCase() }} {{ obj.age > 18 ? '成年' : '未成年' }}

```

  1. vue中插值表达式的注意点

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

```jsx

{{ gaga }}

```

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

```jsx

{{ if (obj.age > 18 ) { } }}

```

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

```jsx

```

安装vue开发者工具

  • 直接通过谷歌应用商店安装 需要梯子
  • 通过极简插件下载插件,本地安装。

vue指令

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

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

v-bind指令

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

```html

```

v-on指令

基本使用

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

  • 最基本的语法

  • <button v-on:事件名="事件函数">按钮</button>,需要在methods中提供事件处理函数

```jsx

// 提供方法
methods: {fn () {console.log('你好啊')// console.log(this)this.money++},fn1 () {this.money += 10000},
}

```

  • 需要传递参数

  • <button v-on:事件名="事件函数(参数)">按钮</button>,需要在methods中提供事件函数,接受参数

```jsx

methods: { addMoney (money) { this.money += money } }

```

  • 如果事件的逻辑足够简单,可以不提供函数

```jsx

```

vue中获取事件对象(了解)

需求: 默认a标签点击会跳走, 希望阻止默认的跳转, 阻止默认行为 e.preventDefault()

vue中获取事件对象

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

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

```jsx

```

image-20210106105334044

v-if 和 v-show

基本使用

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

  1. v-show

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

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

  1. v-if

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

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

应用场景:

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

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

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

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

```html

v-show盒子-{{ msg }}

v-if盒子-{{ msg }}

```

v-else 和 v-else-if

```html

尊敬的超级vip, 你好

你谁呀, 赶紧登陆~


60岁以上, 广场舞

30岁以上, 搓麻将

20岁以上, 蹦迪

20岁以下, 唱跳rap篮球

```

案例-折叠面板

需求: 点击展开或收起时,把内容区域显示或者隐藏

静态结构:

```jsx

案例:折叠面板

芙蓉楼送辛渐
收起

寒雨连江夜入吴,

平明送客楚山孤。

洛阳亲友如相问,

一片冰心在玉壶。

<script> export default { data() { return { } } } </script>

```

完整代码:

```jsx

案例:折叠面板

芙蓉楼送辛渐
{{ isShow ? '收起' : '展开' }}

寒雨连江夜入吴,

平明送客楚山孤。

洛阳亲友如相问,

一片冰心在玉壶。

<script> export default { data() { return { isShow: true } } } </script>

```

v-model

基本使用

**作用: 给表单元素使用, 双向数据绑定 **

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

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

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

语法: v-model='值'

```jsx

```

v-model 处理其他表单元素

v-model 会忽略掉表单元素原本的value, checked等初始值

textarea, select, checkbox

v-model 修饰符

  • number

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

```html

```

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

  • trim

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

```html

```

  • lazy

change时而非input时更新,可以给 v-model 添加 lazy 修饰符:

```html

```

v-text 和 v-html

v-text指令

  • 解释:更新元素的 textContent/innerText。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。

```html

```

v-html指令

  • 解释:更新DOM对象的innerHTML,html标签会生效

```html

```

**在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 [XSS 攻击](

只在可信内容上使用 v-html永不用在用户提交的内容上。

综合案例 - 文章标题编辑

静态结构:

```jsx

文章标题

文章频道 编辑
标题:
频道:

<script> export default { name: 'ArticleCase', data() { return { edit: false, article: { title: '如何成为一名前端老鸟?', channel: '前端', }, form: { title: '', channel: '', }, }; }, methods: { }, }; </script>

```

完整代码:

```jsx

{{ article.title }}

{{ article.channel }} 编辑
标题:
频道:

<script> export default { name: 'ArticleCase', data() { return { edit: false, article: { title: '如何成为一名前端老鸟?', channel: '前端', }, form: { title: '', channel: '', }, }; }, methods: { openEdit() { this.edit = true; this.form = { ...this.article }; }, submit() { this.article = { ...this.form }; this.edit = false; }, }, }; </script>

```

未完待续, 同学们请等待下一期

全套笔记资料代码移步: 前往gitee仓库查看

感兴趣的小伙伴可以自取哦,欢迎大家点赞转发~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/733080.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

20行代码搞定PDF表格转为Excel表

1.环境准备 安装好python并且配置好环境安装pdfplumber、xlwt库使用Vscode或者PyCharm等编辑器 在pycharm中如果报红&#xff0c;可以鼠标点击报红的库&#xff0c;altenter进行安装 2.代码部分 import pdfplumber import xlwt # 读取源pdf文件 pdf pdfplumber.open("…

图像处理ASIC设计方法 笔记8 卷积计算芯片的结构

(一) P81 卷积芯片内部模板框图 该设计有两个数据通路:图像数据和模板数据。 图像数据是经过帧控制、实时图SPRAM(写控制、 SPRAM读控制、数据读控制)、计算单元; 模板数据是经过模板SPRAM、计算单元。 4.5.4运算单元像素寄存器控制 存储SPRAM写入的64bit数据,输出为…

Unity2023.1.19_DOTS_JobSystem

Unity2023.1.19_DOTS_JobSystem 上篇我们知道了DOTS是包含Entity Component System&#xff0c;Job System&#xff0c;Burst compiler三者的。接下来看下JobSystem的工作原理和具体实现。 简介&#xff1a; 官方介绍说&#xff1a;JobSystem允许您编写简单而安全的多线程代…

C++篇 语 句

到目前为止&#xff0c;我们只见过两种语句&#xff1a; return 语句和表达式语句。根据语句对执行顺 序的影响&#xff0c;C 语言其余语句大多属于以下 3 大类。 选择语句&#xff1a; if 语句和 switch 语句。循环语句&#xff1a; while 语句&#xff0c; do...while 语句和…

XSS漏洞-存储型漏洞案例

一、环境 在github上找DVWA的靶机环境 DVWA存储库 二、复现 先将其安全等级改为低 然后点击存储型的xss&#xff0c;先随便写几条看看现象 可以看到我们写的都展示在了下面的框中 看看源码&#xff0c;分析在存储时的漏洞 我们可以看到&#xff0c;在对数据插入的时候&am…

筛选出等于1的式子

然后统计和归类 归类分行归类方法 算术符号归类 数字大小排序算术符号归类 import randomdef generate_expression(num_range, num_count, operators):nums random.sample(range(num_range[0], num_range[1]1), num_count)ops random.choices(operators, knum_count-1)expre…

ChatGPT 结合实际地图实现问答式地图检索功能基于Function calling

ChatGPT 结合实际地图实现问答式地图检索功能基于Function calling ChatGPT结合实际业务&#xff0c;主要是研发多函数调用&#xff08;Function Calling&#xff09;功能模块&#xff0c;将自定义函数通过ChatGPT 问答结果&#xff0c;实现对应函数执行&#xff0c;再次将结果…

List(CS61B学习记录)

问题引入 上图中&#xff0c;赋给b海象的weight会改变a海象的weight&#xff0c;但x的赋值又不会改变y的赋值 Bits 要解释上图的问题&#xff0c;我们应该从Java的底层入手 相同的二进制编码&#xff0c;却因为数据类型不同&#xff0c;输出不同的值 变量的声明 基本类型…

一步到位!快速精通Git工作流及实战技巧详解

Git是一个分布式版本控制系统。 1、git的应用场景 1.备份 小明负责的模块就要完成了&#xff0c;就在即将release之前的一瞬间&#xff0c;电脑突然蓝屏。硬盘光荣牺牲&#xff01;几个月来的努力付之东流。 场景二&#xff1a;代码还原 这个项目中需要一个很复杂的功能&…

CVHub | 初识langchain,3分钟快速了解!

本文来源公众号“CVHub”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;初识langchain 1 什么是langchain langchain[1]是一个用于构建LLM-Based应用的框架&#xff0c;提供以下能力: 上下文感知&#xff1a;可以为LLM链接上下文…

《Python源码剖析》之字符串拼接的一个效率问题

前言 我们常用的字符串拼接方法有两个&#xff0c;一个是通过“”号实现字符串的拼接&#xff0c;还一个就是通过join方法来实现拼接&#xff0c;前者在写法上更加便利&#xff0c;和数字之间的加法运算一样&#xff0c;通常只有两个运算对象&#xff0c;只不过他们的运算规则…

新贵Claude 3家族强势登场,AI领域掀起新一轮浪潮!

人工智能领域的风云再起,Anthropic公司日前放出狠招,推出了全新的大模型家族Claude 3系列。Claude 3由三款不同级别的大模型组成,分别是Claude 3 Haiku、Claude 3 Sonnet和Claude 3 Opus。这一系列产品的推出,不仅扩充了AI生态,更是对OpenAI的GPT-4等龙头产品发出了挑战。让我们…

函数柯里化:JavaScript中的高级技巧

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

ospf静态路由实验简述

1、ospf静态路由实验简述 实验拓扑图 实验命令 r2: sys sysname r2 undo info enable int loopb 0 ip add 2.2.2.2 32 quit int e0/0/0 ip add 23.1.1.2 24 quit ospf 1 area 0 network 23.1.1.0 0.0.0.255 network 2.2.2.2 0.0.0.0 ret r3: sys sysname r3 undo info enable …

python 蓝桥杯之动态规划入门

文章目录 DFS滑行&#xff08;DFS 记忆搜索&#xff09; 思路&#xff1a; 要思考回溯怎么写&#xff08;入参与返回值、递归到哪里&#xff0c;递归的边界和入口&#xff09; DFS 滑行&#xff08;DFS 记忆搜索&#xff09; 代码分析&#xff1a; 学会将输入的数据用二维列表…

变换,动画

面试题——需求&#xff1a;在不知道父元素与子元素的宽高时 如何让子元素在父元素内居中&#xff1f; 1.定位 父相子绝 2.子元素 top&#xff1a;50% left:50% 3.子元素 transform: translate(-50%,-50%) .parent{height: 500px;background-color: red;position: relative;}.c…

在QDialog中嵌入QML

在一些一开始使用QWidget的项目&#xff0c;现由于要支持的硬件及系统已升级&#xff0c;可以很好的使用QML。在这种情况下&#xff0c;就需要通过QWidget与QML混合使用的方式来慢慢把整个项目过渡到纯QML工程。这时在QWidget中嵌入QML是经常要做的事&#xff0c;现就说一说在Q…

Lesson 6 Convolutional Neural Network(CNN)

听课&#xff08;李宏毅老师的&#xff09;笔记&#xff0c;方便梳理框架&#xff0c;以作复习之用。本节课主要讲了CNN的适用范围&#xff0c;整体架构与工作流程&#xff0c;CNN的应用&#xff0c;CNN的缺点以及解决方法。 1. CNN的输入与输出 CNN是专门为了图像而设计的一…

面试经典150题——合并两个有序链表

You just work on it. Time will do the rest! 1. 题目描述 2. 题目分析与解析 2.1 思路一 这个题目还是比较简单的&#xff0c;通过分析题目&#xff0c;我们可以知道题目中关键信息为&#xff1a; 所以我们只需要从前向后遍历两个链表&#xff0c;在两个链表不空的情况下&…

HTML静态网页成品作业(HTML+CSS)——原神介绍设计制作(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有4个页面。 二、作品演示 三、代…