vue基础知识（大纲）

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等路由信息参数。

26. EventBus事件订阅总线
    集成EventBus：

    export const EventBus = new Vue()
    

    初始化：

    EventBus.$off("defaultInfo");
    

    订阅：

    EventBus.$emit("defaultInfo", {menuId});
    

    消费：

    EventBus.$on("defaultInfo", (msg) => {
    	const { menuId } = msg
    	console.log(menuId);
     });
    

27. 类型转换
    int整数类型：parseInt
    String字符类型：value.toString();

28. 地址跳转：

    window.location.href = 'https://www.baidu.com';
    

29. 定时器

    setInterval(() => {
    	//执行信息
    	console.log('-------');
    }, 1000);	//1000表示一秒（以毫秒为单位）
    

30. 延迟器

    setTimeout(() => {
    	//执行信息
    	console.log('-------');
    }, 1000);	//1000表示一秒（以毫秒为单位）
    

31. 主页面嵌套子页面传参

    //主页面
    <Header :menuInfo="menuCurrentInfo" />
    //子页面
    props: {
    	menuInfo: {
    		type: Object,
    		default() {
    			return {}
    		}
    	}
    }
    

32. div鼠标移动字体悬浮（:title）

    <div class="icon-one" :title="'首页'">
    

33. 获取uuid

    let uuid = require('uuid');
    uuid = uuid.v1();
    console.log(uuid);	//打印
    

34. 持久化缓存浏览器信息

    localStorage.setItem("key","value");	//通过key缓存value数据
    localStorage.getItem("key");	//通过key获取缓存数据
    localStorage.removeItem("key");	//通过key删除缓存数据
    

35. 单独缓存浏览器当前页面信息

    sessionStorage.setItem("key","value");	//通过key缓存value数据
    sessionStorage.getItem("key");	//通过key获取缓存数据
    sessionStorage.removeItem("key");	//通过key删除缓存数据
    

36. Echarts报表

    //页面
    <div class="chart" id="dataChart" :ref="'dataChart'"></div>
    //js
    let chartOption = //初始化统计图数据
    const myChart = Echarts.init(this.$refs['dataChart']);	//初始化id
    myChart.clear();    //清空数据
    myChart.setOption(chartOption.option)   //存入新数据
    

37. 动态绑定样式（:style=“属性值”）

    <div :style="sensorStyle">传感器</div>
    

38. 获取父级传入数据

    props: {
    	//字符类型
    	value: {
    		type: String,
    		default(){
    			return ''
    		}
    	},
    	//Boolean类型
    	booleanValue: {
    		type: Boolean,
    		default: true
    	},
    	//对象类型
    	dataInfo: {
    		type: Object,
    		default(){
    			return {}
    		}
    	},
    	//集合类型
    	dataList: {
    		type: Array,
    		default(){
    			return []
    		}
    	}
    }
    

39. 初始化加载数据

    watch: {
    	dataList: {
    		deep: true,
    		handler(arr){
    			if(arr){
    				console.log(arr);	//打印数据
    			}
    		}
    	},
    }
    

40. 初始化加载方法

    mounted() {
    	//执行的方法
    	this.initialization();
    }
    

41. 定义方法

    methods: {
    	//初始化数据
    	initialization(){
    		console.log("进来了")	//打印数据
    	}
    }