前端Vue

在这里插入图片描述

开发知识点-VueJS

mixin.js

混入(Mixin)是Vue.js提供的一种机制,用于在多个组件之间共享代码。
通过混入,可以将组件中的可复用逻辑提取到一个独立的对象中,然后在需要的组件中引入这个对象。

父子组件通信

在这里插入图片描述

props 父组件向子组件传递数据

以单文件组件为核心的项目开发中
vue父子组件之间是如何交换数据来实现通信

  • 提供了props来实现父组件向子组件传递数据
 <mapps :lat-lng="latLng" ref="mapps" @update-child-value="handleUpdatedingwei"></mapps>

 latLng: {
    lat: null, lng: null },
 
  props: {
   
    latLng: {
   
      type: Object, // 限定传递的数据类型为对象 
    },
  },

$emit事件机制

子组件中的数据传递回父组件
较为复杂和普遍的数据交互,建议vuex来统一管理数据。

通过 @update-child-value 事件监听子组件的变化

  <div>
    <h1>父组件</h1>
    <p>子组件的变量值为:{
   {
    childValue }}</p>
    <child-component :parent-value="parentValue" @update-child-value="handleUpdateChildValue"></child-component>
  </div>

methods: {
   
  handleLocationUpdate(lat, lng) {
   
    console.log(lat); // 输出子组件传递的 lat 值
    console.log(lng); // 输出子组件传递的 lng 值
  }
}

当子组件中的数据发生变化时,会触发 updateParentValue 方法,
通过 $emit 方法触发 update-child-value 事件,并将子组件中的数据作为参数传递回父组件。

父组件中的 handleUpdateChildValue 方法接收到参数后,将其设置为 childValue 变量的值,从而完成了子组件向父组件传递数据的过程。

this.$emit()方法

用于触发自定义事件。它是Vue实例的一个方法,可以在组件内部使用。
可以向父组件发送自定义事件,并传递数据给父组件。父组件可以通过监听这个自定义事件来执行相应的逻辑。

slot 插槽

插槽用于决定将所携带的内容
模块化 模板分块 插槽显不显示、怎样显示是由父组件来控制
插槽在哪里显示就由子组件来进行控制

Props

  • name - string,用于命名插槽
    Usage
  • 元素作为组件模板之中的内容分发插槽 元素自身将被替换

< slot > 元素

Shadow DOM 使用 元素将不同的 DOM 树组合在一起

Slot 是组件内部的占位符,用户可以使用自己的标记来填充

通过定义一个或多个 slot,您可将外部标记引入到组件的 shadow DOM 中

在这里插入图片描述

属性 computed

用来监控自己定义的变量

该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;

比较适合对多个变量或者对象进行处理后返回一个结果值

Vue.observable

让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象

@click事件修饰符用法

.stop:阻止事件继续传播。
.prevent:阻止默认事件。
.capture:使用事件捕获模式。
在目标元素之前处理该事件。

.self:只当事件是从侦听器绑定的元素本身触发时才触发回调。
.once:只触发一次回调。
.passive:告诉浏览器该事件无需阻止默认行为,可以提高页面的滚动性能。

路由导航

一、 router-link

<router-link :to="{ path: '/goods/update', query: { goodsId: item.goods_id } }">编辑</router-link>

二、router.push

	const url = `/goods/update?Id=${is_share}`;
    const paramsUrl = { name: 'your-route-name', params: { id: is_Share } };  
    this.$router.push(paramsUrl);  

三、this.$router.go(val)

四、this.$router.replace

组件依赖

npm install -S mitt

-S安装为dependencies,即用于发布到生产环境
配置@根路径,替代../../

安装依赖

npm install path --save

安装插件Path Intellisense

配置提示

vscode中依次点击:文件-首选项-设置-工作区-扩展-path-intellisense

对settings.json进行编辑:将path-intellisense.mappings的值设置如下:

{
    // ...这里你们可能还有其他的一些自定义配置
    "path-intellisense.mappings": {
        "@": "${workspaceRoot}/src"
    }
}


配置别名,修改vite.config.js文件:
加上别名的配置,(顺便配置一下打包的基础路径以及启动配置【这个可以不配,纯属个人习惯】)

vue ui 
Vue 项目管理器
http://localhost:8000/project/select

生命周期

mounted 钩子函数

表示组件被挂载到 DOM 上后执行的操作

$refs

this.$refs 是 Vue 实例中的 $refs 属性,它提供对组件引用的访问。


https://doc.dcloud.net.cn/uni-app-x/vue/built-in.html#ref

ref 属性

用于给组件或 DOM 元素添加一个引用名

<mapps ref="mapps" ></mapps>


通过 this.$refs.mapps 来调用 <mapps> 组件暴露出的方法或访问其属性

