vue学习

Vue学习笔记

1.指令

v-bind：属性名=变量名
例子：

我有属性值

## 2.事件（输入绑定和点击） 点击就是v-on是@,绑定是select，input,textarea，

3.路由

path页面路径
name页面名称
component当前路由对应的组件
《router-link to=”/“》home《router-link》
《router-link to=”/about“》about《router-link》
router-link 相当于a标签，to相当于页面地址
《router-view /》展示路由对应组件的内容,是局部变动，并不是整个页面刷新

4.vuex记录状态

4.1vuex,存储状态，用户信息，num等
通过import{createStore}from "vuex"引入store,createStore有5个方法
state（存储状态）,getters（获取状态）,mutations(改变状态的唯一方法).actions（异步操作）,mudules（分模块）
4.2路由守卫

存在问题，在登录页面条填完用户名密码后，跳到后台首页，但是刷新之后就又跳到登录页面了，这是因为刷新页面会初始化，store的state就会为空，
解决：应该用localStorage将用户名及密码存储起来(setItem)，
然后再在store的state里获取，如图
这样进入该页面，进行刷新就不会跳出了
那么对应的，退出就要清除localStorage的数据，还要清除store里的数据，然后路由到login页面

其实登录和退出是对应的，登录就1.store提交2.把用户名及页面存储到 localStorage，3.然后路由跳转到user页面

5.封装axios

普通使用ajax，在vue中是使用axios，

6.解决length为定义的报错

(1)报错：不能读取未定义的length

(2)解决方案：加一个v-if判断即可参考地址

<div class="otherCommentNav">
                <span v-if="item.commentList">{{item.commentList.length+'条评论'}}</span>
                <span :style="{ float: 'right', 'margin-right': '50px' }">    
                  <input type="button" value="默认" />
                  <input type="button" value="最新" />
                </span>
              </div>

7.防抖节流

防抖：指定时间内 频繁触发一个事件，以最后一次触发为准
节流：指定时间内 频繁触发一个事件，只会触发一次

应用场景有很多比如:
防抖是： input搜索，用户在不断输入内容的时候，用防抖来减少请求的次数并且节约请求资源
节流：场景普遍就是按钮点击，一秒点击 10 下会发起 10 次请求，节流以后 1 秒点再多次，都只会触发一次

    // 防抖
    // fn 需要防抖的函数，delay 为定时器时间
    function debounce(fn,delay){
        let timer =  null  // 用于保存定时器
        return function () { 
            // 如果timer存在 就清除定时器，重新计时
            if(timer){
                clearTimeout(timeout);
            }
            //设置定时器，规定时间后执行真实要执行的函数
            timeout = setTimeout(() => {
               fn.apply(this);
            }, delay);
        }
    }
    
    // 节流
    function throttle(fn) {
      let timer = null; // 首先设定一个变量，没有执行定时器时,默认为 null
      return function () {
        if (timer) return; // 当定时器没有执行的时候timer永远是false,后面无需执行
        timer = setTimeout(() => {
          fn.apply(this, arguments);
           // 最后在setTimeout执行完毕后再把标记设置为true(关键)
           // 表示可以执行下一次循环了。
          timer = null;
        }, 1000);
      };
    }

8.splice slice

slice左开右闭
splice截取指定数量的字符，第二个参数代表截取的数量

9.http缓存

Web缓存中的浏览器缓存及http缓存

10.好看的tag颜色

 <a-tag v-if="index=0" color="magenta">{{param}}</a-tag>
        <a-tag v-else-if="index=1" color="volcano">{{param}}</a-tag>
        <a-tag v-else-if="index=2" color="orange">{{param}}</a-tag>
        <a-tag v-else-if="index=3" color="gold">{{param}}</a-tag>
        <a-tag v-else-if="index=4" color="lime">{{param}}</a-tag>
        <a-tag v-else-if="index=5" color="blue">{{param}}</a-tag>
        <a-tag v-else-if="index=6" color="green">{{param}}</a-tag>
        <a-tag v-else-if="index=7" color="cyan">{{param}}</a-tag>
        <a-tag v-else-if="index=8" color="geekblue">{{param}}</a-tag>
        <a-tag v-else-if="index=9" color="purple">{{param}}</a-tag>

