箭头函数应用
箭头函数是 ES6 中新增的语法，它可以简化函数的书写，并且可以更好地处理作用域的问题。下面是前端中使用箭头函数的一些场景及写法。
- 函数表达式
箭头函数可以用来定义函数表达式，例如：
const sum = (a, b) => {
return a + b;
};
console.log(sum(1, 2)); // 输出 3
- 简化函数表达式
如果函数体只有一行语句，可以省略大括号和 return 关键字，例如：
const sum = (a, b) => a + b;
console.log(sum(1, 2)); // 输出 3
- 简化对象方法
在对象字面量中，可以使用箭头函数来定义方法，例如：
const obj = {
name: 'Tom',
sayHi: () => {
console.log(`Hi, my name is ${this.name}.`);
}
};
obj.sayHi(); // 输出 Hi, my name is undefined.
需要注意的是，在箭头函数中，this 关键字会指向定义时的作用域，而不是调用时的作用域。
- 作为回调函数
箭头函数可以作为回调函数传递，例如：
const arr = [1, 2, 3];
const doubleArr = arr.map(item => item * 2);
console.log(doubleArr); // 输出 [2, 4, 6]
在这个例子中，箭头函数作为 map 方法的回调函数，可以更简洁地实现对数组的遍历和处理。
扩展
关于 :
（）=>({ })
了解
这是一个箭头函数，它没有参数，返回一个空的对象。可以写成如下的函数表达式：
function() {
return {};
}
它等价于：
() => {
return {};
}
js中对象的字面量
在 JavaScript 中，对象的字面量是一种快速创建对象的方式。它使用一对花括号 {} 来包括一个或多个属性键值对，如下所示：
let person = {
name: 'Alice',
age: 30,
gender: 'female'
};
在对象字面量中，属性名称（键）可以是字符串或标识符。如果属性名称是一个合法的标识符（只包含字母、数字和下划线，并且不以数字开头），则可以省略引号，如上例中的 name 和 gender 属性。如果属性名称包含空格、连字符或其他特殊字符，必须使用引号将其括起来，如下所示：
let person = {
'first name': 'Bob',
'last-name': 'Smith',
'gender': 'male'
};
在对象字面量中，属性值 可以是任何有效的 JavaScript 表达式，包括字符串、数字、布尔值、函数、数组、其他对象 等等。属性值可以使用逗号分隔，如下所示：
let person = {
name: 'Alice',
age: 30,
hobbies: ['reading', 'traveling'],
address: {
city: 'New York',
state: 'NY'
},
sayHello: function() {
console.log('Hello, my name is ' + this.name + '.');
}
};
js中的大括号｛｝
在 JavaScript 中，大括号 {} 可以表示对象字面量、代码块和函数体。为了区分它们的含义，需要根据上下文语境来判断。
- 对象字面量 ：如果在赋值语句、函数参数或对象属性中使用大括号，则大括号表示对象字面量。
const obj = { name: 'John', age: 30 };
function foo({ name, age }) { console.log(name, age); }
- 代码块 ：如果大括号出现在控制流语句（如 if、for、while、switch 等）的后面，则大括号表示代码块。
if (condition) {
// code block
} else {
// code block
}
for (let i = 0; i < 10; i++) {
// code block
}
while (condition) {
// code block
}
- 函数体：如果大括号出现在函数声明或函数表达式的后面，则大括号表示函数体。
function foo() {
// function body
}
const bar = function() {
// function body
}
总之，需要根据上下文语境来判断大括号的含义。
CommonJS 是什么
CommonJS 是一种模块化规范，用于在 JavaScript 中实现模块化编程。它定义了一个模块的基本结构和导入/导出方式，使得 JavaScript 开发人员可以更好地组织和管理代码。该规范主要应用于服务器端的 JavaScript 开发，例如 Node.js。在 CommonJS 规范中，每个模块都可以视为一个封闭的作用域，模块内的变量和函数只能在模块内部使用，而不会污染全局命名空间。同时，模块之间可以通过 require() 和 exports 对象来进行依赖管理和模块间通信。
有哪些模块化规范？
在软件开发中，常用的模块化规范有以下几种：
CommonJS：是 Node.js 默认的模块化规范，它使用 require() 方法引入模块，module.exports 导出模块。适用于服务器端开发。
AMD：Asynchronous Module Definition，即异步模块定义。AMD 规范是为了解决浏览器端模块化而生的。它使用 define() 方法定义模块，require() 方法引入模块。适用于浏览器端开发。
ES6 模块化：ES6 引入了官方的模块化规范，使用 import 引入模块，export 导出模块。适用于现代浏览器端和 Node.js 环境。
UMD：Universal Module Definition，是一个通用的模块化规范，可以同时兼容 CommonJS、AMD 和全局变量的引用方式。适用于各种场景。
SystemJS：是一个模块加载器，可以加载所有类型的模块。它支持 AMD、CommonJS、ES6 等多种模块化规范。适用于复杂项目的模块管理。
什么叫做W3C标准
W3C标准是由万维网联盟（World Wide Web Consortium，简称 W3C）制定的一系列规范和标准，旨在推动互联网技术的发展和使用。这些标准包括HTML、CSS、XML、XPath、XSLT等，它们规定了网页的结构、样式、语义、交互等方面的要求，并确保了不同浏览器间的兼容性和互操作性。W3C标准的制定是为了避免不同浏览器、不同系统之间的兼容问题，提高网站的可访问性、可用性和可维护性。
W3C标准有哪些
W3C标准包括但不限于以下几个方面：
TML标准：定义了Web页面的结构和内容，当前版本为HTML5。
CSS标准：定义了Web页面的样式和布局，当前版本为CSS3。
XML标准：定义了可扩展标记语言，用于创建自定义标记语言。
DOM标准：定义了文档对象模型，用于访问和操作HTML和XML文档。
SVG标准：定义了可缩放矢量图形，用于创建高质量的图形和动画效果。
Web服务标准：定义了Web服务的架构和通信协议，用于实现不同系统之间的数据交换和集成。
Web应用程序标准：定义了Web应用程序的开发和部署规范，包括Web组件、Service Worker、IndexedDB等。
除了上述标准，W3C还在不断推出新的标准和规范，以适应Web技术和应用的快速发展。
php和javascript区别
PHP 和 JavaScript 是两种不同的编程语言，它们的用途和特点也有所不同。
PHP 是一种服务器端脚本语言，主要用于 Web 开发。它可以与 HTML 配合使用，生成动态网页内容。PHP 运行在服务器上，可以通过 Web 服务器解释执行，生成 HTML 或其他格式的输出。PHP 语言的主要特点是易于学习和使用，广泛应用于 Web 服务器端开发，例如创建动态网站、Web 应用程序、电子商务网站等。
JavaScript 是一种客户端脚本语言，主要用于网页交互和动态效果。它可以在网页中嵌入脚本代码，实现动态效果、表单验证、页面交互等功能。JavaScript 运行在客户端浏览器上，可以与 HTML 和 CSS 结合使用，实现网页的动态特效。JavaScript 语言的主要特点是动态性、交互性和灵活性，广泛应用于 Web 开发、桌面应用程序开发、移动应用开发等方面。
总的来说，PHP 更适合用于服务器端开发，而 JavaScript 更适合用于客户端网页交互和动态效果。
@keyup.enter.native
@keyup.enter.native 是 Vue.js 框架中的一个事件修饰符，它表示监听键盘按键的 “Enter” 键弹起事件。在模板中使用这个修饰符可以方便地监听 “Enter” 键按下后的操作，比如提交表单或搜索等。例如，可以这样写：
<input type=“text” v-model=“searchText” @keyup.enter.native=“search”>
当用户在输入框中按下 “Enter” 键时，会触发 search 方法进行搜索操作。
其中，.native表示这个事件是一个原生事件，也就是指这个事件不会被Vue.js的事件系统进行修饰或阻止冒泡。在这种情况下，这个事件会直接绑定在组件根元素上。
js中如何区分join()和split()
join()和split()是JavaScript中两个常用的字符串方法，它们的作用不同。
join()方法是将数组中所有元素连接成一个字符串。它需要一个参数，即用于连接数组元素的分隔符。例如：
const arr = ['apple', 'banana', 'orange'];
const str = arr.join(', ');
console.log(str); // "apple, banana, orange"
split()方法是将一个字符串分割成一个数组。它需要一个参数，即用于分割字符串的分隔符。例如：
const str = "apple, banana, orange";
const arr = str.split(', ');
console.log(arr); // ["apple", "banana", "orange"]
因此，可以通过方法的作用来区分join()和split()方法。join()是将数组中的元素连接成一个字符串，而split()是将字符串分割成一个数组。
记忆方式：字符串是一连串的，所以数组使用join( )方法可以转成字符串，而数组元素是一个一个的，所以字符串可以使用split( )方法把字符串分割成一个个数组元素。
js中，可以隐式类型转换的运算符有哪些
在 JavaScript 中，可以进行隐式类型转换的运算符主要有以下几个：
-
加法运算符（+）：将非字符串类型转换为字符串类型。
-
减法运算符（-）、乘法运算符（*）、除法运算符（/）和求余运算符（%）：将非数字类型转换为数字类型。
-
比较运算符（<、>、<=、>=）：将非数字类型转换为数字类型，或将非布尔类型转换为布尔类型。
-
相等运算符（==）和不相等运算符（!=）：将两个操作数进行类型转换，再进行比较。如果两个操作数的类型不同，则将其中一个或两个操作数转换为相同的类型。
-
逻辑运算符（&&、||）：如果其中一个操作数不是布尔类型，则将其转换为布尔类型。
需要注意的是，隐式类型转换可能会导致意想不到的结果，因此在编写代码时应尽量避免使用隐式类型转换。
什么叫做渐进式javascript框架
渐进式 JavaScript 框架是一种将应用程序的复杂性分解为小的、可重用的组件的方法，以便能够逐步构建应用程序。这些框架通常提供一组工具和库，用于处理应用程序的核心功能，如路由、状态管理、数据处理和 UI 组件。渐进式 JavaScript 框架的一个重要特点是，它们允许开发人员在应用程序的不同部分中选择使用框架的哪些功能，而不是要求开发人员必须使用整个框架。这种方法可以帮助开发人员更快地构建应用程序，并且可以更轻松地维护和扩展应用程序。常见的渐进式 JavaScript 框架包括 Vue.js、React 和 Angular。
vue.js 2.x和vue.js 3.x创建项目的命令分别是？
Vue.js 2.x 创建项目的命令是：
vue init webpack myproject
Vue.js 3.x 创建项目的命令是：
vue create myproject
需要注意的是，Vue.js 3.x 使用的是 Vue CLI 4.x 或以上版本，而 Vue.js 2.x 使用的是 Vue CLI 3.x 版本。
为什么使用vue create 创建出来的vue项目的版本是vue.js 2.x？
Vue CLI 是一个官方提供的脚手架工具，用于快速搭建 Vue.js 项目。在创建 Vue.js 项目时，可以选择使用 Vue.js 2.x 或 Vue.js 3.x 版本。如果你使用vue create命令创建 Vue.js 项目时没有指定版本号，则默认会创建 Vue.js 2.x 的项目。
Vue.js 3.x 是相对于 Vue.js 2.x 而言的一个全新版本，虽然有很多新特性和优化，但是也存在着一些不兼容的改动。因此，在选择使用哪个版本时，需要根据自己的需求和项目情况来进行选择。如果你的项目需要使用 Vue.js 3.x 特性，可以使用 vue create 命令创建 Vue.js 3.x 的项目。如果你的项目已经使用了 Vue.js 2.x，而且没有特别的原因需要升级到 Vue.js 3.x，可以继续使用 Vue.js 2.x。
怎么知道项目中使用的vue.js是什么版本的？
可以在vue.js项目中的package.json文件中查看版本号，在package.json文件中，可以找到 Vue.js 的版本号在 dependencies 或 devDependencies 中的 vue 依赖项中。例如：
{
"dependencies": {
"vue": "^3.2.6"
}
}
上述代码表示当前项目使用的 Vue.js 版本为 3.2.6。其中，^ 符号表示该版本的主版本号不变，但是次版本号和修订版本号可以升级。例如，如果有了一个新的 Vue.js 版本 3.3.0，则可以自动更新到该版本。
生成package.json的命令是什么？vue.config.js是默认生成的吗？
生成 package.json 的命令是：
npm init
或者使用以下命令来自动生成默认配置的 package.json 文件：
npm init -y
vue.config.js 文件不是默认生成的，需要手动创建。如果需要使用这个文件来配置 Vue CLI 的行为，可以在项目根目录下创建一个名为 vue.config.js 的文件，并将需要的配置选项写在其中。
vue2项目指的是vue.js版本是2.x吗？
是的，Vue2项目指的是使用Vue.js 2.x版本开发的项目。Vue.js是一个渐进式JavaScript框架，目前主要有两个版本：Vue.js 2.x和Vue.js 3.x。Vue.js 2.x是目前应用最广泛的版本，而Vue.js 3.x则是在Vue.js 2.x基础上进行了一系列的升级和优化。
开发环境、测试环境、生产环境都有什么区别
开发环境、测试环境和生产环境是软件开发过程中的三个不同阶段，每个阶段都有不同的目标和要求。它们的主要区别如下：
-
开发环境：开发环境是软件开发人员用来编写、测试和调试软件代码的地方。它通常只有少量的数据和用户，并且不需要高度的稳定性或可用性。开发环境通常是开发人员的本地计算机或一台专门的开发服务器。
-
测试环境：测试环境是用于测试软件的功能、性能和稳定性的地方。它与生产环境相似，但通常只有少量的测试数据和用户，并且测试环境中的数据不会影响实际的生产数据。测试环境通常是一台独立的服务器，也可以是一个虚拟机或容器。
-
生产环境：生产环境是运行实际软件的地方，它需要高度的稳定性、可用性和安全性。生产环境中的数据和用户数量通常比开发和测试环境要多得多。生产环境通常是一组负载平衡的服务器，以确保高可用性和性能。
总之，开发、测试和生产环境的不同之处在于它们的目标和要求不同。开发环境用于开发和调试代码，测试环境用于测试软件的功能和性能，生产环境用于运行实际的软件服务。因此，在不同的环境中需要调整软件的设置、配置和部署方式，以便满足不同环境的需求。
函数代码解析
第一种
var getName = function () { }
function getName () { }
这两个语法形式都可以用来定义一个函数，但是在 JavaScript 中，第二种形式更加常用。
第一种形式 var getName = function() {} 是函数表达式的形式，定义了一个匿名函数并将其赋值给变量 getName。这种形式的函数可以被作为参数传递给其他函数，也可以在函数内部被定义和使用。
第二种形式 function getName() {} 是函数声明的形式，它会使函数在执行之前被预解析，并且会被提升到作用域的顶部。这种形式的函数可以在全局作用域和函数内部定义，并且可以在任何地方被调用。
因为函数声明会被提升到作用域的顶部，所以在代码中使用函数声明的形式可以使代码更加清晰易懂。而函数表达式则更适合在需要按需加载函数或将函数作为参数传递的场景中使用。
第二种
function Foo () {
getName = function () {//这里的getName的作用域是全局的
console.log(1);
}
return this;//调用Foo()后返回this,这个this指向window
}
这段代码定义了一个名为 Foo 的函数，该函数返回 this，并将变量 getName 定义为一个函数，该函数在调用时会输出数字 1。但是，由于 getName 变量没有使用 var、let、const 等关键字声明，因此它会成为全局变量，从而可能影响其他部分的代码。
Foo().getName()，这句相当于window.getName()，所以结果应该输出1
第三种
var F = function() {};
是一个构造函数，是一个空函数，可以用作构造函数。我们可以通过它创建一个新对象，如下所示：
var obj = new F();
这个语法中的 new 关键字告诉 JavaScript 创建一个新对象，然后调用函数 F 并将该新对象作为 this 对象传递给它。如果 F 函数中没有显式地返回对象，那么 new 表达式将返回刚才创建的新对象。因此，我们可以将 F 作为构造函数使用，创建新对象并对其进行初始化。
第四种
var F = function() {};
Object.prototype.a = function() {
console.log('a');
};
Function.prototype.b = function() {
console.log('b');
}
var f = new F();
这段代码定义了一个空函数F，并将Object原型对象上添加了一个名为a的方法，该方法会输出字符串’a’。同时，将Function原型对象上添加了一个名为b的方法，该方法会输出字符串’b’。
然后，创建了一个构造函数f，通过使用new关键字调用函数F来创建一个f对象。由于F函数是空函数，所以f对象并没有任何属性和方法，但是f对象的原型链上包含了Object.prototype和Function.prototype两个原型对象。
因此，f对象可以访问到Object原型对象上的a方法，可以通过f.a()来调用该方法，输出字符串’a’。同时，f对象也可以访问到Function原型对象上的b方法，可以通过f.b()来调用该方法，输出字符串’b’。
第五种
function Foo(){
Foo.a = function(){//这是一个静态方法
console.log(1);
}
this.a = function(){//这是一个实例方法
console.log(2)
}
}
这是一个构造函数。在函数内部，它定义了一个静态方法 Foo.a 和一个实例方法 this.a。当你使用 new 关键字调用这个函数时，它会返回一个新的对象，并且这个对象会继承 Foo 的原型。同时，this.a 方法也会被添加到这个新的对象中，成为该对象的一个属性和方法。
注意区分静态方法和实例方法。 上面Foo.a是一个静态方法，this.a是一个实例方法。
第六种
function Foo(){
Foo.a = function(){//这是一个静态方法
console.log(1);
}
this.a = function(){//这是一个实例方法
console.log(2)
}
}
Foo.a = function(){
console.log(4);
}
这段代码定义了一个构造函数 Foo。在构造函数内部，定义了一个静态方法 Foo.a 和一个实例方法 this.a。
在代码的最后，定义了一个静态方法 Foo.a。由于 JavaScript 中函数也是对象，所以这里相当于给构造函数 Foo 添加了一个属性 a，其值为一个函数。
现在来看执行顺序。当我们执行下面的代码时：
var obj = new Foo();
obj.a();//2
Foo.a();//1
首先，我们创建了一个名为 obj 的对象，该对象是通过调用构造函数 Foo 创建的。由于在构造函数内部定义了一个实例方法 this.a，因此 obj.a() 输出的是 2。
第七种
js原型链中，Object和Function之间是什么关系?
在 JavaScript 中，Object 和 Function 是两个内置的构造函数。Function 是一个特殊的对象，具有可执行代码的特性，可以用来创建新的函数对象。而 Object 则是 ECMAScript 中的基本数据类型之一，也是所有对象的父对象。
在原型链中，Object 和 Function 之间存在着继承关系。具体来说，所有的函数对象都是 Object 的实例，因此它们继承了 Object.prototype 上的所有方法和属性。同时，Function.prototype 也是一个对象，因此它也继承了Object.prototype上的方法和属性。
另外，由于所有的函数对象都是 Function 的实例，因此它们也继承了 Function.prototype 上的方法和属性。也就是说，函数对象既可以调用Object.prototype上的方法，也可以调Function.prototype 上的方法。这是因为在原型链中，函数对象的原型链上既包含了 Object.prototype，也包含了 Function.prototype。
js中，普通的函数算是构造函数吗？
在 JavaScript 中，普通函数和构造函数是有区别的。虽然两者的语法非常相似，但是它们的用途不同。
普通函数用于执行一些特定的任务，而构造函数则用于创建对象。如果使用 new 操作符调用一个函数，那么这个函数就会变成构造函数，用于创建新的对象。如果没有使用 new 操作符调用函数，那么这个函数就会被当作普通函数来执行。
因此，普通函数和构造函数是有区别的，不能混淆使用。
module.exports 和 exports和export和export default区分
这些关键字都是用于在 JavaScript 中导出模块的方式。
module.exports 是CommonJS规范中用于导出模块的方式。在 Node.js 中，module.exports 是一个指向当前模块导出对象的引用。可以通过给 module.exports 赋值来导出一个对象或函数。
例如：
// 导出一个函数
function add(a, b) {
return a + b;
}
module.exports = add;
exports 是 module.exports 的一个辅助对象，可以通过给 exports 对象的属性赋值来导出模块。
例如：
// 导出一个对象
exports.name = 'Tom';
exports.age = 18;
这个模块实际上等价于：
module.exports = {
name: 'Tom',
age: 18
};
export 是 ES6 中用于导出模块的关键字。可以通过 export关键字导出一个变量、函数或对象。一个模块中可以导出多个export
例如：
// 导出一个变量
export const name = 'Tom';
// 导出一个函数
export function add(a, b) {
return a + b;
}
// 导出一个对象
export default {
name: 'Tom',
age: 18
};
export default 也是 ES6 中用于导出模块的关键字，但是一个模块中只能导出一个默认值，也就是一个模块中只能使用一个export default。
例如：
// 导出一个默认值
export default function add(a, b) {
return a + b;
}
// 导出一个默认对象
export default {
name: 'Tom',
age: 18
};
在导入模块时，可以使用 import 关键字来引入模块。例如：
// 导入 CommonJS 模块
const add = require('./add');
// 导入 ES6 模块
import { name, add } from './module';
import person from './person';
总结：
module.exports 和 exports是node.js中导出的方式。
export和export default是ES6中导出的方式。
生成package.json文件的命令
npm init
说一下事件循环 eventloop
- 先执行“执行栈”中的同步任务。
- 执行完了就把“任务队列”中的异步任务（分为微任务/宏任务，先执行微任务）放到执行栈中执行。
什么是跨域，解决跨域的方法有哪些？
代码演示：
了解
npm install vue是什么命令？
npm install vue 用于在 Node.js 环境中使用 npm 包管理器 来安装 Vue.js 框架。
这个命令将从 npm 仓库下载 Vue.js 的最新版本，并将其保存到项目的 node_modules 目录中。这样，在你的项目代码中就可以通过引入 Vue.js 库来使用它的各种功能了。
需要注意的是，执行该命令前需要先在你的项目目录下初始化一个package.json文件，该文件包含了项目的基本信息和依赖关系。你可以使用 npm init 命令来创建这个文件，或者使用 npm init -y 命令快速生成默认配置的package.json文件。
运行vue项目后如何自动打开浏览器？
创建号vue项目后，使用npm run serve命令运行项目时，想要自动打开浏览器的配置方法：
在package.json文件中，如下配置：
"scripts": {
"serve": "vue-cli-service serve --open",
},
vue项目中关闭eslint校验工具方法
创建vue.config.js文件：需要对外暴露
module.exports = {
lintOnSave:false,
}
src文件夹的别名的设置
因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些。
在项目根目录下创建jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"dist"
]
}
配置路由步骤
- 在
router.js文件中new一个VueRouter，配置一下路由规则routes。
import Vue from 'vue'
import vuerouter from 'vue-router'
import routes from './routes'
//声明使用插件
Vue.use(vuerouter)
//向外默认暴露路由器对象
export default new vuerouter({
mode: 'history',
//没有#的模式
routes,
//注册所有路由
})
- 路由规则文件
routes.js，引入已经写好的组件
import Home from '@/pages/Home'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
import Search from '@/pages/Search'
export default [{
path: '/',
component: Home
},
{
path: '/login',
component: Login
},
{
path: '/register',
component: Register
},
{
path: '/search',
component: Search
},
]
- 在入口文件
main.js中 注册路由器
import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router, // 注册路由器
}).$mount('#app')
- 在
App.vue文件中路由出口router-view标签
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "app",
};
</script>
<style>
</style>
vue声明周期钩子函数
a:link:hover是什么意思？
a:link:hover是CSS语法中的一种选择器组合方式，用于定义当鼠标指针悬停在<a>标签上时的样式。其中，a表示选择所有<a>标签，:link表示选择所有未被访问的链接，:hover表示选择在鼠标悬停时的状态。因此，a:link:hover表示选择所有未被访问的链接在鼠标悬停时的状态。
html { overflow-y: scroll; }解析
这行代码的作用是让网页在y轴方向（竖直方向）出现滚动条。
具体地说，它是将网页的样式表中html元素的overflow-y属性设置为scroll，意味着当网页窗口不足以容纳html元素时，会在y轴方向上出现一个滚动条来让用户滚动查看内容。
css初始化代码
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
fieldset, lengend, button, input, textarea,
th, td {
margin: 0;
padding: 0;
}
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font: 12px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
color: #333;
}
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var, i{ font-style: normal; } /* 将斜体扶正 */
b, strong{ font-weight: normal; } /* 将粗体扶细 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/* 重置列表元素 */
ul, ol { list-style: none; }
/* 重置文本格式元素 */
a { text-decoration: none; color: #666;}
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; }
button, input, select, textarea {
font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
/* 重置表格元素 */
table {
border-collapse: collapse;//表示边框合并为一条
border-spacing: 0;//表示单元格之间没有空隙
}
/* 重置 hr */
hr {
border: none;
height: 1px;
}
.clearFix::after{
content:"";
display: block;
clear:both;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }
a:link:hover{//表示选择所有未被访问的链接在鼠标悬停时的状态
color : rgb(79, 76, 212) !important;
text-decoration: underline;
}
/* 清除浮动 */
.clearfix::after {
display: block;
height: 0;
content: "";
clear: both;
visibility: hidden;
}
visibility: hidden;和display: none;区别
visibility: hidden;和display: none;都可以隐藏元素，但二者有区别：
visibility: hidden; 隐藏元素，但仍然占据原来的空间，不会改变页面布局。
display: none; 隐藏元素，同时会将元素从页面布局中移除，不再占据空间。
因此，如果想要隐藏元素但仍然保留原有的位置，可以使用visibility: hidden;，但如果想要彻底移除元素并不再占用页面空间，应该使用display: none;。
创建vue实例的代码解析
new Vue({
el: '#app',
render: h => h(App)
})
这是一段Vue.js的代码，它的作用是将组件渲染到页面上。逐行解释如下：
1.new Vue：创建一个新的Vue实例。
2. el: '#app'：指定Vue实例的挂载元素，也就是要将组件渲染到哪个元素上。
3. render: h => h(App)：Vue组件的渲染函数，它返回一个虚拟DOM节点，最终会被转换成真实的DOM节点并插入到el指定的元素中。其中h是Vue的createElement函数的别名，用于创建虚拟DOM节点。App是要渲染的组件，即根组件。
创建vue实例的另外一种写法：
new Vue({
render: h => h(App),
router,
}).$mount('#app')
这是一个使用Vue框架构建网页应用程序的代码。逐行解释如下：
new Vue({})：创建一个Vue实例。render: h => h(App)：告诉Vue在“#app”元素中渲染App组件。router：使用Vue Router插件来启用页面路由。}).$mount('#app')：把Vue实例挂载到id为“app”的html元素中。
query参数和params参数的详解
页面是这样的：
比如在文本框中输入“ee”（双向绑定到keyword属性中），然后点击搜索，跳到搜索的页面。代码实现如下：
export default {
name: "Header",
data() {
return {
keyword: "",
};
},
methods: {
search() {
this.$router.push(`/search/${this.keyword}?qq='77'`);
this.keyword = "";
},
},
};
在 vue-devtools中是显示这样的：
老师总结的params参数和query参数传参的三种方法如下(我上面是第二种)：
路由组件能不能传递props数据?
路由组件能传递props数据，props数据有三种写法，分别是：
- 布尔值写法
- 对象写法
- 函数写法
以下的操作是在 路由规则文件 的js文件中（route.js文件）
这两张图不同之处只是props的写法不同，两种props的写法的效果都是一样的。
我的实践：
1. 布尔值写法
- 对象写法
点击搜索按钮之后：
- 函数写法
2.6.6.解决路由跳转时的NavigationDuplicated错误
连续点击搜索按钮时出现错误：
涉及的相关知识点：
解决办法：
../和../../的区别？
"../"和"../../"是相对文件路径中的两个符号，用于表示上级目录的路径。其中"../"表示上一级目录，即当前目录的上一层目录，而"../../"表示上二级目录，即当前目录的上两层目录。
如何引入全局组件？
在入口文件main.js中操作：
vue的版本和vuex的版本对应关系？
vue2对应的vuex的版本是3
vue3对应的vuex的版本是4
参考
使用vuex步骤
- 文件目录结构：
- 分别在search组件和home组件中写状态管理相关属性，并导出：
- 导入到new vuex.store方法中：
- 将store导入到入口文件
main.js中：
- 在页面中获取store中的state进行测试：
- 效果展示：
事件委派/事件委托
原理：利用了事件冒泡的原理。
例子：给父元素注册点击事件，当点击子元素时，由于子元素并没有注册点击事件，那么事件就会冒泡到父元素身上，由于父元素已经注册了点击事件，此时就会触发父元素身上的点击事件。
两种情况：
- 当父元素有很多子元素，需要给每一个子元素都注册事件时，此时循环给子元素注册事件将会降低性能。
- 当给父元素动态添加子元素时。
以上两种情况，如果子元素需要注册事件，都可以使用事件委托。给父元素注册事件，只需注册一次事件，所有的子元素都可以触发该事件。
了解
防抖和节流
防抖：
多次触发事件，以最后一次事件为准，并通过规定的时间后，才会触发最后一次的事件。
上图使用到的函数。
节流：
在规定的时间内，多次触发事件，只会以第一次触发事件为准，经过规定的时间后才允许触发下一次事件。
上图使用到的函数。
Mockjs
有关笔记：
需要安装插件:
npm install mockjs
注意安装命令中不是mock.js
相关说明请参考npm官网。
- 使用mockjs插件模拟的目录结构：
- 在
mockServe.js文件中导入相关json文件，并设置发起请求的路径和响应的数据。
- 在入口文件
main.js中引入mockServe.js模块。
-
在api文件夹中新增mockAjax.js的模块（名称自定义哦），在这个文件写mockjs请求的baseURL。
-
最后就可以使用axios发起请求了。
小知识：
json文件不需要向外暴露（export），他自己会暴露。
vue中通过v-for生成的标签如何修改其样式？
可以通过在v-for循环中使用动态绑定样式的方法来修改通过v-for生成的标签的样式。在标签中使用:style指令，然后通过计算属性或者直接传递对象来设置样式。例如，你可以在v-for的循环中添加一个计算属性来动态绑定不同的样式：
<template>
<div>
<div v-for="item in items" :key="item.id" :style="itemStyle(item)">
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '标签1' },
{ id: 2, name: '标签2' },
{ id: 3, name: '标签' },
],
};
},
methods: {
itemStyle(item) {
return {
color: item.id % 2 === 0 ? 'red' : 'blue',
fontWeight: item.id === 2 ? 'bold' : 'normal',
// 在这里可以添加更多的样式属性
};
},
},
};
</script>
在上面的例子中，我们通过计算属性itemStyle来根据每个item的具体属性返回不同的样式对象。你可以根据自己的需要在itemStyle中添加更多的样式属性。这样，每个通过v-for循环生成的标签都会根据每个item的属性而应用不同的样式。
组件之间的通信有哪些？
公用的组件和非路由组件位置
es6的函数默认参数格式怎么写？
es6函数的默认参数可以通过在函数参数列表中指定默认值来实现。格式如下：
function functionName(param1 = defaultValue1, param2 = defaultValue2, ...) {
// 函数体
}
请注意，函数名和参数名可以根据实际情况进行修改，defaultValue是参数的默认值。
例如，我们来定义一个接收两个参数的函数，其中第一个参数默认为0，第二个参数默认为1：
function sum(a = 0, b = 1) {
return a + b;
}
console.log(sum()); // 输出 1
console.log(sum(2, 3)); // 输出 5
vuex中的getters
this.$route.query = {};
错误的写法，会报这个错误：
Cannot assign to read only property ‘query’ of object
报错的原因是因为你试图将只读属性"query"赋值为一个空对象。在Vue.js框架中，this.$route.query是一个只读属性，你不能直接对其进行赋值操作。
要解决这个问题，可以使用Vue Router提供的方法来修改query的值。例如，你可以使用router.replace()方法来替代当前路由，同时传入新的query参数。下面是一个示例代码：
// 导入Vue Router
import { useRouter } from 'vue-router'
// 使用useRouter()方法获取router实例
const router = useRouter()
// 使用router.replace()方法替代当前路由，并传入新的query参数
router.replace({ query: {} })
通过这种方式，你可以在Vue Router中修改query的值，而不会报错。记得在代码中导入Vue Router的相关组件和方法，以确保能够正确使用。
let _this = this的解释
“let _this = this” 是用于指示当前作用域内的函数或方法中的"this"关键字。一般情况下，我们在使用函数或方法时，会将该函数或方法中的"this"存储在一个变量中，以便在函数或方法内部引用。这样可以避免在嵌套的函数中失去对外部函数的"this"引用的问题。
换句话说，通过"let _this = this"，我们可以在函数内部引用外部函数的"this"，而不会受到嵌套函数的影响。这在使用箭头函数、回调函数、或需要传递"this"引用的情况下特别有用。
简单来说，“let _this = this” 可以确保在函数或方法内部始终正确地引用当前的上下文。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
