【前端】Vue一本通 & ESLint & JSX

近几天更新完毕，不定期持续更新，建议关注收藏点赞。

工具推荐

工欲善其事，必先利其器。

vscode插件

Vetur：vue代码高亮插件
VueHelper：代码提示插件

vue-devtools

vue-devtools 是一个专门为 Vue.js 开发者打造的 浏览器开发者工具插件，可以用来 调试、查看和修改 Vue 应用的内部状态。
简单来说，它就像给 Vue 应用装了个“透视眼”，让你能轻松看到组件之间是怎么工作的。

• vue-devtools 能干嘛？【5点】
  查看组件结构：类似一棵树，展示你的应用是由哪些组件组成的，谁嵌套谁。你可以直接点进每个组件，看到它的名字、props、data、computed 等。
  实时查看和修改数据：能看到组件当前的数据（data、props、computed）。修改数据还能立刻看到页面更新，适合调试。
  事件追踪：查看哪个组件发出了哪个自定义事件（$emit）。可以看到事件的名字、参数、传播链等。
  Vuex 调试（如果你用了 Vuex）：查看 Vuex 的 state、getters、mutations、actions。
  时间旅行调试（Time Travel Debugging）：可以前进后退查看状态变化。
  性能检测（性能分析标签页）：查看组件的更新频率、渲染开销，找出性能瓶颈。
• 安装
  Chrome 插件商店搜索 vue-devtools 安装。或者在 Firefox 也可以装。
  如果是开发桌面应用或在本地调试，Vue 官方还提供了独立版（Electron 应用）。
• 使用
  确保你的 Vue 应用在开发模式Vue 在生产模式下默认关闭调试信息，vue-devtools 可能检测不到。所以开发时要确保没有 Vue.config.productionTip = false 或类似压缩优化设置。

ESLint

它是一个代码检查工具，用于JavaScript 和 TypeScript 的静态代码分析工具，主要功能是识别并修复代码中的问题，比如语法错误、不一致的风格、潜在的 bug 等。

npm install eslint --save-dev
npx eslint --init #初始化配置
#这个命令会引导你选择项目的风格、使用的框架（React、Vue等）、
#是否使用 TypeScript 等，并生成一个配置文件（.eslintrc.js、.eslintrc.json 等）。
npx eslint yourfile.js #检查这个文件
npx eslint yourfile.js --fix #自动修复代码

比如：如果在main.js 声明个变量而不使用，则终端和网页都会报错，因为不严谨。

• 解决方式
  方式1: 手动解决掉错误, 以后项目中会讲如何自动解决
  方式2: 暂时关闭eslint检查, 在vue.config.js中配置后重启服务

module.exports={
	//其他配置略
	lintOnSave:false//关闭eslint检查
}

• 常配合使用的插件/配置
  eslint-config-airbnb: Airbnb 代码规范
  eslint-plugin-react: 检查 React 项目
  eslint-plugin-import: 管理模块导入
  eslint-config-prettier: 配合 Prettier，关闭 ESLint 中和 Prettier 冲突的规则

JSX语法扩展

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，主要用于Vue/ React。它让你可以在 JavaScript 中写出类似 HTML 的代码，描述界面的结构。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Alice" />;

• JSX 的核心特点

1. 像 HTML 但不是 HTML

const name = "ChatGPT";
const element = <h1>Hello, {name}!</h1>;

2. 标签必须闭合

// 正确
<img src="logo.png" />

3. 只能有一个根节点

// 错误 ❌
return (
  <h1>Title</h1>
  <p>Description</p>
);

// 正确 ✅
return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

4. class 改为 className
   因为 class 是 JavaScript 的关键字，所以在 JSX 中写样式类时要用 className

<div className="container">Hello</div>

• JSX 配合 ESLint
  为了让 ESLint 正确识别 JSX，你需要使用对应的插件和解析器：

#react
npm install eslint-plugin-react eslint-plugin-react-hooks --save-dev

#vue
npm install --save-dev eslint eslint-plugin-vue @vue/eslint-config-standard babel-eslint eslint-plugin-babel eslint-plugin-import eslint-plugin-node eslint-plugin-promise

#vue3还需要
npm install @vitejs/plugin-vue-jsx @vue/babel-plugin-jsx --save-dev

//配置 .eslintrc.js 示例
//react
module.exports = {
  parser: 'babel-eslint',
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  plugins: ['react'],
  rules: {
    'react/prop-types': 'off'
  },
  settings: {
    react: {
      version: 'detect'
    }
  }
};

