vue使用

屋顶会着火

已于 2023-07-12 14:08:09 修改

阅读量144

点赞数

文章标签： vue.js 前端 javascript

于 2023-01-28 19:56:32 首次发布

本文链接：https://blog.csdn.net/qq_54799493/article/details/128781504

版权

router-link

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aTCe95Ff-1674906920444)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20221002221120880.png)]

它相当于一个 a标签，可以跳转链接

	<router-link :to="{path:'/resourceInfo',query:{resourceId:o.resourceId}}">
		//里面写你包裹的元素
	</router-link>

query用来传参

//获取路由参数
      this.resourceId = this.$route.query.resourceId

这个 name 属性的意义就在于，我们可以使用这个name 属性来动态的绑定当前路由，而不是只能跳转固定的 path路径，也就是说，我一旦给某个路由设置了 name 属性，那么我在跳转路由的时候，如果是通过绑定的 name 属性值进行跳转，而不是根据绑定的 path 路径来跳转的话，那么，我的跳转就可以是动态的了，即使这个路由的 path 更改了，我的 name也是指向当前更改后的路由

 //配置路由
const routes = [
  { path: '/', name:"indexLink", component: Home },
  { path: '/menu', name:"menuLink", component: Menu },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '/admin', component: Admin },
  { path: '/about', component: About },
  { path: '*', redirect:  "/menu" },
]

<template>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
           <ul class="navbar-nav">
               <li>
                   <router-link :to="{name : 'indexLink'}" class="nav-link" >主页</router-link>
                </li>
               <li>
                   <router-link :to="{name : 'menuLink'}" class="nav-link" >菜单</router-link>
                 </li>
               <li>
                   <router-link to="admin" class="nav-link">管理</router-link>
                </li>
               <li>
                   <router-link to="about" class="nav-link">关于我们</router-link>
                </li>       
           </ul>
           <ul class="navbar-nav ml-auto">
               <li>
                   <router-link to="login" class="nav-link">登录</router-link>
                </li>
               <li>
                   <router-link to="register" class="nav-link">注册</router-link>
                </li>
           </ul>
        </nav>
    </header>
</template>

< keep-alive>标签

是将访问过的界面进行缓存

父子组件传值

1、父组件可以使用 props 把数据传给子组件。

在子组件中增加 props :

