Vue

1、index.html中不能引入src目录下的文件，否则即使不报错，样式也会无效。因为src里的文件会用webpack打包！
2、defineComponent有什么用？？？
3、elementUI里面Avatar不能显示本地图片
要加require :src="require('../assets/img/user.png')
变成ref就不行了怎么办

    const userUrl = ref("../assets/img/user.png");

<el-avatar :fit="fit" :src="require(userUrl)"></el-avatar>

require 里面不能写变量哦，ref响应式的数据估计不行，我是这样觉得的
require参考
import和require加载模块要学习

CommonJS加载模块就是用我们熟悉的require加载模块。它的主要原理是先运行一遍要加载的模块，将输出的对象缓存到内存里，然后通过复制的方法加载到引用它的模块中。
而在ES6的规范中，定义了一种了ES6的模块，通过import/export的方式控制模块的引用和输出。
module.exports和exports的区别，我记得coderwhy老师说好像就是

exports=module.exports

4、font-weigth为什么到600才有变化
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal，700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细，而且至少与下一个最大数字一样粗
该属性是否有效由客户端系统安装的字体的特定字体变量映射决定，系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异（举个例子，有些字体可能没有设计所有的字重）
5、ElementUI里面Icon直接用font-size设置大小
6、 Getting a value from the props in root scope of setup() will cause the value to lose reactivity vue/no-setup-props-destructure

 props: {
    lableName: String,
    placeName: String,
  },
  setup(props) {
    const { lableName, placeName } = props;

    return {
      lableName,
      placeName,
    };
  },

setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。由于是响应式的， 所以不可以使用 ES6 解构，解构会消除它的响应式。错误代码示范：
`
vue3.x更新整理
7、出现这样的错误

   <my-input :lableName="所属单位" :placeName="单位关键字" />

加一对单引号就行

   <my-input :lableName="'所属单位'" :placeName="'单位关键字'" />

8、在属性中传递参数出错
我以为传导模板中加{{}}就行，但是placeholder地方没反应

  <div class="input-lable">{{ lableName }}{{ placeName }}：</div>
    <div class="my-input-box">
      <el-input v-model="input" placeholder="{{ placeName }}"></el-input>

胡子表达式 插值表达式{{}}用在标签之间
设置标签属性的话 属性要加v-bind绑定
基础不牢地动山摇

    <el-input v-model="input" :placeholder="placeName"></el-input>

9、ElementUI里面table里的width百分比没反应怎么办哦
min-width="20%” 全设了这个，肯定超过200%，所以自适应了吧？？？
10、我就编吧，想要在标签里面直接写内容innerText什么的，后来发现v-text完全不用忘了，以及直接写也能行

  <el-button
          type="text"
          size="small"
          v-for="(item, index) in tableOption"
          :key="index"
          v-text="item"
        ></el-button>
        //或者
        <el-button
          type="text"
          size="small"
          v-for="(item, index) in tableOption"
          :key="index"
        >{{item}}</el-button>

11、想要子传父emit被警告失败了
Extraneous non-emits event listeners (optionclick) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.
解决方法，需要在emits中定义抛出的事件名

 name: "Form",
  props: {
    tableTitle: Array,
    tableData: Array,
    tableOption: Array,
  },
  emits: ["optionclick"],
  setup() {

人傻了，setup里面直接用this，还找不到错，我是疯了吗
setup（props，context）
setup(props,{attrs, emit, slots}})
12、es6对象字面量简写

let type = 'candy';
let weight = '5';
let price = '8';

const goods = {
  type: type,
  weight: weight,
  price: price
}

let type = 'candy';
let weight = '5';
let price = '8';

const goods = {
  type,
  weight,
  price,
  total: function(){
     // calculate 
  }
}

匿名函数被分配给了total属性，在ES6中function关键字可以省略：

const goods = {
  type,
  weight,
  price,
  total(){...}
}

13、需要一个横向时间线组件，组件库现成的时间线是纵向的，完蛋
发现步骤条长得也差不了多少，还能横向和纵向，用它！
但是步骤条要改下icon，只用最简单的小圆就行，icon没有，哦豁，所以打算自己封装一个
开始：
人家写的

<el-button class="default" icon="el-icon-my-export">导出</el-button>

//使用图片来替换
//before属性中的content文本是用来占位的,必须有
//可以设置字体大小来确定大小
//使用visibility: hidden;来隐藏文字
.el-icon-my-export{
    background: url(/officeHouse/resources/images/export.png) center no-repeat;
    background-size: cover;
}
.el-icon-my-export:before{
    content: "替";
    font-size: 16px;
    visibility: hidden;
}

//如果直接使用字体图片
//直接在before属性设置对应的content就行
.el-icon-my-export{
    font-size: 16px;
}
.el-icon-my-export:before{
    content: "\e611";
}

我编的

 <el-step
        icon="my-blue-ball"
        title="步骤1"
        description="这是一段很长很长很长的描述性文字"
      ></el-step>

.my-blue-ball {
  width: 10px;
  height: 10px;
  border: 1px solid blue;
  background: blue;
}

/* before属性中的content文本是用来占位的,必须有
:before是css中的一种伪元素，可用于在某个元素之前插入某些内容
可以设置字体大小来确定大小
使用visibility: hidden;来隐藏文字 */
.my-blue-ball:before {
  content: "替";
  font-size: 8px;
  visibility: hidden;
}在这里插入代码片

完球

找到elementUI源码看看

<template>
  <i :class="`el-icon-${name}`"></i>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ElIcon',
  props: {
    name: {
      type: String,
      default: '',
    },
  },
})
</script>

算了
这篇可以

14、elementUI的description怎么用模板字符串？？？？


用插槽来写

<el-step
        v-for="(item, index) in showlineinfo"
        :key="index"
        icon="icon-yuandian"
        :title="item.pointName"
      >
        <template v-slot:description>
          <div class="my-des">
            {{ item.operator }}
          </div>
          <div>{{ item.operatDate }}</div>
          <div>{{ item.operatTime }}</div>
        </template>
      </el-step>

如果要改颜色，注意要全局 样式不加scoped

<style>
#step-line {
  width: 100%;
  height: 100%;
  padding-top: 5%;
  background-color: pink;
}
.el-step__description.is-finish {
  color: #989898 !important;
}
</style>

15、v-for v-if
添加链接描述
添加链接描述
16、elementUI组件 step 可以插入插槽

 <el-step
        v-for="(item, index) in showlineinfo"
        :key="index"
        icon="icon-yuandian"
        :title="item.pointName"
        :description="`${item.operator} ${item.operatDate} ${item.operatTime}`"
      >
        <template v-slot:description>
          <div v-if="index + 1 == curpoint">ok</div>
        </template>
      </el-step>

17、今天也遇到很多问题，不过至少时间线组件封装完了，今天先做完才记录问题
哈！

1. 怎么画三角形
   开始看这个三角形 就是不设宽高，直接用边填充
   但是问题是我的边的里面填充不一样的颜色，不行了
   第二种是两个正方形，一上一下，上面旋转45度，下面 overflow: hidden，然后自己设为透明，好像也不是不行
   但是！我直接一个正方形旋转被盖到弹框的底下就行嘛！
   旋转
   rotate之前要订旋转中心，默认就是中心

transform-origin: center,center;
transform: rotate(45deg);

层次问题

图形层次问题，用z-index来，但是 首先将position定义为，absolute、relative或fixed。
【必须position为以上三个属性，z-index才能层级体现出来，才能起作用】 设置 style 中 z-index:auto
auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:9999。 若定义为-1，代表为最底层。
如果要让div1不被div2遮挡，则将div1的z-index设置比div2大就可以了。

2. elementUI组件时间线修改问题
   首先是我自定义的图标（阿里 iconfont）
   中间空的，好丑
   找到那个盒子设置为透明ok，盒子有颜色，压住实线了，透明就行

.el-step__icon {
  background: transparent;
}

iconfont图标大小设置
iconfont.css里面

另外，iconfont不太理解怎么用，每次行了就不深究，不信不行
elementUI的step线条颜色完成也没个特别的，打开只有.el-step__line一个类，怎么办

我是傻子吗，加它爸爸不就行了

.el-step__head.is-finish .el-step__line {
  background-color: #409eff;
}

还有一个就是因为是组件封装，所以节点的量不一样，如果宽高都是百分比，不用数量节点会打乱样式，之后看到elementUI里面都用px，我也用，样式就固定了。
但是，后来才看到，这次项目时间线都是四个节点，哦豁~~

18、今早上帮同学运行个代码，发现Vue和vue-template-compiler版本不一致问题，要一致才能运行
添加链接描述
19、window里面有什么东西，我完全不熟悉
添加链接描述
20、组件最好不要用百分号，因为每个引用都有自己的宽高，不适用，用px好点
21、style内联样式突然不会写了
添加链接描述

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' ,line-height: '50px'}"></div>

22、哈哈flex布局从没记得过
添加链接描述

23、我一下子忘了filter()了

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

24、啊啊啊啊啊我感觉我解决了一个世纪难题==>(只针对与我了)，我开心的来记录了
问题是这样的，在用elementUI里面的table组件的时候，根据某个属性的不同，要涉及不同的操作，比如

然后因为我实在封装组件，所以我的操作选项是用数组传进去的

  tableOption: ref([["查看"], ["编辑", "删除", "发布"]]),

如果是单一的

  tableOption: ref(["编辑", "删除", "发布"]),

循环一次也就完了

     // tableOption: ref(["编辑", "删除", "发布"]),
        <el-table-column label="操作" min-width="20%">
              <el-button
                v-for="(item, index) in tableOption"
                :key="index"
                type="text"
                size="small"
                v-text="item"
                @click="handleClickOption(item)"
              ></el-button>
        </el-table-column>

因为是封装组件，所以也不能在组件里面直接判断特定的相关属性，怎么办哦，props呗

    let tableIndex = ref([]);
    for (let i = 0; i < tableData.value.length; i++) {
      if (tableData.value[i].isrelease == "是") tableIndex.value.push(true);
      else tableIndex.value.push(false);
    }

搞了个数组记录一下选0还是选一，然后作为组件的传参
然后在组件里面想着用v-if判断就行了，那到底v-if要加在哪里？
也就相当于双层循环,常规写法

for(let i=0;i<tableIndex.length;i++){
if(tableIndex[i])
	for(let j=0;j<tableOption[1].length;j++)
else 
	for(let j=0;j<tableOption[0].length;j++)
}

那变成这样

 <el-table-column
          v-for="(uitem, uindex) in tableIndex"
          :key="uindex"
          label="操作"
          min-width="20%"
        >
          <el-button
            v-if="uitem"
            v-for="(item, index) in tableOption[1]"
            :key="index"
            type="text"
            size="small"
            v-text="item"
            @click="handleClickOption(item)"
          ></el-button>
          <el-button
            v-else
            v-for="(item, index) in tableOption[0]"
            :key="index"
            type="text"
            size="small"
            v-text="item"
            @click="handleClickOption(item)"
          ></el-button>
        </el-table-column>

可恶，不是包的好好的

原来是这样

当v-for 和 v-if在同一级使用时，系统会报错This ‘v-if’ should be moved to the wrapper element，因为当它们处于同一节点，v-for的优先级比v-if更高。这种情况时，for循环还是会走下去。

添加链接描述 必看
好嘛，我把v-if拉出来嘛，准备用div了，突然

其实还挺蒙，template只是在vue的最外层用作渲染模板，这次知道了，页面渲染不成节点
又一搜添加链接描述

html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。

1、template标签在vue实例绑定的元素内部

vue：它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上，但是查看后台dom结构存在template标签。

啥意思，没看懂第二条，看作者举例，就是template里包的显示，但没有template，加id的页面不显示，但是dom结构中存在，？？？更晕了，为什么第二种会这样

<div id="app">
    <!--此处的template标签中的内容显示并且在dom中不存在template标签-->
    <template>
        <div>我是template</div>
        <div>我是template</div>
    </template>
</div>
<!--此处的template标签中的内容在页面中不显示，但是在dom结构存在该标签及内部结构-->
<template id="tem">
    <div id="div1">我是template</div>
    <div>我是template</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
    });
</script>

注意：
vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。

<div id="app">
    <template v-if="true">
    <!--此时template标签中的内容显示在页面上，但是看dom结构没有template标签-->
        <div>我是template</div>
        <div>我是template</div>
    </template>
    <div v-if="true">
    <!--此时页面上显示div标签中的内容，并且看dom结构存在最外面的div标签-->
        <div>我是template</div>
        <div>我是template</div>
    </div>
    <!--此处会输出6个‘我是template’并且dom结构中不存在template标签-->
    <template v-for="a in 3">
        <div>我是template</div>
        <div>我是template</div>
    </template>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
    });
</script>

是不是有属性设置，或者有需求设置就能显示，但dom里面没有标签

2、vue实例中的template属性

将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。
特点：
1）如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素）；
2）template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；
3）在该属性对应的属性值中可以使用vue实例data、methods中定义的数据。

其实还没懂，我先把问题解决再说
然后我把v-if 拉出来放template里

 <el-table-column
          v-for="(uitem, uindex) in tableIndex"
          :key="uindex"
          label="操作"
          min-width="20%"
        >        
          <template v-if="uitem">
            <el-button
              v-for="(item, index) in tableOption[1]"
              :key="index"
              type="text"
              size="small"
              v-text="item"
              @click="handleClickOption(item)"
            ></el-button>
          </template>
          <template v-else>
 
            <el-button
              v-for="(item, index) in tableOption[0]"
              :key="index"
              type="text"
              size="small"
              v-text="item"
              @click="handleClickOption(item)"
            ></el-button>
          </template>
        </el-table-column>

事与愿违

这是为什么？为什么每一次都把tableIndex全跑一遍？
然后去elemenUi研究一下table的过滤，但是无用，因为过滤是依此列为选择过滤，比如性别列只展示女性，和我这要求有偏差
来了，山穷水复疑无路，插槽必定帮我忙

  <el-table-column
          v-for="(uitem, uindex) in tableIndex"
          :key="uindex"
          label="操作"
          min-width="20%"
        >
     <template #default="scope">
            <template v-if="handleTableOption(scope)">
              <el-button
                v-for="(item, index) in tableOption[1]"
                :key="index"
                type="text"
                size="small"
                v-text="item"
                @click="handleClickOption(item)"
              ></el-button>
            </template>

            <template v-else>
              <el-button
                v-for="(item, index) in tableOption[0]"
                :key="index"
                type="text"
                size="small"
                v-text="item"
                @click="handleClickOption(item)"
              ></el-button>
            </template>

    handleTableOption(scope) {
        // console.log(Event);
        console.log(scope);
        return props.tableIndex[scope.$index];
        // scope.row.isrelease == "是";
      },

看看插槽有啥

看起来标题栏出了四次、第一行和第二行都出了2次
推测一下，标题栏的四次是遍历tableIndex，其他两行都遍历tableOption
四个列，空出四个槽，数据两个，空的忽略，那肯定不对，建立新的列不给数据会是空列，也不会隐藏
第一行和第二行都遍历了两次，tableIndex里有两个数据，也就是先产生两个列头，然后各遍历一次tableOption数据，应该是这样。那为什么表头四行全在最先输出，怎么不是-1 -1 0 0 、 -1 -1 1 1 这样的顺序呢

把上边的遍历删了，也就是只建立一列

  <el-table-column
          label="操作"
          min-width="20%"
        >

好了

插槽和template我完全不会，呵呵。

24、有的东西需要隐藏个列，我直接用的v-show

 <el-table-column v-show="false" label="操作" min-width="20%">

哈哈哈完全不行，换成v-if就行，啊揪心
然后吧，我写了

<el-table-column v-if="isShow()" label="操作" min-width="20%">

 isShow() {
        // console.log(props.tableOption.length);
        return props.tableOption.length !== 0;
      },

出不来，isShow函数进不去，没加括号。。。
不写括号的话要写回调函数

<el-table-column v-if="isShow" label="操作" min-width="20%">

 isShow=()->{
        // console.log(props.tableOption.length);
        return props.tableOption.length !== 0;
      },

25、css有个nth怎么写来着

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

.info-view-content-subtitle span:nth-child(2),
.info-view-content-subtitle span:nth-child(3),
.info-view-content-subtitle span:nth-child(4) {
  padding-left: 10%;
} 

26、有个问题，我要文本框里面展示的文本有格式，一开始****这个东西不管用，都是挤成一坨
之后用v-html解决，文本内分段加

<div class="info-view-content-content" v-html="content"></div>

const content = ref("01建立风险管理文化<br/><br/>风险管理是投资项目的生命")