//vue
module.exports = {
  root: true,
  env: {
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true, // 开启 JSX 支持
    },
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended', // Vue 3 推荐配置
    'plugin:import/recommended',
    'plugin:promise/recommended',
  ],
  plugins: ['vue', 'babel'],
  rules: {
    // 自定义规则，例如关闭 console 警告
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // Vue 特有规则
    'vue/no-multiple-template-root': 'off', // Vue 3 不再强制单根节点
  },
};

//babel.config.js
module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: ['@vue/babel-plugin-jsx'],
};

//Vue 组件中使用 JSX
<script setup>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return () => <div class="hello">Hello from JSX!</div>;
  },
});
</script>

简介

vue的底层还是原生js。开发更加的效率和简洁, 易于维护, 现在很多项目都是用vue开发的。
渐进式javacript框架，官网地址: https://cn.vuejs.org/ 。
渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用

• vue的特点：
  • 渐进式
  • 声明式渲染
  • 数据驱动视图 (响应式)
  • 极少的去写DOM操作相关代码
  • 双向绑定
  • 组件系统
  • 不兼容IE8及以下浏览器
• 库 v.s. 框架
  库: 封装的属性或方法 (例jquery.js)，还是那个规则、语法、元素。
  框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)
• 工程化开发方式：在webpack环境中开发vue，这是最推荐的企业常用方式

@vue/cli脚手架

Vue CLI 里的 cli 指的是：Command Line Interface（命令行界面）
webpack自己配置环境很麻烦, 下载@vue/cli包,
@vue/cli是Vue官方提供的一个全局模块包, 用vue命令创建脚手架项目，开箱即用、0配置webpack、支持babel、css、 less、开发服务器。vue命令创建工程目录, 项目内置webpack本地热更新服务器, 帮我们打包项目预览项目

• 安装
  把@vue/cli模块包按到全局

yarn global add @vue/cli
# OR
npm install -g @vue/cli

vue -V

项目里包含 webpack 吗？是的，虽然你没手动安装，但在项目的 node_modules 里，间接安装了 webpack，因为：@vue/cli-service 依赖了 webpack，你可以通过运行npm ls webpack来查看具体版本。
即使你是用 yarn 安装的 @vue/cli 或创建的项目，你依然可以用npm ls webpack来查看项目中是否安装了 webpack，因为：npm ls webpack 会去看当前项目的 node_modules 目录里是否安装了 webpack（不管你是用 npm 还是 yarn 装的）。yarn 和 npm 都是基于 package.json 和 node_modules 工作的。

• 创建项目
  注意: 项目名不能带大写字母, 中文和特殊符号

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

#选择模版preset：选择用什么方式下载脚手架项目需要的依赖包
#可以上下箭头选择, 弄错了ctrl+c重来

cd vuecil-demo

npm run serve
# 或
yarn serve

• 文件目录

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # webpack入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置
    ├── package.json  # 依赖包列表
    ├── README.md    # 项目说明
	└── yarn.lock    # 项目包版本锁定和缓存地址

public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面

• vue项目架构
  
• @vue/cli 自定义配置
  项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js
  src并列处新建vue.config.js

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

• @vue/cli 单vue文件
  单vue文件好处, 独立作用域互不影响
  Vue推荐采用.vue文件来开发项目
  template里只能有一个根标签
  vue文件-独立模块-作用域互不影响
  style配合scoped属性, 保证样式只针对当前template内标签生效
  vue文件配合webpack, 把他们打包起来插入到index.html, 然后在浏览器运行

<!--App.vue文件 -->
<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default {
  name: 'App'
}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>

去掉默认的内容：src/App.vue默认有很多内容，以及assets 和 components 文件夹下的一切都删除掉

使用

• 插值表达式/声明式渲染/文本插值 这三个名字是一个东西
  在dom标签中, 直接插入内容； dom中插值表达式赋值, vue的变量必须在data里声明。
  运用JSX语法 {{表达式}}

<!--App.vue文件 -->
<template>
 <div>
   <h1>{{ msg }}</h1>
   <h2>{{ obj.name }}</h2>
   <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
 </div>
</template>

<script>
export default {
 data() { // 格式固定, 定义vue数据的地方
   return {  // key相当于变量名
     msg: "hello, vue",
     obj: {
       name: "小vue",
       age: 5
     }
   }
 }
}
</script>

