vue基础知识（大纲）

2021-05-06 18:06:19 阅读：105 来源： 互联网

程序打包（生成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等路由信息参数。

标签：vue,const,大纲,修饰符,基础知识,let,声明,路由
来源： https://blog.csdn.net/guxiaohai_/article/details/116457786

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue基础知识（大纲）