Vue 2.0/3.0

news2024/7/4 4:40:41

vue核心

vue官网

1、 英文官网: https://vuejs.org/
2、中文官网: https://cn.vuejs.org/

模板语法

  1. 插值语法（双大括号表达式）
  2. 指令语法（以 v-开头）

Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

mvvm

在这里插入图片描述

数据代理

把data中的数据放到了vm中

在这里插入图片描述

1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

只有配置在data中的数据才会做数据代理

计算属性和侦听器的区别

在这里插入图片描述
计算属性：箭头函数中的return把返回值交给箭头函数了，fullName没有返回值，也就是undefine
计算属性不能开启异步任务去维护数据，侦听器可以

在这里插入图片描述
在这里插入图片描述
定时器指定的回调是js引擎调的，this指向window，但如果是箭头函数，也是js引擎调的，但是没有了自己的this，往外找，找到firstname的this，而firstName的this就是vm

总结：
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作,computed不能延时修改。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。

条件渲染

div和template区别
div破坏结构，template生效后自动脱离，但是template只能和v-if使用，不能和v-show使用

v-if和v-show
v-if会操作DOm树，所以适用于切换频率较低的场景
v-show适用于切换频率较高的场景，不展示的DOM元素未被移除，仅仅是被隐藏

列表渲染-key的原理

对比key，有缓存dom节点的则复用，没有则新创建
在这里插入图片描述
在这里插入图片描述

生命周期

在这里插入图片描述

常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

组件

理解：用来实现局部功能效果的代码集合
作用: 复用编码, 简化项目编码, 提高运行效率

在这里插入图片描述

红色区域是组件，紫色是js的模块化

在这里插入图片描述

非单文件组件

在这里插入图片描述

vc有的功能vm都有，vm可以根据el决定为哪个 容器服务
组件实例对象(vc)与vm比data必须写成函数，且不能写el配置项

VueComponent

组件的本质就是构造函数
在这里插入图片描述

vc和vm的区别：Vm可以通过el指定为哪个容器服务

分析Vue和VueComponnet的关系

实例对象身上是隐式原型属性，显示原型属性只有函数才能拥有
在这里插入图片描述
实例的隐式原型属性永远指向自己缔造者的原型对象
在这里插入图片描述

单文件组件

es6三种暴露方式

https://blog.csdn.net/m0_63779088/article/details/125858361
1.分别暴露

export let a = 1
export function A(){
	console.log("你好")
}

2.统一暴露

let a = 1
function A (){
	console.log("你好")
}
export { a , A }

注意： 以上两种向外暴露方式在主文件引入时必须使用对象的解构赋值引用， 不能使用变量接收的方式来映入

（ 即上两方式和默认暴露的区别）
3.默认暴露
一个js文件中只能有一个默认暴露，默认暴露的可以是一个常量，函数，对象等。

//默认暴露一个函数
export default function A(){
	console.log("你好")
}

//默认暴露一个对象
let a = 1
function A (){
	console.log("你好")
}
export default { a , fun }

引入方式
1.解构赋值引入
向外暴露方式在主文件引入时必须使用对象的解构赋值引用

import { a , A } from "文件路径"
//此时当前模块便含有 a 变量，和fun函数
console.log(a)// 1
fun()// 你好

2.直接引入
对于默认暴露，直接引入即可

//如果要引入的j默认暴露的是一个函数
import f from "文件路径"  //此处引入的就是一个函数
f() // 你好

vue脚手架

.vue文件没有脚手架帮助转换、翻译是无法运行的

vue脚手架

步骤

在这里插入图片描述

cli command line interface 命令行接口工具
在这里插入图片描述

npm run serve实际上执行的是红色框里的命令

在这里插入图片描述

模板项目结构

修改默认配置

默认5个文件/文件夹不能改
在这里插入图片描述
修改默认的vue入口js
在这里插入图片描述
关闭语法检查
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

render函数

1.vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
render函数接收到的createElement函数去指定具体内容。

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置， 请执行
vue inspect > output.js

todoList