export default {
  props: ['childMessage'],
  data () {
  	return {
		...
	}
  }

在父组件中为嵌套的子组件绑定传的值

<app>
	<child :childMessage="parentMessage"></child>
</app>

其中，parentMessage为父组件中 data 里的值：

export default {
  data () {
  	return {
		parentMessage: '我是来自父组件的值'
	}
  }

2、子组件可以使用 $emit 触发父组件的自定义事件。

子组件：这里的index是传递给父组件的参数

为 button 绑定 click 事件

<button @click="submit()"></button>

当触发点击事件时,在函数中使用 $emit

submit () {
	this.$emit('childFn',this.message)
}

其中 $emit 中的两个参数，第一个为父组件的事件，第二个为想要传的值

父组件：

在引用子组件的位置，写入事件：

<app>
	<child @childFn="parentFn"></child>
</app>

在 parentFn() 函数中，写入传的参数，获取子组件中 message 的值：

parentFn (message) {
	this.getMessage = message
}

这样就将子组件中的 message 值存到了父组件中的 getMessage 中了

v-model

实时更新

slice的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vE479Coa-1674906920445)(https://www.w3cplus.com/sites/default/files/blogs/2016/1603/array-slice-2.png)]

slice()接受一个或两个参数，即要返回项的起始和结束位置。当只给slice()传递一个参数时，该方法返回从该参数指定位置开始到当前数组末尾的所有项。

ref

相当于组件名

<div id="app">
            <input type="text" value="HelloWorld" alt="captcha"  ref="text">
            <button @click="changeText">change word</button>
        </div>

目的是运用ref属性点击按钮更改input中的文字

var app = new Vue({ 
    el: '#app',
    data: {
    },
    //添加一个方法
     methods:{
  //改变文字
  	changeText () {
  		this.$refs.text.value = 'Hello Vue!'
  	}
  }
});

åœ¨è¿™é‡Œæ’å
¥å›¾ç‰‡æè¿°

slot

这是一个子组件，我们使用了默认插槽(匿名插槽)，父组件的内容将会代替显示出来

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'children'
}
</script>

// 使用children组件
 <children>代替slot的内容</children>

渲染后的结果

<template>
  <div>
    代替slot的内容
  </div>
</template>

注意:一个不带 name 的出口会带有隐含的名字“default”。

如下面一个组件,需要多个插槽。如何向组件提供内容呢？

<template>
  <div>
    <header>
      <slot name="header"></slot>
      <slot></slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

在向具名插槽提供内容的时候，我们可以在一个元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称:

<!-- old -->
<children>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>
  <template slot="default">
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>
</children>

<!-- new -->
<children>
  <template v-slot:header>
  <!--  <template #header> 具名插槽可缩写形式 -->
    <h1>Here might be a page title</h1>
  </template>
  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>
</children>

this.$router

关于 this.$router.push、replace、go的区别

this.$router.push：跳转到指定url路径，并在history栈中添加一个记录，点击后退会返回到上一个页面。

this.$router.replace：跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面。

this.$router.go(n)：向前或者向后跳转n个页面，n可为正整数或负整数。
如果n为0的话，将刷新当前页面。

vue中的this. $ro u t e 和 t hi s .$ router

其实 $router是我们创建的vue-router实例对象，包含我们创建的所有路由信息。

this.$route表示当前页面路由相关信息

可以理解为：

this. $ro u t er 相当于一个全局的路由对象，包含路由相关的属性、对象 (如 hi s t ory 对象) 和方法，在任何页面都可以通过 t hi s .$ router 调用其方法如 push() 、go() 、resolve() 等。
this.$route 表示当前的路由对象。每一个路由都有一个 route 对象，它是一个局部的对象，可以获取当前路由对应的 name , params, path , query 等属性。

this.$route.path：当前路径

this.$message

是弹窗信息

HTML
在这里插入图片描述
JavaScript

效果图

this和that的区别和原理

this指的是当前的对象。 that是一个临时的变量，用于保存当前对象的this状态。（that可以随便取名）

示例：

Page({
  data: {
  },
  onLoad:function(){
    var that = this;
    this.a = 1;
    console.log(this.a)
    setTimeout(function () {
      console.log(this.a)
      console.log(that.a)
    }, 1000)
  }
})

打印结果是：

原理说明：（有3个log，我简称log1,log2,log3）

log1打印1，这里this指的是onLoad函数对象的a的值.

log2打印结果是undefined ，这里this指的是setTimeout里面的匿名函数对象，它是没有a的。

log3打印出1，这里that代表的是onLoad函数对象的a的值。

在vue项目中import引入外部文件什么时候用花括号什么时候不用

1、当你默认导出一个变量或者方法等的时候，也就是你在模块A中，export default a ，那么你导入时，始终不需要花括号，即：

// 模块 A 中
const a = 12;
export default a

// 模块 B 中
import a from '.A' // 这边的 a 以重命名，不影响使用，所以可以这么写
import every from './A'

2、但是如果你没有默认导出，而是通过 export const a 这种方式的话，导出是需要拿到模块中具体变量的，因此你需要通过解构这种方式来拿到模块中具体的变量。即：

// 模块 B 中
import {a} from './A'  // 这时的 a 是 解构出的具体变量，因此不可以直接起别名，通过下面这种方式重命名
import {a as another} from './A' // 这个时候在模块B中可以用 another 来使用A中定义的模块和方法

.sync

1 子组件改变父组件中的变量值

1.1 不使用sync

我们知道，vue中父组件是使用v-bind(缩写为:)给子组件传入参数，然后子组件通过prop属性接收该参数。此时我们可以给子组件传入一个函数，子组件通过调用传入的函数来改变父组件中参数的值。

在这里插入图片描述

即主要部分如下所示

<!-- 父组件给子组件传入一个setNum函数 -->
<child :num="numParent" @setNum="(res)=> numParent = res"></child>

//子组件通过调用这个函数来实现修改父组件的状态
methods: {
    changNum(){
      this.$emit('setNum',666)
}

此时子组件只需要出发changNum函数就能执行父组件中的setNum函数从而改变父组件中numParent的值

1.2 使用sync

上述方法较复杂，使用sync可简化写法

<!-- 父组件给子组件传入一个setNum函数 -->
<child :num.sync="numParent">

//子组件通过调用这个函数来实现修改父组件的状态
methods: {
    changNum(){
      this.$emit('update:num',666)
}

上述两种方式都可以将numParent的值由222变为666，其中父组件中绑定的参数后面加了一个.sync，子组件中的事件名称被换成了update:age，如下：

update：固定部分，vue约定俗成的，注意必须添加update：的前缀才能正确触发事件
num是要修改的参数的名称，是我们手动配置的，与传入的参数名字对应起来

2 实现父子组件双向绑定

vue考虑到组件的可维护性，是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信（通过1.1方式），通过这种间接的方式改变父组件的data，从而实现子组件改变props的值。

那么同时，vue中也提供了一种解决方案.sync修饰符（1.2方式）
在这里插入图片描述

在这里插入图片描述

时间进行加天数

this.kaiShiShiJian = ‘2022-12-26’
var today = new Date(this.kaiShiShiJian)
var targetday = today.getTime() + 86400000 * q //q是天数
today.setTime(targetday)
let str2 = moment(today).format('YYYY-MM-DD') //转换格式

F,t_70)

在这里插入图片描述

时间进行加天数

this.kaiShiShiJian = ‘2022-12-26’
var today = new Date(this.kaiShiShiJian)
var targetday = today.getTime() + 86400000 * q //q是天数
today.setTime(targetday)
let str2 = moment(today).format('YYYY-MM-DD') //转换格式

获取日期相差天数

//获取相差的周数
time = new Date(time)
let timeIndex = time.getDay()
let today = new Date()
let weekDayIndex = today.getDay()
//为了精确到年月日就行了
time = new Date(time.getFullYear(), time.getMonth(), time.getDate());
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
today.setTime(today-86400000 * weekDayIndex)
time.setTime(time-86400000 * timeIndex)
let weekNum = (time-today)/86400000/7

防止双向绑定

//防止双向绑定
this.colConfig1 = JSON.parse(JSON.stringify(colConfig2))

前端List操作

slice(start?: number, end?: number): T[];

list中下标取start到end的，不包含end，不会改变原本的list

shift(): T | undefined;

拿出list中第一个数据，改变原本的list

splice(start: number, deleteCount?: number): T[];

list中下标取start到end的，包含end，会改变原本的list

深度作用选择器

.Time >>> .ant-card-body {
  padding: 10px !important;
}
::v-deep .ant-card-bordered {
  margin: 5px auto;
}
/

**默认只会对组件的最外层（div）加入这个 [data-v-xxxx] 属性，但第二层开始就没有效果了。**如图所示：第一层还有 data-v-17bb9a05, 但第二层的 .weui-cells 就没有了。

判断对象是否为空

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组。通过数组中属性的个数判断是否为空对象。

const empty = {};

Object.keys(empty).length === 0 && empty.constructor === Object;

而且需要判断对象的constructor属性是否等于Object，因为JS有很多的内置对象，不仅仅只有Object，还有Number和Boolean等等。

function badEmptyCheck(value) {
  return Object.keys(value).length === 0;
}
// 不准确
badEmptyCheck(new Number());    // true 😱
badEmptyCheck(new Boolean());   // true 😱

Object.keys()、Object.values()、Object.entries()的用法

一、Object.keys(obj)

参数：要返回其枚举自身属性的对象
返回值：一个表示给定对象的所有可枚举属性的字符串数组

处理对象，返回可枚举的属性数组
处理数组，返回索引值数组
处理字符串，返回索引值数组
常用技巧

二、Object.values()

返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值
返回数组的成员顺序，与属性的遍历部分介绍的排列规则一致
Object.values()只会遍历对象自身的可遍历属性

三、Object.entries()

Object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组

循环导入（两个组件相互导入）

使用异步组件加载可解决

DingCangDanModal: () => import("../DingCangDan/modules/DingCangDanModal") ,// 使用异步组件加载

屋顶会着火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue使用

自用记录的vue使用
复制链接

扫一扫

vue使用

router-link

< keep-alive>标签

父子组件传值

v-model

slice的使用

ref

slot

this.$router

vue中的this. r o u t e 和 t h i s . route和this. route和this.router

this.$message

this和that的区别和原理

在vue项目中import引入外部文件什么时候用花括号什么时候不用

.sync

1 子组件改变父组件中的变量值

1.1 不使用sync

1.2 使用sync

2 实现父子组件双向绑定

时间进行加天数

时间进行加天数

获取日期相差天数

防止双向绑定

前端List操作

深度作用选择器

判断对象是否为空

Object.keys()、Object.values()、Object.entries()的用法

循环导入（两个组件相互导入）

vue中的this. $ro u t e 和 t hi s .$ router