例如:
 this.$refs.mapps.someMethod(); // 调用 <mapps> 组件的 someMethod 方法

使用 ref 属性时需要确保在 Vue 实例的生命周期中组件已经被渲染完成,否则 $refs 可能会是空值。


如果需要在组件渲染完成后执行相关操作,可以使用 $nextTick 方法或使用 Vue 的生命周期钩子函数来确保正确的时机。

params

将一个包含多个属性和值的对象作为参数传递给一个组件或方法

路径别名配置

vxe-table组件


https://vxetable.cn/#/table/start/install 

开源文档 拉入vscode

vue-cli-service不是内部或外部命令 找不到相关的依赖包
npm/cnpm install

yarn run build
npm run serve

public 内生成

  • 安装依赖
yarn install
  • 开发模式运行
yarn run serve
  • 编译项目
yarn run build

安装node.js

安装包下载地址:https://nodejs.org/en/

安装包下载安装完成后,在命令行使用 node -v 查看node版本,判断是否安装成功。

在这里插入图片描述
在这里插入图片描述

安装vue脚手架

安装淘宝镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述
安装webpack:

npm install webpack@3.8.1 -g

webpack -v 查看版本号
在这里插入图片描述

安装vue-cli脚手架工具

npm install vue-cli -g

在这里插入图片描述
vue -V 查看版本号(注意这里是大写的“V”)
在这里插入图片描述
在这里插入图片描述

第三步,创建项目
使用sever管理器 (不推荐):
vue create project-name

使用webpack管理器 (推荐):
vue init webpack “项目名”

y,y,n,回车,回车,回车,回车,y

第四步,运行
cd 到你的项目文件夹

运行项目 npm/cnpm run dev

安装依赖 npm install (谨慎使用)

复制网址至浏览器即可

内容:
其中src是我们写的东西,包含大概以下文件!

components : 组件

router:路由

path: 定义路由的路径   当用户访问/xxx路径时,将匹配到这个路由规则。
name: 路由的名称,命名路由可以简化URL的引用,便于后续的编程导航等操作。
component: 指定该路由要加载的组件。 
redirect: 自动重定向的路径,意味着访问/xxx时,会自动跳转到/xxx/list/all路径。
meta: 路由元信息,可以包含任意的自定义数据。
这里定义了title、icon和permission等字段,分别表示路由的标题、图标和权限控制信息。
children: 子路由数组,定义了属于/order这个路由下的子页面路由。

RouteView组件

通常RouteView是一个布局组件,用于嵌套子路由的视图。

子路由配置

path: 子路由的路径
component: 通过一个函数来动态导入组件,这里导入的是@/views/order/Detail。

使用动态导入(懒加载)有助于减小初始加载的包大小,提高应用性能。



meta: 定义了title、keepAlive和permission等元信息。keepAlive设置为false表示不需要缓存这个页面。
hidden: 设置为true,通常表示这个路由项不会在侧边栏等导航菜单中显示。 
activePath: 控制当访问某些特定路径时,这个路由项应该被视为激活状态 

创建新组建 :

在components 里直接创建新的.vue文件即可

写新的路由:

组件想要使用(在页面渲染)必须要配置路由才可以

在 router 文件中 按照上面的格式,写上自己的组件名和路由名即可

assets: 系统图片存放地址

main.js: vue脚手架对象存放地 (新的包要放在里面)

项目打包:
输入 npm/cnpm run build 即可将项目打包(压缩包)

vue 脚手架 组件用法:
! 注意: vue组件中的全部html都存在于一个块元素中,就是app.vue中的 id名字为app的div。

所以,一个模板中,值允许存在一个块元素,也就是说,不可以在app.vue中,添加其他的div

新建组件之后,写法与html一致

其中:

vue脚手架 功能更加强大 包含 v-xx等一系列功能

渐进式 框架 MVVM

  • 命令 管理篇

npm i logo --registry=https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org

npm install -g @vue/cli

清node_modules

npm cache clean --force

npm install

npm run build/dev/server/init

npm init -y

npm install eslint --save-dev

cd ./node_modules/.bin/

eslint --init

  • 开发篇

vue init webpack xxxx

npm install -g xxx

vue create xxx

选择 Router vueX 等插件 选择版本

选择特性 feature Jest

选择配置项 package.json

cd 到项目目录

npm run server

Element UI

axios.post()

— 注意有 跨域 vue.config.js 配置 devServer{ }

watch

主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,

它可以监控一个变量,也可以是一个对象

error Strings must use singlequote quotes

格式化代码之后会将单引号变为双引号,最后还会加上逗号,末尾的分号于是会导致三种错误:

1.Strings must use singlequote quotes—双引号