11. 标签中使用三元运算符

 <a-tab-pane key="1" >
         <span slot="tab" >
        等待审核
        <a-tag :color="`${activeKey==1?'blue':''}`">
        13
      </a-tag>
      </span>
        新句型等待审核, 由审核员审核相关信息, 新句型审核通过后才能进入到【等待启用】列表
     </a-tab-pane>   

12 页面中template模板中使用三元运算度

<p style="color:blue;font-weight:bold">句型：</p>
      <p>{{ description==null? '无': description}}</p>
      <p style="color:blue;font-weight:bold">固件：</p>
      <p>{{ unitText==null?'无':unitText }}</p>
      <p style="color:blue;font-weight:bold">句型描述及固件执行过程：</p>
      <p>{{ sentenceDescription==null?'无':sentenceDescription }}</p>

13怎样修改modal弹窗的宽度

14一次搜索实现与关键字相关的内容，不用根据编辑者，等其他分类标准搜索，并且鼠标回退显示原页面，及内容根据用户输入实时变化`

template页面
主要是用了@input，监听输入的变化

<div style="display:flex;justify-content: center;align-items: center;">
        
         <a-input-search 
      placeholder="input search text" 
      style="width: 400px;boder-raduis:10px;"
      v-model="userInputKeyword"
      @input="handleInput"
       @search="onSentenceSearch" />
      </div>
     

js代码

 handleInput(){
    // 防抖
    let timer = setTimeout(() => {
      this.onSentenceSearch(this.userInputKeyword)
      clearTimeout(timer);
    }, 500);
   },
   onSentenceSearch(userInputKeyword){
    console.log("用户输入的关键字为:",userInputKeyword)
    console.log("当前所处页面键为:",this.activeKey)
    /*根据用户输入的关键字搜索句型， */
    if(userInputKeyword.trim()==""){
      this.handleSentenceNameChange(this.activeKey)
      return;
    }

    sentenceService.getAllSentencesByuserInputKeyword(
      {userInputKeyword},
      {
        onSuccess: (model, fModel, json) => {
           console.log("切换tab,进入界面");
           this.sentenceData=json.data.rows.sentence
         .filter((item)=>{return item.name==this.activeKey})
          console.log(this.sentenceData);
    },onFail: (msg, json) => {
          console.log(msg, json);
        },
      }
    )
    

   },

15.vue中修复substring错误，

Vue–修复报错 Error in render: “TypeError: Cannot read properties of null (reading ‘substring‘)“
修复substring错误，使用该方法时 ，需要先判断截取的字符串对象是否存在
报错的代码如下

<div class="content">
	<p class="title fs-30">{{item.title}}</p>
    <p class="time fs-18">{{item.createTime.substring(0,10)}}</p>
</div>

这里使用到substring的时候是在读取对象中的createTime属性。
根据上面的报错提示，大概意思就是模板在渲染读取某个对象的属性值的时候，这个对象不存在，也就是说我在使用substring的时候还没有拿到值。
解决：

<div class="content">
	<p class="title fs-30">{{item.title}}</p>
    <p class="time fs-18" v-if="item.sreateTime">{{item.createTime.substring(0,10)}}</p>
</div>

在使用substring之前先进行一个if判断，能取到值就截取，没有取到值就不加载。
注：这里不能使用v-show，v-show的机制是加载之后，根据条件判断是否进行显示

16 vue中判断语句不要在写成赋值语句啦

注意要是双等号（代表判断），单等号是赋值
不要在写成text = '1’了（单等号）
要 写成 text == ‘1’（双等号）

<span slot="statu" slot-scope="text, record">
        <a-tag v-if="(text == '1')" color="purple">审核中</a-tag>
        <a-tag v-else-if="(text == '2')" color="green">未审核</a-tag>
        <a-tag v-else-if="(text == '3')" color="orange">已启用</a-tag>
        <a-tag v-else color="#f50">禁用</a-tag>
      </span>

17vue中的样式，连接上加上小手提示，用cursor:pointer

 span{
      margin-left: 60px;
      font-weight: bold;
      cursor:pointer;
    }

18.dependencies与devDependencies的区别

(1)dependencies：项目依赖。在编码阶段和呈现页面阶段都需要的，也就是说，项目依赖即在开发环境中，又在生产环境中。如js框架vue、页面路由vue-router，各种ui框架antd、element-ui、vant等。
(2)devDependencies: 开发依赖。仅仅在写代码过程中需要使用，比如css预处理器、vue-cli脚手架、eslint之类。
后面部分为–save -dev 的情况会使得下载的插件放在package.json文件的devDpendencies对象里面
后面部分为–save的情况会使得下载的插件放在package.json文件的dependencies对象里面
区别
(1)devDependencies下的依赖包，只是我们在本地或开发坏境下运行代码所依赖的，若发到线上，其实就不需要devDependencies下的所有依赖包；(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；
(2)dependencies是我们线上(生产坏境)下所要依赖的包，比如vue，我们线上时必须要使用的，所以要放在dependencies下；dependencies依赖的包不仅开发环境能使用，生产环境也能使用

19 vue中换行

使用了antd中的table组件，要想换行则需要两个步骤，（1）在table里写入样式style="white-space: pre-wrap;"（2）加入\n换行

 <a-table
            :columns="columns"
            :data-source="data"
            bordered
            :rowKey="
              (index, record) => {
                return index;
              }
            "
            style="width: 100%;white-space: pre-wrap;" 
          >

 {
          onSuccess: (model, fModel, json) => {
            console.log(json);
            this.data = json.data.rows;
           
            this.data.forEach((item) => {
               let analyseText = "";
               let draftText = "";
              item.analyseList.forEach((analyse) => {
                analyseText += analyse.content + "\n";
                item.analyseList = analyseText; 
              });
              item.draftChapterList.forEach((draft) => {
                draftText += draft.content + "\n";
                item.draftChapterList = draftText; 
              });
              console.log("analyseText:", analyseText);
              console.log("draftText:", draftText);
              
              
            });
            console.log("----------------", this.data);
          },

20 事件委托

<ul>
    <li>第一个子节点</li>
    <li>第二个子节点</li>
    <li>第三个子节点</li>
    <li>第四个子节点</li>
    <li>第五个子节点</li>
</ul>

var ul1=document.querySelector('ul');
ul1.addEventListener('click',function(e){
    console.log(e)
    console.log(e.target)  //e.target代表真正点击到的元素
    console.log(e.currentTarget) //代表事件绑定的对象，绑定在谁身上就是谁，这里是ul
    e.target.style.backgroundColor='pink';   //设置事件对象的样式
})

21.antd组件中white-space:pre-warp的作用

间距太大了

去掉white-space: pre-wrap，就整体变得好看了，每行的间距没有那么大了

22vue-show可以与v-for形结合

v-for渲染每一项，但是又要对每一项是否显示做控制，依据每一项的某个字段是否为真

 <a-collapse slot="analyseChapterList" slot-scope="text, record">
              <a-collapse-panel
                v-for="(item, index) in record.analyseList"
                :key="index"
                :header="item.content"
                v-show="item.content!=null"
                :style="
                  currentIndex === record.draft.id + '#' + item.draftChapterId
                    ? draftChapterListStyle
                    : null
                "
              >

23 vue3.0搭建过程

1.veu3版本搭建过程
2.vue3.0学习
3.安装sass-loader的版本冲突问题
4.eslint语法报错
参考连接1
关闭方式，
（1）在package.json或者esintrc.js里配置rules为

'no-unused-vars':process.env.NODE_ENV === 'production' ? 'warn':'off'

（2）新建vue.config.js加入这句代码

module.exports = {
    // 关闭eslint
    lintOnSave: false
}

5.element-plus中找不到css样式表，是因为路径错了
在vue3+vue-cil4.5+node14中安装element-plus
按往常的导入模块的方式

import 'element-plus/lib/theme-chalk/index.css';

Failed to compile with 1 error                                                                                                            上午11:16:33

This dependency was not found:

* element-plus/lib/theme-chalk/index.css in ./src/main.js

To install it, you can run: npm install --save element-plus/lib/theme-chalk/index.css

解决办法：既然自己已经安装了element-plus依赖，却找不到文件，大概率是路径变了。于是手动翻了下node-modules，发现果然整个theme-chalk文件夹都被挪了位置。

import 'element-plus/theme-chalk/index.css'

6.vue2.0hevue3.0中provide/inject的使用方式
参考地址
7.注意vue3.0里的computed方法里面是()=>()

setup(props){
        const blockStyles=computed(()=>({
            top:`${props.block.top}px`,
            left:`${props.block.left}px`,
            zIndex:`${props.block.zIndex}`
        }));