<style>
</style>

vue是MVVM设计模式

vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 提高开发效率
用数据驱动视图改变, 操作dom的事,由vue源码内部来做。vue是数据变化视图自动更新, 减少操作DOM时间, 提高开发效率

1. 在vue中，不推荐直接手动操作DOM！！！
2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)
   • MVVM
     MVVM，一种软件架构模式，决定了写代码的思想和层次
     M： model数据模型 (data里定义)
     V： view视图 （html页面）
     VM： ViewModel视图模型 (vue.js源码)
     
     
     MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM
     V（修改视图） -> M（数据自动同步）
     M（修改数据） -> V（视图自动同步）

M层和V层可以互相改变
在devtool工具可以改变M层的变量, 观察V层(视图的自动同步)；（devtool工具就是chrome浏览器检查工具（开发者模式）里多出来的vue工具）

对比MVC设计模式

vue指令

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头，每个指令, 都有独立的作用

• v-bind：给dom加属性的，属性内容就是vue变量的值, 影响标签显示效果
  v-bind:属性名="vue变量"简写:属性名="vue变量"

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

• v-on：给标签绑定事件
  在 Vue 中，事件修饰符给事件扩展额外功能， 可以链式书写，Vue 会从左到右依次执行修饰符

<!--
v-on:事件名="要执行的少量代码"
v-on:事件名="methods中的函数"
v-on:事件名="methods中的函数(实参)" 
无传参, 通过形参直接接收
传参, 通过$event指代事件对象传给事件处理函数
简写: @事件名="methods中的函数"
-->

<!--
@事件名.修饰符="methods里函数"
.stop - 阻止事件冒泡
.prevent - 阻止默认行为
.once - 程序运行期间, 只触发一次事件处理函数
-->

<!-- vue指令:   v-on事件绑定-->
<template>
  <div>
	<p>你要买商品的数量: {{count}}</p>
	<button v-on:click="count = count + 1">增加1</button>
	<button v-on:click="addFn">增加1个</button>
	<button v-on:click="addCountFn(5)">一次加5件</button>
	<button @click="subFn">减少</button>
	
	<a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>
<script>
    export default {
        // ...其他省略
        methods: {
            addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                this.count++
            },
            addCountFn(num){
                this.count += num
            },
            subFn(){
                this.count--
            },
            one(e){
		      e.preventDefault()
		    },
		    two(num, e){
		      e.preventDefault()
		    }
        }
    }
</script>

<template>
  <div @click="fatherFn">
    <!-- vue对事件进行了修饰符设置, 在事件后面.修饰符名即可使用更多的功能 -->
    <button @click.stop="btn">.stop阻止事件冒泡</button>
    <a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a>
    <button @click.once="btn">.once程序运行期间, 只触发一次事件处理函数</button>
  </div>
</template>

<script>
export default {
  methods: {
    fatherFn(){
      console.log("father被触发");
    },
    btn(){
      console.log(1);
    }
  }
}
</script>

• v-on按键修饰符

给键盘事件, 添加修饰符, 增强能力

@keyup.enter  -  监测回车按键
@keyup.esc     -   监测返回按键

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   },
   escFn(){
     console.log("esc按键了");
   }
 }
}
</script>


<!-- 例子 -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="btn">逆转世界</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "HELLO, WORLD",
    };
  },
  methods: {
    btn(){
      this.message = this.message.split("").reverse().join("")
    }
  }
};
</script>

• v-model：把value属性和vue数据变量, 双向绑定到一起。
  双向数据绑定：数据变化 -> 视图自动同步，视图变化 -> 数据自动同步

v-model="vue数据变量"

<template>
  <div>
    <!-- 
    	v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令
    -->
    <div>
      <span>用户名:</span>
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码:</span>
      <input type="password" v-model="pass" />
    </div>
    <div>
      <span>来自于: </span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="from">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
      <span>爱好: </span>
      <input type="checkbox" v-model="hobby" value="抽烟">抽烟
      <input type="checkbox" v-model="hobby" value="喝酒">喝酒
      <input type="checkbox" v-model="hobby" value="写代码">写代码
    </div>
    <div>
      <span>性别: </span>
      <input type="radio" value="男" name="sex" v-model="gender">男
      <input type="radio" value="女" name="sex" v-model="gender">女
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      pass: "",
      from: "",
      hobby: [], 
      sex: "",
      intro: "",
    };
    // 总结:
    // 特别注意: v-model, 在input[checkbox]的多选框状态
    // 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
    // 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
  }
};
</script>

