Vue项目

1、npm install

安装npm包
问题：

1、npm install报错npm ERR Could not resolve dependency: npm ERR peer...

报错原因

在新版本的npm中，默认情况下，npm install遇到冲突的peerDependencies时将失败。

解决办法

使用--force或--legacy-peer-deps可解决这种情况。
--force 会无视冲突，并强制获取远端npm库资源，当有资源冲突时覆盖掉原先的版本。
--legacy-peer-deps：安装时忽略所有peerDependencies，忽视依赖冲突，采用npm版本4到版本6的样式去安装依赖，已有的依赖不会覆盖。
建议用--legacy-peer-deps 比较保险一点

在终端重新安装即可解决
npm install --legacy-peer-deps

2、package.json文件

"scripts": { "dev": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },
dev：鼠标放在上面点击运行脚本，就会启动项目
build：鼠标放在上面点击运行脚本，就会打包
lint：代码检测

"dependencies":
这里面就是依赖的第三方库

3、第三方类库的存放位置

在项目中引入的第三方类库都放在这个文件夹下面：

image.png

4、iView组件库这个要看一下

(1)Vue应用IView中，table中使用Poptip被遮挡显示不全
添加transfer参数
参考：https://blog.csdn.net/qq_40743463/article/details/104894357

5、差值表达式

{{}} 可以在视图中显示data中的数据
（1）其用的数据必须在data中存在
（2）不能使用js语句if for啥的
（3）不能在属性中使用

6、vue指令

vue指令其实就是html标签的特殊属性，一共有14个v-开头的指令
v-这些指令是干啥的，怎么用，用的时候注意什么

• v-bind

用于访问data中的数据，在标签的属性中使用
v-bind:src 可以简写为 :src

• v-model

（1）用于表单元素上，<input> <textarea> < select >，创建数据的双向绑定。
（2）会忽略掉表单元素原本的value
（3）v-model双向绑定实现的原理
用到的技术是数据劫持，ES5中的一个语法：Object.defineProperty，所以vue不支持IE8以下的版本。
给对象的某个属性添加修饰：

let temp = 属性
Object.defineProperty(对象,属性名,{修饰对象
//里面重写set和get方法
get() {
  return temp
},
set(value) {
  temp = value
  input.value = value
}
})

• v-on

作用：用来给元素注册点击事件
语法：v-on:事件名="事件函数"

v-on:click="clickEvent"可以简写为@click="clickEvent"

注意点：
（1）传参数

//事件函数加上()即可，里面传入参数
<button type="button" @click="parameClick(name)">传参数</button>
<script>
    export default {
        data() {
            return {
                name: '你好'
            }
        },
        methods: {
            parameClick(name) {
                console.log(name)
            }
        }
    }
</script>

（2）事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive
其中.stop 和 .prevent是最常用的

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面（即阻止默认事件） -->
<form v-on:submit.prevent="onSubmit"></form>

（3）按键修饰符
在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input @keyup.enter="aClick()" />

• v-show VS v-if

（1）v-show控制元素显示和隐藏，v-show=”bool“，他是通过样式display属性来控制的显示和隐藏
（2）v-if也是控制元素显示和隐藏，但是v-if是销毁和创建，用于一次性的显示隐藏

• v-for

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

注意点
（1）:key是必须的，提高渲染效率
（2）也可以用 v-for 来遍历一个对象的 property。
（3）也可以在 <template> 上使用 v-for
（4）也可以在组件上使用 v-for

7、计算属性

