技术分享博客

子组件中通过computed计算属性监测到值变化后，向父组件发送消息并更改父组件值

const value: any = computed({
      get: () => props.content,
      set: (val) => context.emit('update:content', val)
});

上传背景图片并拖拽调整图片，找到适合部分然后裁剪作为个人用户头像背景图。

    // 拖拽图片
    function onmousedown(ev: any) {
      ev.preventDefault()
      let oevent = ev || event
      let distanceX = oevent.clientX //鼠标点击位置
      let distanceY = oevent.clientY //鼠标点击位置
      //dX和dY是鼠标在pic内的相对位置
      //在移动后，设置图片的外边距，利用负外边距移动图片
      ...

1、声明页数和页码

let page=1 let size=10 let dataList []

2、通过数组slice方法截取

dataList.slict((page-1)*size, (page-1)*size size)

起始位置：(page-1)*size

终止位置： (page-1)*size size)

根据数组索引位置截取来实现翻页效果

当page=1截取的位置是0到9

当page=2截取的位置是10到19

当page=3截取的位置是20到29

v-show指令是操作css样式display属性，用来控制DOM元素显示和隐藏。

v-if指令是对页面上DOM节点的添加与删除

从效果上来看是一样，都是设置DOM元素的展示隐藏。但是它们的性质是不一样，一个是设置display属性值，一个是操作DOM元素添加和删除。它们之间可以同时使用是没有冲突。

<!-- v-if指令 -->
<div v-if="status"></div>

<!-- v-if指令 -->
<div v-show="show"></div>

<!-- v-if和v-show指令 -->
<div v-if="status" v-show="show"></div>

1、提示：指令v-if和v-for不能用在同一个标签上，否则性能会消耗很大。

2、原因：如果写在同一标签，会先对所有数据进行以下操作，就是一边循环一边执行v-if，循环中多次对 DOM 元素进行添加或删除，这样会造成大量的性能消耗

3、优先级：v-for 优先级 高于v-if

  <div v-for="(item, index) in dataList" :key="index">
    <div v-if="item.status">
      {{item.name}}
    </div>
  </div>

4、解决办法

1.不要把v-for和v-if 写在同一个标签上，而是新建div引入v-for包裹v-if

2.使用v-show代替v-if

在 Vue 中，data 选项在组件中通常被定义为一个函数，而不是一个对象。主要是因为组件被多次引用，每个组件实例都需要有自己独立的数据状态。

如果你将 data 定义为一个对象，那么所有的组件实例将共享同一个对象引用，这会导致它们之间的数据状态相互干扰。

通过将 data 定义为一个函数，Vue 可以确保每次创建新的组件实例时都会调用这个函数，从而返回一个新的数据对象。这样，每个组件实例都会有自己独立的数据状态

v-model原理：

原生 input 元素若是text/textarea类型，使用 value 属性和 input 事件。

原生 input 元素若是radio/checkbox类型，使用 checked属性和 change 事件。

原生 select 元素，使用 value 属性和 change 事件。

input 元素上使用 v-model 等价于

<input :value="message" @input="message = $event.target.value" />

内置组件router-link不生效的原因：router-link会阻止click事件，为决绝这一问题我们在事件绑定上加个native事件修饰符如：

使用@click.native。

.native指直接监听一个原生事件。

表单修饰符

lazy: 失去焦点后同步信息

trim: 自动过滤首尾空格

number: 输入值转为数值类型

事件修饰符

stop：阻止冒泡

prevent：阻止默认行为

self：仅绑定元素自身触发

once：只触发一次

鼠标按钮修饰符

left：鼠标左键

right：鼠标右键

middle：鼠标中间键

vue组件中class 和 style 可以通过对象语法和数组语法进行动态绑定

对象写法

<template>
<div :class="{ active: isActive }"></div>
<div :style="{ fontSize: fontSize }">
</template>
<script>
export default {
data() {
  return {
    isActive: true,
    fontSize: 30
  }
}
}

数组写法

<template>
<div :class="[activeClass]"></div>
<div :style="[styleFontSize]">
</template>
<script>
export default {
data() {
  return {
    activeClass: 'active',
    styleFontSize: {
      fontSize: '12px'
    }
  }
}
}
</script>