1、从资源文件中拿到html、css文件，复制到App.vue，分别拆分到各个vue文件中
2、App中配置默认todos数据，通过props配置项将数据传输到下属组件list和item
（为什么不是一开始的在List中配置todos，因为header组件中添加数据传不到List中(就当前阶段不能传 全局事件总线、消息订阅发布、vuex都可以实现)，我们这里使用最基本的传输，所以只能在App(他们共同的父亲App)中配置todos）
在这里插入图片描述
在这里插入图片描述
3、在list和item中遍历，配置checked

4、勾选
5、删除
6、底部计算
7、底部交互

8、本地存储

自定义事件

js事件：click、keyup…内置事件，给html用的
自定义事件是给组件用的

配置代理

axios：promise风格

同源策略：请求协议、请求路径、请求端口要一致

解决跨域

1、cros 后端解决
在这里插入图片描述
2、jsonp
前后端一起配置，且只能针对get请求
3、配置代理服务器
同源策略管不到服务器之间的通信
在这里插入图片描述

localhost:8080/xxx
会先请求public文件夹下的资源，如果没有再去请求代理服务器

在这里插入图片描述

github案例

数据驱动着页面的展示
挂载在vue上的数据没有get、set就不是响应式的，不要直接操作_data,比如:_data=info

一般引入第三方静态资源文件是在index.html中引入，不会严格检查
如果是在src中简历assets/css文件夹,再在App.vue中引入，vue会进行严格的检查，检查bootstrap.css中引入的文件存在与否，如果没有则报错

在这里插入图片描述

vue 插件库, vue1.x 使用广泛，官方已不维护。

安装

npm i vue-resource
//使用插件
Vue.use(vueResource)

作用：将axios换成了this.$http.get，不推荐使用

vuex

全局事件总线传递数据、修改数据的实现方式（很多组件共享时，比较麻烦）

在这里插入图片描述

vuex实现

在这里插入图片描述

什么时候使用 Vuex

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

工作原理图

在这里插入图片描述

安装:npm i vuex安装的是4版本
npm i vuex@3
vue2中只能用vuex3版本，vue3中只能用vuex的4版本

Vue.use(Vuex)
store
vc ==> store

路由

npm i vue-router@3
vue-router3才能在vue-router2中使用

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

打包

单页面应用

npm run build

在这里插入图片描述
本地无法访问，需要部署在服务器上

本地搭建node用express框架测试服务器

1、新建文件夹，vscode打开
在这里插入图片描述
2、npm init 起名字然后一路默认
在这里插入图片描述
3、npm i express
在这里插入图片描述
4、新建服务器主文件server.js
在这里插入图片描述
5、启动服务：node server
6、访问localhost:5005/person
在这里插入图片描述
7、新建static或public文件夹
8、配置中间件
在这里插入图片描述
9、将打包后的html、js、css文件放进文件夹
10、访问
在这里插入图片描述

问题：一刷新就出错，因为是向服务器发送请求了，服务器没有该路径，但是使用hash模式就不会报错

使用history解决404问题 java有库

ElementUI组件库

https://element.eleme.cn/#/zh-CN/component/quickstart

完整引入

npm i element-ui
在这里插入图片描述

按需引入

npm install babel-plugin-component -D D是开发版的意思
我们用的是最新版的vue-cli，.babelrc在里面显示为babel.config.js

在这里插入图片描述
这个启动会报错，需要把"es2015"换成"@babel/preset-env"

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

01【SpringMVC快速入门】

01【SpringMVC快速入门】

文章目录01【SpringMVC快速入门】一、SpringMVC快速入门1.1 SpringMVC概述1.1.1 SpringMVC是什么1.2 SpringMVC环境搭建1.2.1 创建web项目1.2.2 Maven依赖：1.2.3 配置web.xml1.2.4 SpringMVC配置1.2.5 编写Controller1.2.6 编写视图页面01【SpringMVC快速入门】 一…
阅读更多...
高等数学（第七版）同济大学 习题10-4 （前7题）个人解答

高等数学（第七版）同济大学 习题10-4 （前7题）个人解答