• v-model修饰符

• v-model.修饰符=“vue数据变量”
  • .number 以parseFloat转成数字类型
  • .trim 去除首尾空白字符
  • .lazy 在change时触发而非input时
    在 Vue 中使用 v-model 时，默认是绑定在 input 事件上的，也就是说只要用户输入了内容（比如键盘敲一下），就会触发数据更新。
    lazy会改为在 change 事件时才更新绑定的数据，也就是说用户只有在失去焦点或按下 Enter 的时候，message 才会更新。

<template>
  <div>
    <div>
      <span>年龄:</span>
      <input type="text" v-model.number="age">
    </div>
    <div>
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto">
    </div>
    <div>
      <span>自我介绍:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      motto: "",
      intro: ""
    }
  }
}
</script>

• v-text和v-html
  注意: 会覆盖插值表达式
  v-text把值当成普通字符串显示, v-html把值当做html解析
  • v-text=“vue数据变量”
  • v-html=“vue数据变量”

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<span>我是一个span标签</span>"
    }
  }
}
</script>

• v-show和v-if控制标签的隐藏或出现
  • v-show=“vue变量”
  • v-if=“vue变量”

原理:

• v-show 用的display:none隐藏 (适用于：频繁切换使用)
• v-if-else 直接从DOM树上移除

<template>
  <div>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <p v-if="age > 18">我成年了</p>
      <p v-else>还得多吃饭</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 15
    }
  }
}
</script>

<!-- 例子：折叠面板-->
<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span class="btn" >
          收起
        </span>
      </div>
      <div class="container">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  }
}
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
  }
}
</style>

使用less语法，需要加载less相应模块
yarn add less@3.0.4 less-loader@5.0.0 -D

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span class="btn" @click="isShow = !isShow">
          {{ isShow ? '收起' : '展开' }}
        </span>
      </div>
      <div class="container" v-show="isShow">
        <p>寒雨连江夜入吴, </p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    }
  }
}
</script>

• v-for
  vue最常用指令, 铺设页面利器, 快速把数据赋予到相同的dom结构上循环生成
  列表渲染, 所在标签结构, 按照数据数量, 循环生成。 目标结构：数组 / 对象 / 数字 / 字符串 (可遍历结构)
  • v-for=“(值, 索引) in 目标结构”
  • v-for=“值 in 目标结构”

注意: v-for的临时变量名不能用到v-for范围外

<template>
  <div id="app">
    <div id="app">
      <!-- v-for 把一组数据, 渲染成一组DOM -->
      <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
      <p>学生姓名</p>
      <ul>
        <li v-for="(item, index) in arr" :key="item">
          {{ index }} - {{ item }}
        </li>
      </ul>

      <p>学生详细信息</p>
      <ul>
        <li v-for="obj in stuArr" :key="obj.id">
          <span>{{ obj.name }}</span>
          <span>{{ obj.sex }}</span>
          <span>{{ obj.hobby }}</span>
        </li>
      </ul>

      <!-- v-for遍历对象(了解) -->
      <p>老师信息</p>
      <div v-for="(value, key) in tObj" :key="value">
        {{ key }} -- {{ value }}
      </div>

      <!-- v-for遍历整数(了解) - 从1开始 -->
      <p>序号</p>
      <div v-for="i in count" :key="i">{{ i }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};
</script>

v-for=“i in count” :key=“i” 里为什么“非要”加 key，其实是和 Vue 的 性能优化机制有关。推荐使用唯一的、稳定的值作为 key
在使用 v-for 渲染列表时，Vue 需要在 更新 DOM 时判断哪些元素该重用、哪些该添加、哪些该删除。加了 key，Vue 才能：更高效地更新列表（知道哪个项变了、哪个删了）、保证组件状态稳定（比如 < input> 不会错位）、减少不必要的 DOM 操作
如果你不给每个元素一个独一无二的 key，Vue 就会用一种叫 “就地复用” 的策略：简单地按顺序复用已有的 DOM 元素，不管它们代表什么数据。这有时会导致非常奇怪的行为
<input v-for="item in items" :value="item.name">如果你改变了 items 的顺序，而没设置 key，输入框的值可能会错乱，因为 DOM 元素被“错误地复用了”。