2.Extra semicolon semi ----末尾分号

3.error Unexpected trailing comma comma-dangle—逗号

  rules: {
   
    "space-before-function-paren": 0,
   'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'quotes': 'off',
    'semi': 'off',
    'comma-dangle': 'off',
      
      
      
      
    'eslint  eol=last': 0,   實在不行 就   script空出來一行  末尾空一行
  }

在这里插入图片描述
npm uninstall less-loader

npm install less-loader@6.0.0

npm init -y
npm install eslint --save-dev
cd ./node_modules/.bin/
eslint --init

vue ui

在这里插入图片描述
在这里插入图片描述

前端框架——Vue小驿站(1)

  • Vue.js是一款轻量级的以数据驱动的前端JS MVVM框架
  • 提供了一种帮助我们快速构建并开发前端项目的新的思维模式
  • 构建用户界面的渐进式框架
  • 只关注视图层, 采用自底向上增量开发的设计
  • 尽可能简单的 API 实现响应的数据绑定和组合的视图组件
    在这里插入图片描述

在这里插入图片描述

  • 其和jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示,
  • 而Vue通过操作数据来实现页面的更新与展示

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

Vue数据驱动的概念模型

在这里插入图片描述

  • Vue.js主要负责的是上图绿色正方体ViewModel的部分
  • 其在View层(即DOM层)与Model层(即JS逻辑层)之间
  • 通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西
  • 当View层的视图发生改变时,Vue会通过DOM Listeners来监听并改变Model层的数据
  • 当Model层的数据发生改变时,其也会通过Data Bingings来监听并改变View层的展示
  • 实现了一个双向数据绑定的功能,也是Vue.js数据驱动的原理所在

一个html文件中 直接可以通过script标签引入Vue.js

 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  • 可以在页面里写Vue.js代码
  • 通过new Vue()构建了一个Vue的实例
  • 实例中
    可以包含挂在元素(el),数据(data),模板(template),方法(methods)
    生命周期钩子(created等)等选项
 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

(1)el表明我们的Vue需要操作哪一个元素下的区域,'#demo’表示操作id为demo的元素下区域。
(2)data表示Vue 实例的数据对象,data 的属性能够响应数据的变化。
(3)created表示实例生命周期中创建完成的那一步,当实例已经创建完成之后将调用其方法。

Vue常用指令 数据驱动

在这里插入图片描述
(1)v-text: 用于更新绑定元素中的内容,类似于jQuery的text()方法
(2)v-html: 用于更新绑定元素中的html内容,类似于jQuery的html()方法
(3)v-if: 用于根据表达式的值的真假条件渲染元素,如果上图P3为false则不会渲染P标签
(4)v-show: 用于根据表达式的值的真假条件 显示隐藏元素,切换元素的 display CSS 属性
(5)v-for: 用于遍历数据渲染元素或模板,如图中P6为[1,2,3]则会渲染3个P标签,内容依次为1,2,3
(6)v-on: 用于在元素上绑定事件,图中在P标签上绑定了showP3的点击事件

在这里插入图片描述


在这里插入图片描述在这里插入图片描述在这里插入图片描述

插值语法{ { }}

  • 网速慢插值 闪烁特别明显
  • 所以v-clock 搭配这个 style样式属性选择器 在这里插入图片描述 在这里插入图片描述
    关于更多的Vue指令可以查看Vue2.0文档,地址:https://vuefe.cn/api/#指令

在这里插入图片描述

  • 在一个html页面里通过引入Vue.js来直接写Vue代码, 不常用。 不利于后期的维护和代码的公用
  • 需要用到Vue提供的技术栈来构建强大的前端项目。

··························``除了Vue.js我们还需要用到:

vue-cli

Vue的脚手架工具,用于自动生成Vue项目的目录及文件。

vue-router

Vue提供的前端路由工具,利用其我们实现页面的路由控制,局部刷新及按需加载,构建单页应用,实现前后端分离。

路由元数据

$route.meta.title

vuex

Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。
这些状态通常是被多个组件共享和访问的

ES6

Javascript的新版本,ECMAScript6的简称。利用ES6我们可以简化我们的JS代码,同时利用其提供的强大功能来快速实现JS逻辑。

NPM

node.js的包管理工具,用于同一管理我们前端项目中需要用到的包、插件、工具、命令等,便于开发和维护。

webpack

一款强大的文件打包工具,可以将我们的前端项目文件同一打包压缩至js中,并且可以通过vue-loader等加载器实现语法转化与加载。

Babel

一款将ES6代码转化为浏览器兼容的ES5代码的插件

getters

对状态的派生和缓存。它们类似于组件的计算属性,当它们所依赖的状态发生变化时,它们自动重新计算并返回新的值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值