vue js及基本内容

简介

Vue.js 是一个构建用户界面的渐进式框架，它被设计为能够轻松地被集成进项目的部分功能，或者用于构建完整的前端应用。以下是Vue.js的一些基本内容和核心概念：

1. 响应式数据绑定：

   • Vue.js 的核心特性之一是响应式数据绑定。这意味着当数据发生变化时，视图会自动更新。Vue.js 使用特殊的方法来观察和追踪数据的变化，并重新渲染视图。

2. 模板语法：

   • Vue.js 使用基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据上。模板可以包含插值表达式、指令以及组件等。

3. 组件系统：

   • Vue.js 提供了一个强大的组件系统，允许开发者将界面拆分成可复用的组件，每个组件拥有自己的视图和逻辑。

4. 指令：

   • Vue.js 提供了一系列内置指令（如 v-bind, v-model, v-on, v-if, v-for 等），用于在模板中执行DOM操作。

5. 计算属性和侦听器：

   • 计算属性（computed properties）是基于它们的依赖进行缓存的。只有当依赖项发生变化时，计算属性才会重新计算。
   • 侦听器（watchers）允许执行异步操作，这在计算属性中是不可能的。

6. 事件处理：

   • Vue.js 提供了一种方法来监听和处理DOM事件，使得事件处理逻辑更加简洁。

7. 条件渲染和列表渲染：

   • 使用 v-if, v-else-if, v-else 和 v-for 指令，Vue.js 可以轻松实现条件渲染和列表渲染。

8. 键（Key）：

   • 在渲染列表时，Vue.js 推荐使用唯一的 key 值来帮助Vue.js跟踪每个节点的身份，从而重用和重新排序现有元素。

9. 工具函数：

   • Vue.js 提供了一些全局API，如 Vue.set 用于向响应式对象添加属性，Vue.delete 用于删除属性。

10. 生命周期钩子：

    • 每个Vue实例在被创建时都会经历一系列的初始化过程，例如创建、编译、挂载等。在这个过程中，Vue实例会调用许多生命周期钩子函数，允许开发者在不同阶段添加自己的代码。

11. 过渡和动画：

    • Vue.js 提供了内置的过渡效果支持，使得进入、离开和列表的过渡变得简单。

12. 状态管理（Vuex）：

    • 对于大型应用，Vue.js 官方推荐使用 Vuex 来管理应用的所有组件的状态，实现集中式状态管理。

13. 路由管理（Vue Router）：

    • Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页应用变得简单。

14. 服务端渲染（SSR）：

    • Vue.js 支持服务端渲染，这意味着你可以将Vue应用渲染成静态的HTML，然后通过JavaScript激活。

基本语法

1. 变量声明：

2. var message = "Hello"; // 声明一个变量并赋值
   let age = 25; // 声明一个块级作用域变量
   const pi = 3.14; // 声明一个常量

3. 数据类型：

   • 基本数据类型：Number, String, Boolean, Undefined, Null, Symbol, BigInt
   • 复合数据类型：Object, Array, Function

4. 操作符：

   • 算术操作符：+, -, *, /, %, ++, --
   • 比较操作符：==, ===, !=, !==, >, <, >=, <=
   • 逻辑操作符：&&, ||, !
   • 赋值操作符：=, +=, -=, *=, /=, %=, **=（ES6）

5. 控制结构：

   • 条件语句：if, else if, else
   • 循环语句：for, while, do...while, for...in, for...of（ES6）

6. 函数：

   function greet(name) {
       return "Hello, " + name;
   }

7. 对象字面量：

   const person = {
       name: "John",
       age: 30,
       greet: function() {
           return "Hello, " + this.name;
       }
   };

8. 数组字面量：

   const fruits = ["apple", "banana", "cherry"];

9. 模板字符串：（ES6）

   const name = "John";
   const greeting = `Hello, ${name}!`;

10. 解构赋值：（ES6）

const [first, second, third] = [1, 2, 3];

1. 箭头函数：（ES6）

   const greet = (name) => "Hello, " + name;

   javascript常用函数

1. 数组方法：

   • map()：创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
   • filter()：创建一个新数组，包含通过所提供函数实现的测试的所有元素。
   • reduce()：对数组中的值进行汇总，将其减少为单个返回值。
   • forEach()：为数组中的每个元素执行一次提供的函数。

2. 字符串方法：

   • slice()：提取字符串的某个部分，并返回一个新的字符串。
   • split()：使用指定的分隔符将字符串分割成子字符串数组。
   • replace()：在字符串中搜索匹配项，并将其替换为另一个字符串。
   • trim()：从字符串的开始和结束部分删除空白字符。

3. 数学函数：

   • Math.round()：四舍五入数字。
   • Math.random()：返回0到1之间的随机数。
   • Math.max()：返回最大的数字。
   • Math.min()：返回最小的数字。

4. 日期和时间函数：

   • Date()：创建一个新的日期对象。
   • Date.now()：返回当前时间的时间戳。

5. JSON 方法：

   • JSON.stringify()：将JavaScript值（对象或值）转换为JSON字符串。
   • JSON.parse()：将JSON字符串转换为JavaScript值。

事件

1. 事件类型

• UI 事件：与用户界面相关的事件，如 load（页面加载完成）、DOMContentLoaded（DOM 加载完成，不等待样式表、图像和子框架完成加载）。
• 鼠标事件：与鼠标相关的事件，如 click（鼠标单击）、dblclick（鼠标双击）、mouseover（鼠标指针移动到元素上）、mouseout（鼠标指针移出元素）。
• 键盘事件：与键盘相关的事件，如 keydown（键盘按键被按下）、keyup（键盘按键被释放）。
• 表单事件：与表单相关的事件，如 submit（表单提交）、reset（表单重置）、change（表单元素的值改变）。
• 触摸事件：与触摸屏幕相关的事件，如 touchstart、touchend、touchmove。
• 媒体事件：与音频/视频播放相关的事件，如 play、pause、ended。

2. 事件监听器

事件监听器是处理事件的函数。你可以使用 addEventListener 方法为元素添加事件监听器：

element.addEventListener(event, function, useCapture);

• element：要添加事件监听器的元素。
• event：事件名称，如 click。
• function：当事件被触发时要执行的函数。
• useCapture：一个布尔值，表示是否在捕获阶段还是冒泡阶段执行事件处理程序。默认为 false，表示在冒泡阶段执行。

3. 事件对象

当事件被触发时，会创建一个事件对象，它包含了事件的详细信息，如事件类型、目标元素、触发事件的元素等。这个对象会自动传递给事件处理函数：

function handleClick(event) {
    console.log(event.type); // 事件类型
    console.log(event.target); // 触发事件的元素
}

4. 阻止事件默认行为

有时候你可能想要阻止事件的默认行为，比如阻止链接跳转或表单提交。你可以使用 event.preventDefault() 方法：

function handleLinkClick(event) {
    event.preventDefault();
    console.log("链接被点击，但未跳转");
}

5. 停止事件冒泡

你可以使用 event.stopPropagation() 方法来阻止事件继续传播到父元素：

function handleChildClick(event) {
    event.stopPropagation();
    console.log("子元素被点击，事件不会冒泡到父元素");
}

示例代码

// 获取按钮元素
const button = document.getElementById('myButton');

// 为按钮添加点击事件监听器
button.addEventListener('click', function(event) {
    console.log('按钮被点击');
    event.preventDefault(); // 阻止默认行为
});

// 为文档添加键盘事件监听器
document.addEventListener('keydown', function(event) {
    console.log(`按下了 ${event.key} 键`);
});