vue基础知识（大纲）

Posted 2021-05-07 guxiaohai_

1. 程序打包（生成dist文件）：npm run build

2. 修改程序端口：进入vue.config.js文件修改port

   devServer: {
       port: port,
       open: true,
       overlay: {
         warnings: false,
         errors: true
       },
     }
   

3. 修改启动命令：进入package.json文件修改scripts

    "scripts": {
       "serve": "vue-cli-service serve",
       "build": "vue-cli-service build",
       "lint": "vue-cli-service lint"
     },
   

4. 双向绑定：v-mode

   <input v-model="" />
   

5. 定义for循环：

   数组举例： v-for="(item,idex) in list" :key="item.id"
   对象举例： v-for="(val,key,index) in obj" :key="key"
   

6. 定义临时标签：<template></template>

7. 单击事件：@click=""

8. 页面引入：import { } from "..js

9. 定义初始默认值及属性：

   export default {
   	data() {
   	    return {
   	      ...属性值
   	   }
   	}
   }
   

10. 初始化加载方法：

    created() { ..初始信息 }
    

11. 方法定义：

    methods: { ..方法 }
    

12. 优先级加载方法：

    async a(){}
    

13. 手机号正则表达式

    /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(值)
    

14. 上传文件图片转换FormData

    let formData = new FormData();
    let file = this.file;
    formData.append("file", file);
    

15. let 和 var及const的区别
    1.var声明的变量会挂载在window上，而let和const声明的变量不会
    2.var声明变量存在变量提升，let和const不存在变量提升
    3.let和const声明形成块作用域
    4.同一作用域下let和const不能声明同名变量，而var可以
    5.const一旦声明必须赋值,不能使用null占位；声明后不能再修改 ；如果声明的是复合类型数据，可以修改其属性

16. 判断：

    v-if=""
    v-else-if=""
    v-else=""
    

17. 验证密码：

     if (/[\\u4E00-\\u9FA5]/g.test(value)) {
       ...密码不能输入汉字
     } else if (value.length < 6) {
       ...密码不能少于6位
     } else {
       ...正确
     }
    

18. 下拉标签

    <select v-model="" placeholder="请选择" >
     <el-option
       v-for="item in .."
       :key="item.."
       :label="item..."
       :value="item...">
     </el-option>
    </el-select>
    

19. 更新全部jar包：npm install

20. 更新指定jar包：npm install ..jar包

21. 显示/隐藏：v-show="true/false"

22. 事件修饰符

    //阻止单击事件继续进行传播
    <a v-on:click.stop=""></a>
    //提交事件不再重载页面
    <form v-on:submit.prevent=""></form>
    //修饰符可以串联
    <a v-on:click.stop.prevent=""></a>
    //只有修饰符
    <form v-on:submit.prevent></form>
    //添加事件监听时使用事件捕捉模式
    //即元素内部触发的事件先在此处理，然后才交由内部元素进行处理
    <a v-on:click.capture=""></a>
    //只当 event.target 是当前元素自身时触发处理函数
    //即事件不是从元素内部触发的
    <a v-on:click.self=""></a>
    

23. 按键修饰符

    //只有 alt 和 shift 同时按下时触发
    <button @click.ctrl=""></buton>
    //只有 ctrl 按下时触发
    <button @click.ctrl.exact=""></buton>
    //没有任何系统修饰符按下时触发
    <button @click.exact=""></buton>
    

24. vue.js的两个核心：数据驱动和组件化

25. $route和 $router的区别
    $router：为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
    $route：是路由信息对象跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，里面包含：path、params、hash、query、fullPath、matched、name等路由信息参数。