高等数学（第七版）同济大学 习题10-4（前7题） 函数作图软件：Mathematica 1.求球面x2y2z2a2含在圆柱面x2y2ax内部的那部分面积.\begin{aligned}&1. \ 求球面x^2y^2z^2a^2含在圆柱面x^2y^2ax内部的那部分面积.&\e…
阅读更多...
设置Oracle表空间只读

设置Oracle表空间只读

如果对表存储的规划较好&#xff0c;将业务相关的表都放在几个表空间里&#xff0c;可以通过设置表空间只读的方式&#xff0c;让这些表只读&#xff1a; alter tablespace <tablespace name> read only; 解除只读&#xff1a; alter tablespace <tablespace name>…
阅读更多...
2023年软考备考，软件设计师知识点速记，速看

2023年软考备考，软件设计师知识点速记，速看

2023上半年软考中级软件设计师知识点速记分享给大家&#xff0c;快来一起打卡学习吧&#xff01; 1、码制的表示 2、浮点数的表示 &#xff08;1&#xff09;浮点数格式 阶码决定范围&#xff0c;阶码越长&#xff0c;范围越大&#xff1b; 尾数决定精度&#xff0c;尾数越…
阅读更多...
Android编写一个视频监控App

Android编写一个视频监控App

Android编写一个视频监控App 很久没写app了&#xff0c;小项目需要写一个rtmp拉流的视频监控app&#xff0c;简单记录一下。 参考&#xff1a;Android实现rtmp推拉流摄像头&#xff08;三&#xff09;_空空7的博客-CSDN博客_android rtmp拉流 相关库 引用外部库首先添加这个…
阅读更多...
C_C++文件，字符串和控制台格式化处理总结

C_C++文件，字符串和控制台格式化处理总结

在实际业务开发中经常会用到文件&#xff0c;字符串和控制台格式化操作&#xff0c;格式化操作无非就是将数据转成指定格式存储在文件或者字符串&#xff0c;或者显示在控制台上&#xff0c;或者反过来。本篇结合实际工作将C/C语言中常用的文件&#xff0c;字符串和控制台常用格…
阅读更多...
[附源码]Python计算机毕业设计Django高血压分析平台

[附源码]Python计算机毕业设计Django高血压分析平台

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
数据抓取-bs4、XPath、pyquery详细代码演示

数据抓取-bs4、XPath、pyquery详细代码演示

数据抓取-bs4、XPath、pyquery 一般抓取某个网站或者某个应用的内容&#xff0c;内容分为两个部分 非结构化的文本&#xff1a;HTML文本 结构化的文本&#xff1a;JSON、XML 非结构化的数据常见的解析方式有&#xff1a;XPath、CSS选择器、正则表达式 XPath语言 XPath是X…
阅读更多...
golang知识点整理

golang知识点整理

目录 1、goroutine GMP模型 2、goroutine阻塞的处理 3、goroutine内存泄漏 4、map原理、扩容 5、go内存管理 6、go的gc 1、goroutine GMP模型 1. G代表一个goroutine对象&#xff0c;每次go调用的时候&#xff0c;都会创建一个G对象 2. M代表一个线程&#xff0c;每次创建…
阅读更多...
JavaScript和Node.js的关系

JavaScript和Node.js的关系

JavaScript和Node.js的关系 JavaScript是一门编程语言&#xff08;脚本语言&#xff09;&#xff0c;JavaScript以前是在浏览器里执行的&#xff0c;需要浏览器里的JavaScript引擎&#xff0c;Firefox有叫做Spidermonkey的引擎&#xff0c;Safari有JavaScriptCore的引擎&#x…
阅读更多...
第2章物理层——2.数据通信基础知识

第2章物理层——2.数据通信基础知识

一.数据通信系统模型 一个通信系统可以划分为三大部分: 源系统&#xff08;发送端&#xff09;&#xff0c;传输系统&#xff08;传输网络&#xff09;&#xff0c;目的系统&#xff08;接收端&#xff09; [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传…
阅读更多...
GIS工具maptalks开发手册(二)03-02——示例之json格式添加绘制工具、渲染点、文字和多个面

GIS工具maptalks开发手册(二)03-02——示例之json格式添加绘制工具、渲染点、文字和多个面