首先来看例子：

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage() {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

（1）计算属性要写到computed中
（2）计算属性写法上是一个函数，但实质上是一个属性，其对应的是函数的返回值
（3）计算属性只会计算一次，结果会缓存起来，高效
（4）计算属性只有依赖的数据发生了变化，才会重新计算
（5）什么时候使用计算属性？需要在插值表达式或者指令中使用复杂的逻辑，都应该使用计算属性
（6）计算属性的setter
计算属性默认只有getter

 computed: {
  total() {
    return this.num1 + this.num2
  }
}

但是当v-model双向绑定的是一个计算属性的话，就需要书写计算属性的完整形态，否则会报错，代码如下：

computed: {
  total: {
    get() {
      return 
    },
    set() {

    }
  }
}

8、监听属性

（1）监听属性写在watch中
（2）作用，监听data中数据的改变
（3）语法简单类型 ：watch:{ msg(newValue, oldValue) {} }
复杂类型：

//这是一个对象
list: {
  handler(value) {
    localStorage.setItem('todos', JSON.stringify(value))
  },
  deep: true,  //深层次监听
  immediate:true  //是否立刻监听
}

9、VUE的生命周期

• 初始化阶段

（1）new Vue（）初始化Vue实例
（2）初始化内部的一些事件、生命周期
（3）初始化vue内部的数据，把data中的数据都劫持给vm，这一步开始vm上就有数据
（4）判断是否有el 1.指定el参数 2.vm.$mount[#'app']
（5）确定是否有模板 1.如果有templete，直接templete作为模板 2.如果没有templete，那么el本身就是模板
（6）结合数据和模板，动态渲染结构，然后把原来的el替换掉

• 数据更新阶段

（1）等待数据发生改变
（2）视图自动更新数据发生改变的那部分

• 销毁阶段

（1）等待调用vm.$destrory()方法
（2）卸载vue内部的事件和监听、vue的数据再次发生改变页面不再更新

钩子函数：
vue生命周期4组8个常用 创建前后，挂载前后，更新前后，销毁前后

    beforeCreate() {
        console.log('beforeCreate', '创建前');
    },
    created() {
        console.log('created', '创建完成');
    },
    beforeMount() {
        console.log('beforeMount', '挂载前');
    },
    mounted() {
        console.log('mounted', '挂载完成');
    },
    beforeUpdate() {
        console.log('beforeUpdate', '更新前');
    },
    updated() {
        console.log('updated', '更新完成');
    },
    beforeDestroy() {
        console.log('beforeDestroy', '销毁前');
        clearInterval(this.interID)
    },
    destroyed() {
        console.log('Destroy', '销毁完成');
    }

常用的钩子函数

• created 创建完成 可以获取this ajax加载 开启定时器
• mounted 挂载完成（内容以及渲染完毕） 可以获取dom节点
• beforeDestroy 销毁前 清除定时器 移除监听事件

vue父子组件生命周期执行顺序

• 加载渲染过程：父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted
• 子组件更新过程：父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated
• 父组件更新过程：父beforeUpdate —> 父updated
• 销毁过程：父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed

10、过滤器

vue提供了过滤器的语法，常用于格式化我们的文本，vue3中已经移除，可以用计算属性代替

11、组件

（1）组件化和模块化的区别

• 组件化：是从UI界面的角度进行划分，方便UI组件的重用
• 模块化：是从代码逻辑的角度进行划分，带有业务，功能模块的单一化

12、refs

作用：
（1）获取元素

<div>
<input type="text"  value="123"  ref="input">
</div>

export  default {
  data(){
      return{
      }
  },
  mounted()    {
      console.log(this.$refs.input)
  }
}

（2）获取子组件中的data或者method

// 父组件

<template>
  <div id="app">
    <Son ref="myref"></Son>
  </div>
</template>

<script>
import Son from "./components/son";
export default {
  mounted() {
    console.log(this.$refs.myref.name); //输出子组件data中的name的值：myhua
    this.$refs.myref.logName();//子组件中的方法
  },
  components: {
    Son
  }
};
</script>

13、js文件路径简介

• '/'开头： 代表根目录
• './'开头：代表当前目录
• '../'开头：代表上一级目录
• '@/'开头：此特殊情况，@为自定义的，一般为模块目录开始

14、路由