-
程序打包(生成dist文件):
npm run build
-
修改程序端口:进入vue.config.js文件修改port
devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, }
-
修改启动命令:进入package.json文件修改scripts
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },
-
双向绑定:
v-mode
<input v-model="" />
-
定义for循环:
数组举例: v-for="(item,idex) in list" :key="item.id" 对象举例: v-for="(val,key,index) in obj" :key="key"
-
定义临时标签:
<template></template>
-
单击事件:
@click=""
-
页面引入:
import { } from "..js
-
定义初始默认值及属性:
export default { data() { return { ...属性值 } } }
-
初始化加载方法:
created() { ..初始信息 }
-
方法定义:
methods: { ..方法 }
-
优先级加载方法:
async a(){}
-
手机号正则表达式
/^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(值)
-
上传文件图片转换FormData
let formData = new FormData(); let file = this.file; formData.append("file", file);
-
let 和 var及const的区别
1.var声明的变量会挂载在window上,而let和const声明的变量不会
2.var声明变量存在变量提升,let和const不存在变量提升
3.let和const声明形成块作用域
4.同一作用域下let和const不能声明同名变量,而var可以
5.const一旦声明必须赋值,不能使用null占位;声明后不能再修改 ;如果声明的是复合类型数据,可以修改其属性 -
判断:
v-if="" v-else-if="" v-else=""
-
验证密码:
if (/[\u4E00-\u9FA5]/g.test(value)) { ...密码不能输入汉字 } else if (value.length < 6) { ...密码不能少于6位 } else { ...正确 }
-
下拉标签
<select v-model="" placeholder="请选择" > <el-option v-for="item in .." :key="item.." :label="item..." :value="item..."> </el-option> </el-select>
-
更新全部jar包:
npm install
-
更新指定jar包:
npm install ..jar包
-
显示/隐藏:
v-show="true/false"
-
事件修饰符
//阻止单击事件继续进行传播 <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>
-
按键修饰符
//只有 alt 和 shift 同时按下时触发 <button @click.ctrl=""></buton> //只有 ctrl 按下时触发 <button @click.ctrl.exact=""></buton> //没有任何系统修饰符按下时触发 <button @click.exact=""></buton>
-
vue.js的两个核心:数据驱动和组件化
-
$route和 $router的区别
$router:为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。
$route:是路由信息对象跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,里面包含:path、params、hash、query、fullPath、matched、name等路由信息参数。 -
EventBus事件订阅总线
集成EventBus:export const EventBus = new Vue()
初始化:
EventBus.$off("defaultInfo");
订阅:
EventBus.$emit("defaultInfo", {menuId});
消费:
EventBus.$on("defaultInfo", (msg) => { const { menuId } = msg console.log(menuId); });
-
类型转换
int整数类型:parseInt
String字符类型:value.toString(); -
地址跳转:
window.location.href = 'https://www.baidu.com';
-
定时器
setInterval(() => { //执行信息 console.log('-------'); }, 1000); //1000表示一秒(以毫秒为单位)
-
延迟器
setTimeout(() => { //执行信息 console.log('-------'); }, 1000); //1000表示一秒(以毫秒为单位)
-
主页面嵌套子页面传参
//主页面 <Header :menuInfo="menuCurrentInfo" /> //子页面 props: { menuInfo: { type: Object, default() { return {} } } }
-
div鼠标移动字体悬浮(:title)
<div class="icon-one" :title="'首页'">
-
获取uuid
let uuid = require('uuid'); uuid = uuid.v1(); console.log(uuid); //打印
-
持久化缓存浏览器信息
localStorage.setItem("key","value"); //通过key缓存value数据 localStorage.getItem("key"); //通过key获取缓存数据 localStorage.removeItem("key"); //通过key删除缓存数据
-
单独缓存浏览器当前页面信息
sessionStorage.setItem("key","value"); //通过key缓存value数据 sessionStorage.getItem("key"); //通过key获取缓存数据 sessionStorage.removeItem("key"); //通过key删除缓存数据
-
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) //存入新数据
-
动态绑定样式(:style=“属性值”)
<div :style="sensorStyle">传感器</div>
-
获取父级传入数据
props: { //字符类型 value: { type: String, default(){ return '' } }, //Boolean类型 booleanValue: { type: Boolean, default: true }, //对象类型 dataInfo: { type: Object, default(){ return {} } }, //集合类型 dataList: { type: Array, default(){ return [] } } }
-
初始化加载数据
watch: { dataList: { deep: true, handler(arr){ if(arr){ console.log(arr); //打印数据 } } }, }
-
初始化加载方法
mounted() { //执行的方法 this.initialization(); }
-
定义方法
methods: { //初始化数据 initialization(){ console.log("进来了") //打印数据 } }
vue基础知识(大纲)
最新推荐文章于 2023-07-02 12:03:11 发布