GIS工具maptalks开发手册(二)03-02——示例之json格式添加绘制工具、渲染点、文字和多个面 layer参数——https://maptalks.org/maptalks.js/api/0.x/Layer.html 1、json格式渲染点和面 效果-json格式渲染点和面 代码 index.html <!DOCTYPE html> <html> <…
阅读更多...
spring boot使用自定义过滤器实现接口认证

spring boot使用自定义过滤器实现接口认证

spring boot使用自定义过滤器实现接口认证自定义过滤器创建FilterConfig类加密 解密 验证CipherFilter其他工具类AES 128 加密工具bean未加载前获取bean接口效果swagger访问Apipost 错误请求Apipost 正确请求自定义过滤器 创建MyFilter 类 去实现Filter接口 根据业务逻辑&…
阅读更多...
(Git) git使用入门学习

(Git) git使用入门学习

文章目录打开基本操作拉代码常用指令设置用户查看历史版本分支管理配置公钥基于VS CodeEND打开 Git Bash Here 即打开命令行的形式 基本操作 拉代码 # git clone 地址 $ git clone https://gitee.com/heaven-sent-lotus/test.git常用指令 # 查看状态 git status# 添加到工作区…
阅读更多...
数学建模学习（109）：几行代码训练几十种机器学习模型

数学建模学习（109）：几行代码训练几十种机器学习模型

由于本专栏不是专门讲解机器学习的，因此我想该专栏的读者在机器学习模型的实践和理论上是比较薄弱的。 我想大家在经历过数学建模比赛，一定发现机器学习的模型是一定会出现的。无论是哪一场数学建模比赛，一定有一个题是用机器学习的。虽然前面的文章中，讲解了几篇机器学习…
阅读更多...
JS实现二叉排搜索树

JS实现二叉排搜索树

二叉树中的节点最多只能有两个子节点&#xff1a;一个是左侧子节点&#xff0c;另一个是右侧子节点。而二叉搜索树又可以简称BST&#xff0c;它是二叉树的一种&#xff0c;但是只允许你在左侧节点存储&#xff08;比父节点&#xff09;小的值&#xff0c;在右侧节点存储&#x…
阅读更多...
FX粒子（Niagara系统）、顶点法线材质函数、材质参数集——雪和简单地形材质积雪效果

FX粒子（Niagara系统）、顶点法线材质函数、材质参数集——雪和简单地形材质积雪效果

雪 一、利用FX——Niagara系统创建粒子&#xff0c;模板选择 喷泉粒子模板 二、删除不需要的模块 球体位置发射、初始的向上速度、拖拽等和雪无关的模块删除。 三、添加需要的模块并设置 需要大范围降雪故用box location&#xff08;5000,5000,2000&#xff09;&#xff0c;…
阅读更多...
Pycharm中使用远程JupyterLab以及JupyterHub登录问题

Pycharm中使用远程JupyterLab以及JupyterHub登录问题

文章目录需求分析登录网页JupyterHubPycharm配置远程JupyterHub一点思考需求分析 在之前的文章中我们讨论了如何使用Pycharm连接远程服务器并进行调试&#xff0c;Pycharm中SSH、SFTP连接远程服务器编辑调试全面手把手教程&#xff0c;成功在Pycharm中添加了远程Python解释器&…
阅读更多...
docker 实战命令集合

docker 实战命令集合

目录 docker 基本命令 查看docker的信息 查看docker的版本 docker镜像管理命令 查找镜像 拉取镜像 查看本地仓库的镜像 查看镜像的详细信息 删除本地仓库的镜像 将镜像文件打包 读取打包过后的镜像文件 登入docker hub 推送镜像到dockerHub docker容器管理命令 创…
阅读更多...
Keras深度学习入门篇

Keras深度学习入门篇

Keras深度学习入门篇 第一部分&#xff1a;机器学习基础 一、机器学习的四个分支 监督学习 分类回归序列生成&#xff0c;给定一张图像&#xff0c;预测描述图像的文字语法树预测&#xff0c;给定一个句子&#xff0c;预测其分解生成的语法树目标检测&#xff0c;给定一张图…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023