vue相关知识

安装node.js、vue4.0脚手架

1. 安装node.js
   https://nodejs.org/en/download/
   查看版本号 node –v、npm –v 出现版本号即安装成功。（如未出现，请重启电脑后再试）

2. 管理nodejs版本（非必装）
   执行命令安装：npm install -g n
   n latest (升级node.js到最新版)
   n stable（升级node.js到最新稳定版）
   n 后面也可以跟随版本号，例如：$ n v0.10.26 或者 $ n 0.10.26

3. 全局安装vue-cli4.0脚手架
   卸载：如果已经全局安装了旧版本的vue-cli(1.x 或 2.x)，需要先卸载：npm uninstall vue-cli -g
   安装：npm install -g @vue/cli
   查看版本号：vue -V，出现版本号即安装成功。

4. 安装淘宝镜像 cnpm (非必装，网络慢的情况可安装)
   npm install -g cnpm --registry=https://registry.npm.taobao.org

---

构建项目

1. Github
   Github：http://www.github.com/（免费）
   Coding：https://coding.net/（免费）
   Gitlab：gitlab.com（免费30天）

2. GIT基础命令（粘贴 shift + insert）
   拷备项目：git clone <仓库地址>
   创建分支：git branch
   创建并进入分支：git checkout –b
   查看状态：git status
   添加所有文件：git add .
   提交：git commit –m ‘这里是当前提交的描述’
   拉取：git pull
   推送：git push
   查看分支：git branch --list
   查看分支（包含远程分支）：git branch -a

---

构建项目

1. 构建项目

vue create vue-admin

2. 配置信息
   
   
   
   
   路由模式有两种：hash、history
   hash - 即地址栏URL中的 # 符号；如：http://www.abc.com/#/hello
   history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（此方法需要后端 Apache 或 Nginx 进行简单的路由配置，否则会报404。）
   注：这两个配置就是解决URL有没有 “#” 号的问题，如果不在意 “#” 号这个东西，就用hash。在意就用 history。
   
   
   
   
   

---

2.x、3.x的差异

3.x目录

1、去除了 static、config、build
2、新增了 public
3、自动依赖node_modules
4、默认配置 webpack，通过 vue.config.js 修改
5、vue inspect 可查看webpack 默认配置
6、内置了 vue-cli-service serve 服务
7、浏览器打开图形界面，vue ui 查看

• Vue3 API
  https://v3.vuejs.org/api/composition-api.html
• Vue3 的底层介绍
  https://v3.vuejs.org/guide/introduction.html

---

依赖 element-ui

1. 官网
   https://doc-archive.element-plus.org/#/zh-CN
2. 安装依赖
   npm install element-plus --save
3. 全局引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

4. vue.config.js
   https://cli.vuejs.org/zh/config/ 手册
5. 配置全局样式

css: {
       // css预设器配置项
    loaderOptions: {
   
        sass: {
   
            data: `@import "./src/styles/common.scss";`
        }
    }

6. 路由重定向
   redirect: “login”

---

vue文件规则

• 固定的3块内容
  template、script、style
• template
  必须有一层父元素，否则会报错。元素不一定是div标签，其他的也可以
• Script 按上图规则，
  Name：当前的名称
  Components：组件，有引入组件时，放置组件名称。
  Data：数据，v-model绑定数据使用
  Created：创建完成时（生命周期其中一个）
  Mounted：挂载完成时（生命周其其中一个）
  Methods：定义函数
  Props、watch：子组件接收父组件参数
• style
  Lang=“scss”：写义类型
  Scoped：局部，定义时：只有当前文件应用样式。否则为全局样式

---

Vue指令

• v-model
  在表单控件或者组件上创建双向绑定。
  Input、select、textarea、component
• v-for（简单理解就是数据循环）基于源数据多次渲染元素或模板块。
  基础模式：

<div v-for=“item in items“ :key=“item.id”> 
    {
  { item.text }} 
</div> 

带索引

<div v-for=“(item, index) in items“ :key=“item.id”> 
    {
  { item.text }} 
</div> 

注：必须要有唯一的key。
当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。
但是，不建设在同一标签上使用。避免产生不友好现象。

• v-show 与 v-if 区别
  v-show：在元素中添加 display，隐藏DOM元素
  v-if：直接删除DOM元素。DOM元素中有接口时，当v-if值为true时，会请求接口。
• v-bind 绑定属性
  绑定方式：v-bind:class 或 :class

---

正则表达式

邮箱验证正则
验证邮箱：var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
字母+数字：let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,20}$/
字母 或 数字：left reg = /^[a-z0-9]{6}$/
过滤特殊字符：

function stripscript(s) {
   
    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&mdash;—|{}【】‘；：”“'。，、？]")
    var rs = "";
    for (var i = 0; i < s.length; i++) {
   
            rs = rs + s.substr(i, 1).replace(pattern, '');
        }
    return rs;
    }

---

:class 的几种绑定方式

• 最简单的绑定
  
• 判断是否绑定一个active
  
• 绑定并判断多个
  
• 单纯数组
  
• 数组对象结合动态判断
  
• 数组与三元运算符结合判断选择需要的class
  

---

VUE3.0新特性语法

• setup函数
  按照官方给出的说法，setup函数是一个新的Vue组件选项，是用于在组件中使用Composition API的入口。

export default {
   
    setup(props, context) {
   
       context.attrs
       context.slots
      context.parent
      context.root
      context.emit
      context.refs
        ………
    }
}

• Reactive（声明单一对象时使用）

取得一个对象并返回原始对象的响应数据处理。
const obj = reactive({
    count: 0 })

• ref（声明基础数据类型变量时使用）

内部值并返回一个响应性且可变的ref对象。ref对象具有.value指向内部值的单个属性。
const number = ref(0);
获取值方式：number.value

• isRef 和 toRefs

检查一个对象是否是ref对象：
const unwrapped = isRef(foo) ? foo.value : foo;
--------