奔跑吧邓邓子

Vue从入门到精通：前端开发的基石之旅

一、Vue 简介
- 1.1 渐进式框架的含义
- 1.2 Vue 在前端开发中的优势
二、Vue 环境搭建
- 2.1 安装 Node.js 和 npm
- 2.2 全局安装 Vue CLI
- 2.3 使用 Vue CLI 创建 Vue 项目
三、Vue 基础语法
- 3.1 数据绑定
- - 3.1.1 插值语法
  - 3.1.2 指令语法
- 3.2 计算属性和侦听器
- - 3.2.1 计算属性
  - 3.2.2 侦听器
- 3.3 条件渲染与列表渲染
- - 3.3.1 v-if、v-else-if、v-else
  - 3.3.2 v-show
四、Vue 组件化开发
- 4.1 组件的基本概念
- 4.2 组件的定义与注册
- 4.3 组件间通信
- - 4.3.1 props 传值
  - 4.3.2 自定义事件
  - 4.3.3 事件总线
五、Vue 的生命周期
- 5.1 生命周期的概念
- 5.2 生命周期钩子函数
- - 5.2.1 创建阶段
  - 5.2.2 挂载阶段
  - 5.2.3 更新阶段
  - 5.2.4 销毁阶段
六、Vue 常用指令详解
- 6.1 v-html 指令
- 6.2 v-on 指令
- 6.3 v-bind 指令
七、总结与展望

一、Vue 简介

Vue 是一套用于构建用户界面的渐进式 JavaScript 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或已有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.1 渐进式框架的含义

“渐进式” 意味着 Vue 可以根据项目的需求，逐步引入其功能。开发者可以从一个非常轻量、简洁的基础开始，随着项目的增长，根据实际需要不断引入更多的组件和功能。例如，在一个简单的小型项目中，可能只需要使用 Vue 的基本数据绑定和指令系统；而在构建复杂的大型单页应用时，则可以引入 Vue Router 进行路由管理、Vuex 进行状态管理等。Vue 不会强迫开发者一开始就使用其所有功能，这种灵活性使得项目的起点低、上手快，同时也方便项目在不同阶段进行扩展和升级。

1.2 Vue 在前端开发中的优势

轻量级：Vue.js 的核心库非常小，压缩后只有几十 KB，加载速度快，运行效率高。这使得它在网络性能有限的情况下，也能快速加载和运行，为用户提供流畅的体验。
易于上手：Vue 的语法简洁明了，类似于 HTML 和 JavaScript 的组合，对于有一定前端基础的开发者来说，很容易理解和使用。同时，Vue 提供了详细且易懂的官方文档，涵盖了从基础到高级的所有知识点，并配有大量示例代码，帮助开发者快速入门。
组件化开发：组件是 Vue.js 的核心功能之一，可以将应用程序分割成可重用的自定义组件。每个组件都拥有自己的逻辑、样式和模板，使代码更易于维护和复用。例如，在一个电商网站中，可以将产品列表、购物车、用户评论等功能分别封装成不同的组件，这样不仅代码结构清晰，还可以分别对这些功能进行独立测试和维护。
生态丰富：Vue 拥有一个庞大且活跃的社区，提供了丰富的官方库和大量的第三方插件、工具和模板，帮助开发者高效开发。比如 Vue Router 用于管理单页应用的路由，Vuex 用于管理应用的全局状态，Vue CLI 用于快速搭建 Vue 项目等。此外，还有像 Element UI、Vuetify 等 UI 组件库，可以帮助开发者快速构建美观的用户界面。
灵活性：Vue 既可以作为简单的视图层库，嵌入到现有的 HTML 页面中，增强页面的交互性；也可以通过引入各种插件和工具，扩展为功能强大的前端框架，用于构建复杂的单页应用。它可以与其他库或已有项目无缝集成，开发者可以根据需求选择使用 Vue 的部分功能或全部功能。
响应式数据绑定：Vue 提供了双向数据绑定，使得数据和视图始终保持同步，简化了数据更新和界面渲染的流程。当数据发生变化时，相关的视图会自动更新，无需手动操作 DOM；反之，当用户在视图上进行操作导致数据变化时，数据也会实时更新，这种特性大大提高了开发效率和用户体验。

二、Vue 环境搭建

在开始使用 Vue 进行项目开发之前，需要先搭建好 Vue 的开发环境。这主要包括安装 Node.js 和 npm，以及使用 npm 全局安装 Vue CLI。下面将详细介绍这些步骤。

2.1 安装 Node.js 和 npm

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许在服务端运行 JavaScript。Vue CLI 依赖于 Node.js，因此必须首先安装 Node.js ，而 npm（Node Package Manager）是 Node.js 的包管理器，用于安装、管理和发布 JavaScript 包，它会随 Node.js 一起安装。以下是安装步骤：

下载：访问 Node.js 官网（https://nodejs.org/ ），在官网首页可以看到推荐的两个版本，LTS（长期支持版）适合稳定的生产环境，Current（最新版）包含最新的特性。根据自己的需求选择对应的操作系统安装包进行下载，如 Windows 系统可选择 Windows 安装包（.msi）-64 位。如果需要下载历史版本，则点击【其他下载】，滑到底下，点【以往的版本】找到想要的版本下载。
安装：以 Windows 系统为例，下载完成后，双击.msi 文件开始安装。安装过程中，大部分步骤可以直接点击 “Next” 下一步，安装路径可以自行选择，也可以使用默认路径。安装程序会自动将 Node.js 添加到系统环境变量中。在安装过程中，可能会出现一个勾选选项 “Automatically install the necessary tools. Note that this will also install Chocolatey.”，意思是自动安装必要的工具，注意这也将安装 Chocolatey，Chocolatey 是一个 Windows 环境下的软件包管理工具，根据个人需求选择是否勾选，简单使用的话不勾选也可以。
检查版本：安装完成后，按下 Win+R 键，输入 “cmd” 打开命令提示符，在命令行中输入 “node -v” 和 “npm -v”，如果分别显示出 Node.js 和 npm 的版本号，如 “v18.16.0”“9.5.1”，则说明安装成功。

2.2 全局安装 Vue CLI

Vue CLI 是 Vue.js 官方提供的脚手架工具，它可以帮助开发者快速搭建 Vue 项目，减少重复性工作。通过 Vue CLI，可以快速创建项目结构、安装依赖和配置开发环境，并选择不同的模板和配置选项，以满足不同开发需求。此外，Vue CLI 还提供了热重载等开发工具，极大地提高了开发效率。在安装完 Node.js 和 npm 后，可以使用 npm 全局安装 Vue CLI，步骤如下：

打开命令行工具：在 Windows 系统中，可以使用 “命令提示符” 或 “PowerShell”；在 Mac 和 Linux 系统中，可以使用 “终端”。
执行安装命令：在命令行中输入 “npm install -g @vue/cli”，“-g” 表示全局安装，该命令会从 npm 仓库下载 Vue CLI 并安装到全局环境中。安装过程中，命令行界面会显示安装进度和相关信息，如果网络正常，等待安装完成即可。安装过程可能会因为网络状况或其他原因出现问题，如果安装失败，可以尝试更换网络或重新执行安装命令，也可以查阅相关错误信息解决问题。
确认安装成功：安装完成后，在命令行中输入 “vue --version”，如果显示出 Vue CLI 的版本号，如 “5.0.8”，则说明安装成功。也可以输入 “vue” 命令，查看 Vue CLI 的帮助信息，进一步确认安装是否正确，若能正常显示帮助信息，表明 Vue CLI 已正确安装并可使用。

2.3 使用 Vue CLI 创建 Vue 项目

安装好 Vue CLI 后，就可以使用它来创建 Vue 项目了。以下是创建 Vue 项目的具体步骤：

创建项目：打开命令行工具，进入你希望创建项目的目录，例如要在 “D:\projects” 目录下创建项目，先在命令行中输入 “d:” 切换到 D 盘，再输入 “cd projects” 进入 “projects” 目录。然后执行命令 “vue create my - vue - project”，“my - vue - project” 是项目名称，你可以根据实际需求自定义。
选择配置：执行上述命令后，Vue CLI 会提供一个交互式的界面，让你选择项目的配置。有两种方式：
- 默认配置：如果对 Vue 开发还不太熟悉，或者希望快速创建一个基础项目，可以直接选择默认配置，按回车键即可。默认配置会使用推荐的设置，包括安装 Babel（用于将 ES6 + 代码转换为浏览器能识别的 ES5 代码）、ESLint（用于检查和规范代码风格）等基本工具。
- 手动配置：如果有特定的需求，比如需要使用 Vue Router 进行路由管理、Vuex 进行状态管理，或者需要自定义其他特性，可以选择 “Manually select features” 手动选择特性。通过键盘上下键移动光标，空格键选择或取消选择，回车键确认选择。例如，使用空格键勾选 “Router”“Vuex” 等选项，然后按回车键继续。选择完特性后，还会有一些关于这些特性的详细配置选项，如选择路由模式（hash 或 history）等，根据项目需求进行选择即可。
进入项目目录：项目创建完成后，在命令行中输入 “cd my - vue - project”，进入项目目录。此时，项目目录下会生成一系列文件和文件夹，包含项目的基本结构和配置文件。其中，“node_modules” 文件夹用于存放项目的依赖包；“public” 文件夹用于存放静态资源文件，如 “index.html” 是项目的入口 HTML 文件；“src” 文件夹是项目的主要源代码目录，里面包含 “assets”（存放静态资源，如图片等）、“components”（存放组件文件）、“App.vue”（应用的根组件）、“main.js”（应用的入口文件）等。
启动开发服务器：在项目目录下，执行命令 “npm run serve”，该命令会启动一个开发服务器，默认监听 8080 端口。命令执行后，命令行界面会显示编译信息和服务器地址，如 “INFO Listening at http://localhost:8080 ”。此时，打开浏览器，访问 “http://localhost:8080”，就可以看到 Vue 项目的初始页面了。在开发过程中，当修改项目源代码时，开发服务器会自动检测到更改并重新编译，浏览器页面也会实时更新，这就是 Vue CLI 提供的热重载功能，大大提高了开发效率。

三、Vue 基础语法

3.1 数据绑定

数据绑定是 Vue.js 的核心功能之一，它使得数据与 DOM 之间建立了一种响应式的联系，即当数据发生变化时，DOM 会自动更新；反之，当用户在 DOM 上进行操作导致数据变化时，数据也会实时更新。Vue 提供了两种主要的数据绑定方式：插值语法和指令语法。

3.1.1 插值语法

插值语法使用双大括号 {{}} 来将数据渲染到 HTML 页面中。双大括号中的内容是一个 JavaScript 表达式，它会被解析并计算出结果，然后将结果渲染到对应的 DOM 位置上。例如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue插值语法示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 文本插值，显示message数据属性的值 -->
        <p>{{ message }}</p>
        <!-- 调用对象方法，将name属性值转换为大写后显示 -->
        <p>{{ name.toUpperCase() }}</p>
        <!-- 进行数学运算并显示结果 -->
        <p>{{ 2 + 3 }}</p>
        <!-- 使用三目运算符根据条件显示不同内容 -->
        <p>{{ isShow ? '显示内容' : '不显示内容' }}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!',
                name: 'John',
                isShow: true
            }
        });
    </script>
</body>

</html>

在上述示例中，{{ message }} 会将 Vue 实例中 message 数据属性的值渲染到

标签内；{{ name.toUpperCase() }} 会调用 name 属性的 toUpperCase 方法，将其值转换为大写后再渲染；{{ 2 + 3 }} 进行了简单的数学运算并显示结果；{{ isShow ? ‘显示内容’ : ‘不显示内容’ }} 使用三目运算符根据 isShow 的值来决定显示的内容。

除了文本插值，插值语法还可以用于 HTML 属性绑定，但需要注意的是，直接在 HTML 属性中使用插值语法时，有些属性可能无法正常工作，此时可以使用 v-bind 指令来替代。例如：

<div id="app">
    <!-- 错误示例，src属性无法识别插值语法 -->
    <img src="{{ imageUrl }}" alt="图片">
    <!-- 正确示例，使用v-bind指令绑定src属性 -->
    <img v-bind:src="imageUrl" alt="图片">
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            imageUrl: 'https://example.com/image.jpg'
        }
    });
</script>

3.1.2 指令语法

指令是带有 v- 前缀的特殊属性，它们可以在 DOM 元素上添加特殊的行为。Vue 提供了许多内置指令，如 v-bind、v-model、v-on 等，这些指令可以帮助我们实现数据绑定、表单输入处理、事件监听等功能。

v-bind 指令：用于动态绑定 HTML 元素的属性，它可以将 Vue 实例中的数据与 HTML 元素的属性进行绑定，实现单向数据绑定。当数据发生变化时，对应的 HTML 属性也会随之更新。v-bind 的完整语法是 v-bind:属性名=“表达式”，也可以使用简写形式 :属性名=“表达式”。例如：

<div id="app">
    <!-- 绑定class属性，根据isActive的值决定是否添加active类 -->
    <div v-bind:class="{ active: isActive }">这是一个div</div>
    <!-- 简写形式 -->
    <div :class="{ active: isActive }">这是另一个div</div>
    <!-- 绑定style属性，动态设置字体大小 -->
    <p v-bind:style="{ fontSize: fontSize + 'px' }">这是一段文字</p>
    <!-- 简写形式 -->
    <p :style="{ fontSize: fontSize + 'px' }">这是另一段文字</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isActive: true,
            fontSize: 16
        }
    });
</script>

在上述示例中，第一个

通过 v-bind:class 绑定了一个对象，根据 isActive 的布尔值来决定是否添加 active 类；第二个

使用了简写形式。

标签通过 v-bind:style 动态设置了 fontSize 样式属性，同样也展示了完整写法和简写形式。

v-model 指令：主要用于表单元素，实现双向数据绑定。它会自动监听表单元素的输入事件，并将输入的值同步到 Vue 实例的数据中；反之，当数据发生变化时，表单元素的值也会相应更新。v-model 支持多种表单元素，如、、<select> 等。例如：</li> </ul> <pre><code class="prism language-typescript"><div id="app">  <input type="text" v-model="inputValue"> <p>输入的值是：{{ inputValue }}</p>  <input type="checkbox" v-model="checked"> <p>复选框状态：{{ checked }}</p>  <select v-model="selected"> <option value="option1">选项1</option> <option value="option2">选项2</option> </select> <p>选择的值是：{{ selected }}</p> </div> <script> new Vue({ el: '#app', data: { inputValue: '', checked: false, selected: 'option1' } }); </script> </code></pre> 在这个示例中，<input type=“text”> 输入框通过 v-model 与 inputValue 数据属性双向绑定，用户输入的内容会实时更新 inputValue 的值，同时 inputValue 的变化也会反映在输入框中；复选框和下拉选择框同理。 <ul> <li>v-on 指令：用于监听 DOM 事件，当事件触发时，会执行绑定的方法。它可以让我们在 Vue 中方便地处理用户的交互操作，如点击、鼠标移动、键盘输入等事件。v-on 的完整语法是 v-on:事件名=“方法名”，也可以使用简写形式 @事件名=“方法名”。例如：</li> </ul> <pre><code class="prism language-typescript"><div id="app">  <button v-on:click="handleClick">点击我</button>  <button @click="handleClick">点击我</button>  <input type="text" v-on:input="handleInput">  <input type="text" @input="handleInput"> </div> <script> new Vue({ el: '#app', methods: { handleClick() { alert('按钮被点击了！'); }, handleInput(event) { console.log('输入框内容：', event.target.value); } } }); </script> </code></pre> 上述代码中，<button> 按钮通过 v-on:click 或 @click 绑定了 handleClick 方法，点击按钮时会弹出提示框；<input> 输入框通过 v-on:input 或 @input 绑定了 handleInput 方法，当输入框内容发生变化时，会在控制台输出输入框的内容。 <h3>3.2 计算属性和侦听器</h3> 在 Vue 开发中，计算属性和侦听器是两个非常重要的特性，它们可以帮助我们处理复杂的数据逻辑和响应数据变化。计算属性主要用于基于已有数据进行复杂计算并返回一个新的值，且具有缓存特性；而侦听器则用于监听数据的变化，并在数据变化时执行特定的操作。 <h4>3.2.1 计算属性</h4> 计算属性是基于 Vue 实例的数据进行计算的属性，它可以将复杂的逻辑运算封装在一个函数中，然后在模板中像普通数据属性一样使用。计算属性定义在 Vue 实例的 computed 选项中，具有缓存机制，只有当它依赖的数据发生变化时，才会重新计算，否则会直接返回缓存的结果，这使得计算属性在性能上优于普通方法。例如： <pre><code class="prism language-typescript"><div id="app"> <p>姓：<input v-model="firstName"></p> <p>名：<input v-model="lastName"></p>  <p>全名：{{ fullName }}</p> </div> <script> new Vue({ el: '#app', data: { firstName: '张', lastName: '三' }, computed: { fullName() { return this.firstName + this.lastName; } } }); </script> </code></pre> 在这个例子中，fullName 是一个计算属性，它依赖于 firstName 和 lastName 这两个数据属性。当 firstName 或 lastName 发生变化时，fullName 会自动重新计算并更新显示。如果多次访问 fullName，只要 firstName 和 lastName 没有变化，就不会重新执行计算函数，而是直接返回缓存的结果。 计算属性还可以包含 setter 和 getter 方法，默认情况下只需要定义 getter 方法。如果需要在设置计算属性的值时执行一些逻辑，可以同时定义 setter 方法。例如： <pre><code class="prism language-typescript"><div id="app"> <p> <input v-model="fullName"> </p> </div> <script> new Vue({ el: '#app', data: { firstName: '张', lastName: '三' }, computed: { fullName: { get() { return this.firstName + this.lastName; }, set(newValue) { const names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[names.length - 1]; } } } }); </script> </code></pre> 在上述代码中，当设置 fullName 的值时，setter 方法会被调用，它会将新值按空格分割成数组，然后分别更新 firstName 和 lastName 的值。 <h4>3.2.2 侦听器</h4> 侦听器用于监听 Vue 实例中数据的变化，并在数据变化时执行相应的回调函数。它可以用于执行一些副作用操作，如发送网络请求、更新 DOM 等。在 Vue 中，可以使用 $watch 方法或在 watch 选项中定义侦听器。例如： <pre><code class="prism language-typescript"><div id="app"> <p> <input v-model="message"> </p> </div> <script> new Vue({ el: '#app', data: { message: '' }, watch: { message(newValue, oldValue) { console.log('消息已更改，新值：', newValue, '，旧值：', oldValue); } } }); </script> </code></pre> 在这个例子中，通过 watch 选项监听了 message 数据属性的变化。当 message 的值发生改变时，会触发回调函数，在控制台输出新值和旧值。 除了监听单个数据属性，还可以监听对象或数组的变化。对于对象，需要注意的是，如果要监听对象内部属性的变化，需要使用深度监听（deep: true）。例如： <pre><code class="prism language-typescript"><div id="app"> <p> <input v-model="user.name"> </p> </div> <script> new Vue({ el: '#app', data: { user: { name: '小明' } }, watch: { user: { handler(newValue, oldValue) { console.log('用户信息已更改，新值：', newValue, '，旧值：', oldValue); }, deep: true } } }); </script> </code></pre> 在上述代码中，通过设置 deep: true 来深度监听 user 对象的变化，这样当 user.name 发生改变时，也能触发回调函数。 另外，还可以使用 $watch 方法在组件的生命周期钩子函数中动态添加侦听器，并且 $watch 方法返回一个取消观察函数，用于停止触发回调。例如： <pre><code class="prism language-typescript"><div id="app"> <button @click="count++">增加数值</button> </div> <script> new Vue({ el: '#app', data: { count: 0 }, mounted() { const unwatch = this.$watch('count', (newValue, oldValue) => { console.log('count已更改，新值：', newValue, '，旧值：', oldValue); }); // 取消监听 setTimeout(() => { unwatch(); }, 5000); } }); </script> </code></pre> 在这个示例中，在 mounted 生命周期钩子函数中使用 $watch 监听 count 的变化，5 秒后通过调用返回的取消观察函数 unwatch 停止监听。 <h3>3.3 条件渲染与列表渲染</h3> 在 Vue 中，条件渲染和列表渲染是构建动态用户界面的重要技术。条件渲染允许根据条件来决定是否渲染某个元素或组件，而列表渲染则用于循环渲染一组数据。 <h4>3.3.1 v-if、v-else-if、v-else</h4> v-if、v-else-if 和 v-else 是 Vue 中用于条件渲染的指令。v-if 指令根据表达式的真假来决定是否渲染其所在的元素或组件，如果表达式为真，则渲染；否则，不渲染。v-else-if 用于添加多个条件判断，v-else 则用于表示前面条件都不成立时的默认情况。它们必须紧跟在 v-if 或 v-else-if 之后，中间不能插入其他元素。例如： <pre><code class="prism language-typescript"><div id="app"> <button @click="status = 'one'">显示内容一</button> <button @click="status = 'two'">显示内容二</button> <button @click="status = 'other'">显示其他</button> <div v-if="status === 'one'"> <p>这是内容一</p> </div> <div v-else-if="status === 'two'"> <p>这是内容二</p> </div> <div v-else> <p>没有匹配的内容</p> </div> </div> <script> new Vue({ el: '#app', data: { status: 'one' } }); </script> </code></pre> 在上述代码中，通过点击不同的按钮来改变 status 的值，从而根据 status 的值决定渲染哪个 <div> 元素及其内部内容。当 status 为 ‘one’ 时，显示内容一；为 ‘two’ 时，显示内容二；为其他值时，显示没有匹配的内容。 <h4>3.3.2 v-show</h4> v-show 指令也用于控制元素的显示与隐藏，它通过设置元素的 display 样式来实现。与 v-if 不同的是，v-show 无论条件是否成立，元素都会被渲染到 DOM 中，只是通过 CSS 样式来控制显示或隐藏。因此，v-show 适用于需要频繁切换显示状态的场景，因为它没有创建和销毁 DOM 元素的开销；而 v-if 适用于条件不经常变化的场景，因为它在条件为假时，会将元素从 DOM 中移除，从而节省内存。例如： <pre><code class="prism language-typescript"><div id="app"> <button @click="isShow =!isShow">切换显示</button> <div v-if="isShow"> <p>使用v-if，条件为真时显示</p> </div> <div v-show="isShow"> <p>使用v-show，条件为真时显示</p> </div> </div> <script> new Vue({ el: '#app', data: { isShow: true } }); </script> </code></pre> 在这个例子中，点击按钮可以切换 isShow 的值，从而控制两个 <div> 的显示与隐藏。 <h2>四、Vue 组件化开发</h2> <h3>4.1 组件的基本概念</h3> 组件是 Vue.js 应用程序中的独立和可重用部分，每个组件都有自己的逻辑、模板和样式，组件通过组合可以构建复杂的应用程序。组件可以看作是自定义的 HTML 元素，它将相关的功能和 UI 封装在一起，使得代码更易于维护和复用。例如，在一个电商网站中，可以将商品列表、购物车、商品详情等部分分别封装成不同的组件。以商品列表组件为例，它可以包含商品数据的展示逻辑、样式以及与用户交互的方法，如添加商品到购物车等操作。当在不同页面需要展示商品列表时，只需引入该组件即可，无需重复编写代码。 一个基本的 Vue 组件通常由以下几个部分组成： <ul> <li>模板（template）：定义了组件的 HTML 结构，描述了组件在页面上的呈现方式。例如：</li> </ul> <pre><code class="prism language-typescript"><template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template> </code></pre> 在这个模板中，使用双大括号插值语法展示了 title 和 content 数据。 <ul> <li>数据（data）：组件的数据来源，它是一个函数，返回一个对象，对象中的属性就是组件的数据。数据会响应式地更新组件的视图。例如：</li> </ul> <pre><code class="prism language-typescript"><script> export default { data() { return { title: '组件标题', content: '组件内容' }; } }; </script> </code></pre> 这里定义了 title 和 content 两个数据属性，并赋予了初始值。 <ul> <li>方法（methods）：包含组件的业务逻辑和事件处理函数。当用户在组件上进行操作，如点击按钮时，会触发相应的方法。例如：</li> </ul> <pre><code class="prism language-typescript"><script> export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; } } }; </script> </code></pre> 在这个例子中，increment 方法用于增加 count 的值，当按钮点击事件触发时，会调用该方法。 <ul> <li>样式（style）：定义组件的 CSS 样式，用于美化组件的外观。可以使用普通的 CSS，也可以使用预处理器如 Sass、Less 等。例如：</li> </ul> <pre><code class="prism language-typescript"><style scoped> div { background - color: lightblue; padding: 10px; } </style> </code></pre> 这里使用 scoped 属性确保样式只作用于当前组件，避免与其他组件的样式冲突。 <h3>4.2 组件的定义与注册</h3> 在 Vue 中，组件的定义和注册有两种方式：全局注册和局部注册。 <ul> <li>全局注册：使用 Vue.component(tagName, options) 进行全局注册，这样注册的组件可以在应用程序的任何地方使用。全局注册适用于项目比较简单，且组件在多个地方都会用到的场景。例如，在 main.js 中进行全局注册：</li> </ul> <pre><code class="prism language-typescript">import Vue from 'vue'; import MyComponent from './components/MyComponent.vue'; Vue.component('MyComponent', MyComponent); new Vue({ el: '#app', render: h => h(App) }).$mount('#app'); </code></pre> 在上述代码中，通过 Vue.component 将 MyComponent 注册为全局组件，组件名为 MyComponent，之后在整个应用中都可以像使用普通 HTML 标签一样使用 <MyComponent>。 <ul> <li>局部注册：在一个组件内部使用 components 选项做组件的局部注册，这样注册的组件只能在注册过的 Vue 实例中使用。局部注册更加灵活，适用于大型复杂项目，可以减少全局命名空间的污染。例如，在 ParentComponent.vue 中局部注册 MyComponent：</li> </ul> <pre><code class="prism language-typescript"><template> <div> <MyComponent></MyComponent> </div> </template> <script> import MyComponent from './MyComponent.vue'; export default { components: { MyComponent } }; </script> </code></pre> 在这个例子中，在 ParentComponent 组件内部通过 components 选项注册了 MyComponent，因此 MyComponent 只能在 ParentComponent 及其子组件中使用。 <h3>4.3 组件间通信</h3> 在 Vue 组件化开发中，组件之间经常需要进行数据传递和通信。常见的组件间通信方式有 props 传值、自定义事件和事件总线等。 <h4>4.3.1 props 传值</h4> props 是父组件向子组件传递数据的主要方式。通过 props，父组件可以将数据传递给子组件，子组件通过定义 props 来接收这些数据。 在父组件中，使用自定义属性（props）向子组件传递数据，例如： <pre><code class="prism language-typescript"><template> <div> <ChildComponent :message="parentMessage"></ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent!' }; } }; </script> </code></pre> 在上述代码中，父组件将 parentMessage 数据通过 :message 传递给 ChildComponent 组件，这里的 message 是自定义的 prop 名称，可以根据实际需求命名。 在子组件中，通过 props 选项接收父组件传递的数据，例如： <pre><code class="prism language-typescript"><template> <div> {{ message }} </div> </template> <script> export default { props: ['message'] }; </script> </code></pre> 在 ChildComponent 组件中，通过 props: [‘message’] 声明接收名为 message 的 prop，这样就可以在组件中使用 message 数据了。 注意事项： <ul> <li>props 是单向绑定的，即父组件数据变化会影响子组件，但子组件不能直接修改 props 的值，如果需要修改，应该在子组件中定义一个新的数据属性，将 props 的值赋给它，然后修改这个新属性。</li> <li>可以对 props 进行类型验证和设置默认值。例如：</li> </ul> <pre><code class="prism language-typescript">props: { message: { type: String, required: true, default: '默认消息' } } </code></pre> 这里对 message prop 进行了类型验证，要求是字符串类型，并且是必需的，如果没有传递，将使用默认值 ‘默认消息’。 <h4>4.3.2 自定义事件</h4> 子组件通过自定义事件向父组件传递数据，当子组件发生某些事件时，它可以触发自定义事件，并将数据传递给父组件。 在子组件中，使用 $emit 方法触发自定义事件并传递数据，例如： <pre><code class="prism language-typescript"><template> <div> <button @click="sendData">Send Data to Parent</button> </div> </template> <script> export default { methods: { sendData() { const data = 'Hello from child!'; this.$emit('childEvent', data); } } }; </script> </code></pre> 在上述代码中，当按钮被点击时，sendData 方法被调用，它通过 this.$emit(‘childEvent’, data) 触发了名为 childEvent 的自定义事件，并将数据 ‘Hello from child!’ 传递出去。 在父组件中，通过 v-on 或 @ 监听子组件的自定义事件，并定义处理函数来接收数据，例如： <pre><code class="prism language-typescript"><template> <div> <ChildComponent @childEvent="handleChildEvent"></ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleChildEvent(data) { console.log('Data from child:', data); } } }; </script> </code></pre> 在父组件中，通过 @childEvent=“handleChildEvent” 监听 ChildComponent 组件触发的 childEvent 事件，当事件触发时，会调用 handleChildEvent 方法，并将子组件传递的数据作为参数传入。 使用场景： <ul> <li>当子组件需要通知父组件某些操作的结果，如表单提交成功、删除数据等操作完成后，将结果反馈给父组件。</li> <li>子组件与父组件进行交互，如子组件请求父组件提供某些数据或执行某些方法时，通过自定义事件传递请求信息。</li> </ul> <h4>4.3.3 事件总线</h4> 事件总线是一种实现非父子组件通信的方式，它通过创建一个公共的事件中心，使得任何组件都可以向这个事件中心发布事件和监听事件。 <ul> <li>创建事件总线：通常创建一个空的 Vue 实例作为事件总线，例如，在 eventBus.js 文件中：</li> </ul> <pre><code class="prism language-typescript">import Vue from 'vue'; export const eventBus = new Vue(); </code></pre> 在组件中使用事件总线： <ul> <li>发送方组件：引入事件总线，并使用 $emit 方法触发事件并传递数据，例如：</li> </ul> <pre><code class="prism language-typescript"><template> <div> <button @click="sendMessage">Send Message</button> </div> </template> <script> import { eventBus } from './eventBus.js'; export default { methods: { sendMessage() { const message = 'This is a message from sender'; eventBus.$emit('messageEvent', message); } } }; </script> </code></pre> 在上述代码中，当按钮点击时，sendMessage 方法通过事件总线 eventBus 触发了 messageEvent 事件，并传递了消息数据。 <ul> <li>接收方组件：引入事件总线，并在组件的生命周期钩子函数中使用 $on 方法监听事件，例如：</li> </ul> <pre><code class="prism language-typescript"><template> <div> <p>{{ receivedMessage }}</p> </div> </template> <script> import { eventBus } from './eventBus.js'; export default { data() { return { receivedMessage: '' }; }, created() { eventBus.$on('messageEvent', (message) => { this.receivedMessage = message; }); } }; </script> </code></pre> 在接收方组件的 created 生命周期钩子函数中，通过事件总线 eventBus 监听 messageEvent 事件，当事件触发时，会将传递的数据赋值给 receivedMessage 数据属性，从而在模板中展示出来。 需要注意的是，事件总线在小型项目中使用较为方便，但在大型项目中，由于组件之间的通信变得复杂，事件总线可能会导致代码难以维护，此时可以考虑使用 Vuex 等状态管理工具来管理组件间的通信和数据共享。 <h2>五、Vue 的生命周期</h2> <h3>5.1 生命周期的概念</h3> Vue 的生命周期指的是 Vue 实例从创建到销毁的整个过程，在这个过程中，Vue 实例会经历多个阶段，每个阶段都有特定的任务和事件发生。理解 Vue 的生命周期对于开发者来说非常重要，因为它提供了在不同阶段执行自定义代码的机会，比如数据初始化、DOM 操作、异步请求、资源清理等。通过合理利用生命周期钩子函数，开发者可以更好地控制组件的行为，优化应用的性能，并确保资源的有效管理。 <h3>5.2 生命周期钩子函数</h3> 在 Vue 的生命周期中，提供了一系列的钩子函数（也称为生命周期钩子），这些钩子函数会在特定的阶段自动被调用，开发者可以在钩子函数中编写自己的代码逻辑。Vue 的生命周期钩子函数主要分为四个阶段：创建阶段、挂载阶段、更新阶段和销毁阶段。 <h4>5.2.1 创建阶段</h4> <ul> <li>beforeCreate 钩子函数：在实例初始化之后，数据观测（data observation）和事件配置（event setup）之前被调用。在这个阶段，Vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初始化，因此无法访问 methods、data、computed 等上的方法和数据。通常可以在这个钩子函数中进行一些插件初始化的操作，比如初始化一些全局的状态管理插件或日志记录插件等。虽然在这个阶段无法访问实例的属性和方法，但可以进行一些与实例无关的操作，例如在控制台输出一条日志信息，表明组件即将创建。</li> <li>created 钩子函数：在实例创建完成后被调用。此时，Vue 实例已经完成了数据观测、属性和方法的运算，watch/event 事件回调也已配置完成，因此可以访问到组件的 data 和 methods，并且可以进行数据初始化、调用 API 等操作。在实际开发中，经常会在 created 钩子函数中发起异步请求，获取初始化数据，例如从后端服务器获取用户信息、商品列表等数据，并将其赋值给组件的数据属性，以便在模板中进行展示。也可以在这个钩子函数中添加全局事件监听，比如监听浏览器的 resize 事件，以便在窗口大小变化时执行相应的逻辑。</li> </ul> 示例代码如下： <pre><code class="prism language-typescript"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue生命周期 - 创建阶段</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: '' }, beforeCreate() { console.log('beforeCreate: 实例初始化，数据未观测'); // 这里无法访问data中的message console.log(this.message); // 输出undefined }, created() { console.log('created: 实例创建完成，数据已观测'); // 可以访问data中的message console.log(this.message); // 输出空字符串 // 模拟异步请求获取数据 setTimeout(() => { this.message = '从服务器获取的数据'; }, 2000); } }); </script> </body> </html> </code></pre> <h4>5.2.2 挂载阶段</h4> <ul> <li>beforeMount 钩子函数：在挂载开始之前被调用，此时模板已经编译完成，但还未渲染到 DOM 上。在这个阶段，Vue 实例的 el 和 data 都已初始化，但 el 还是挂载之前的虚拟 DOM 节点，data 尚未替换。可以在这个钩子函数中对即将挂载的 DOM 进行一些最后的配置或调整操作，比如添加一些自定义的属性或样式类。虽然可以访问到实例的数据和方法，但由于 DOM 还未真正挂载，所以此时进行 DOM 操作是没有意义的，并且可能会导致一些潜在的问题。</li> <li>mounted 钩子函数：在挂载完成后被调用，此时 DOM 已经渲染完毕，可以进行 DOM 操作。在实际应用中，常用于操作 DOM、初始化第三方的 DOM 库、订阅事件或消息等。例如，使用 Chart.js 绘制图表时，需要在组件挂载完成后获取 DOM 元素并进行初始化配置；在使用 Element UI 等 UI 组件库时，也可能需要在 mounted 钩子函数中对组件进行一些初始化设置。也可以在这个阶段发起一些需要 DOM 元素的异步请求，或者添加一些依赖于 DOM 结构的事件监听器。</li> </ul> 示例代码如下： <pre><code class="prism language-typescript"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue生命周期 - 挂载阶段</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p id="myP">{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: '初始消息' }, beforeMount() { console.log('beforeMount: 模板编译完成，DOM未渲染'); // 此时$el存在，但内容是模板字符串 console.log(this.$el.innerHTML); // 输出 {{ message }} }, mounted() { console.log('mounted: DOM已渲染'); // 可以操作真实DOM const p = document.getElementById('myP'); p.style.color ='red'; // 可以访问data中的message console.log(this.message); // 输出初始消息 } }); </script> </body> </html> </code></pre> <h4>5.2.3 更新阶段</h4> <ul> <li>beforeUpdate 钩子函数：在数据变化导致的重新渲染开始之前被调用，可以在这个钩子中访问到更新前的 DOM 状态。当 Vue 实例的数据发生变化时，会触发 beforeUpdate 钩子函数，此时数据已经更新，但 DOM 还未更新。通常可以在这个钩子函数中保存当前状态，以便进行比较或回滚；也可以在更新前获取当前 DOM 状态，进行一些与 DOM 相关的操作，比如手动移除已添加的事件监听器。需要注意的是，在这个钩子函数中不要修改数据，否则可能会导致无限循环的更新。</li> <li>updated 钩子函数：在重新渲染完成之后被调用，可以在这个钩子中进行依赖于 DOM 更新后的操作。当数据变化导致虚拟 DOM 重新渲染和打补丁完成后，会调用 updated 钩子函数，此时 DOM 已经更新为最新状态。常用于在数据变化后，进行依赖于最新 DOM 状态的操作，比如更新第三方库的配置、重新计算一些依赖于 DOM 结构的布局信息等。在这个钩子函数中，也需要注意避免再次修改数据，以免引起新的更新循环。</li> </ul> 示例代码如下： <pre><code class="prism language-typescript"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue生命周期 - 更新阶段</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="updateMessage">更新消息</button> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: '旧消息' }, methods: { updateMessage() { this.message = '新消息'; } }, beforeUpdate() { console.log('beforeUpdate: 数据更新，DOM未更新'); // 可以访问更新前的DOM const p = document.querySelector('p'); console.log(p.textContent); // 输出旧消息 }, updated() { console.log('updated: DOM已更新'); // 可以访问更新后的DOM const p = document.querySelector('p'); console.log(p.textContent); // 输出新消息 } }); </script> </body> </html> </code></pre> <h4>5.2.4 销毁阶段</h4> <ul> <li>beforeDestroy 钩子函数：在实例销毁之前被调用，可以在这个钩子中执行一些清理操作，如清除计时器、取消订阅等。当调用 $destroy 方法或组件被从父组件中移除时，会触发 beforeDestroy 钩子函数，此时实例仍然完全可用，可以访问实例的所有属性和方法。在实际开发中，常用于清理定时器、解绑事件等操作，以避免内存泄漏。例如，如果在组件中使用了 setInterval 创建了一个定时器，就需要在 beforeDestroy 钩子函数中使用 clearInterval 清除该定时器。</li> <li>destroyed 钩子函数：在实例销毁后被调用，此时组件的所有绑定和监听器都已被解除。当 beforeDestroy 钩子函数执行完毕后，Vue 实例会解除所有的事件监听、数据绑定和子组件的关联，然后调用 destroyed 钩子函数。在这个钩子函数中，可以进行一些最终的清理工作，比如记录日志、通知其他系统组件实例已被销毁等。虽然在这个阶段仍然可以访问实例，但实际上实例已经处于销毁状态，所有的功能都已失效。</li> </ul> 示例代码如下： <pre><code class="prism language-typescript"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue生命周期 - 销毁阶段</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="destroyComponent">销毁组件</button> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: '要销毁的消息' }, methods: { destroyComponent() { this.$destroy(); } }, beforeDestroy() { console.log('beforeDestroy: 实例销毁前'); // 可以进行清理操作，如清除定时器 clearInterval(this.timer); }, destroyed() { console.log('destroyed: 实例销毁完成'); } }); </script> </body> </html> </code></pre> 在上述示例中，点击 “销毁组件” 按钮会调用 destroyComponent 方法，触发 beforeDestroy 和 destroyed 钩子函数。在 beforeDestroy 钩子函数中，可以进行一些清理操作，如清除定时器；在 destroyed 钩子函数中，可以进行一些最终的清理工作或记录日志。 <h2>六、Vue 常用指令详解</h2> <h3>6.1 v-html 指令</h3> v-html 指令用于更新元素的 innerHTML，它会将绑定的值解析为 HTML 并渲染到指定元素中，这使得我们可以在 Vue 应用中动态地插入 HTML 内容。语法为v-html=“expression”，其中expression是一个 JavaScript 表达式，其返回值将作为 HTML 内容插入。 例如，假设我们有一个包含 HTML 标签的字符串数据，想要将其渲染为实际的 HTML 结构： <pre><code class="prism language-typescript"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-html指令示例</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div v-html="htmlContent"></div> </div> <script> new Vue({ el: '#app', data: { htmlContent: '<h2>欢迎来到我的网站</h2>这是一段使用v-html指令渲染的HTML内容' } }); </script> </body> </html> </code></pre> 在上述代码中，v-html指令将htmlContent字符串中的 HTML 标签解析并渲染，最终在页面上显示一个二级标题和一段文本。 需要注意的是，由于v-html会直接渲染 HTML 内容，在网站上动态渲染任意 HTML 是非常危险的，容易导致 XSS（跨站脚本攻击）。因此，应只在可信内容上使用v-html，切勿在用户提交的内容上使用。例如，如果用户可以输入内容并通过v-html渲染，攻击者可能会输入恶意的 JavaScript 代码，当页面渲染时，这些恶意代码就会在用户浏览器中执行，从而窃取用户信息或进行其他恶意操作。 <h3>6.2 v-on 指令</h3> v-on 指令用于监听 DOM 事件，当事件触发时，会执行绑定的表达式或方法。通过它，我们可以方便地处理用户与页面的交互操作，如点击、鼠标移动、键盘输入等事件。该指令的完整语法是v-on:事件名=“表达式或方法名”，也可以使用简写形式@事件名=“表达式或方法名”。 例如，监听按钮的点击事件，当按钮被点击时，执行一个方法： <pre><code class="prism language-typescript"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-on指令示例</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button @click="handleClick">点击我</button> </div> <script> new Vue({ el: '#app', methods: { handleClick() { alert('按钮被点击了！'); } } }); </script> </body> </html> </code></pre> 在这个例子中，@click是v-on:click的简写，当按钮被点击时，会调用handleClick方法，弹出一个提示框。 v-on 指令还可以接收一个内联表达式，例如： <pre><code class="prism language-typescript"><button @click="count++">增加计数</button> <p>计数: {{ count }}</p> <script> new Vue({ el: '#app', data: { count: 0 } }); </script> </code></pre> 这里，点击按钮时会直接执行count++表达式，增加count的值，并在页面上实时显示。 此外，v-on 指令还提供了一些事件修饰符，用于改变事件的默认行为，常见的事件修饰符包括： <ul> <li>.stop：阻止事件冒泡，调用event.stopPropagation()。例如：</li> </ul> <pre><code class="prism language-typescript"><div @click="handleDivClick"> <button @click.stop="handleButtonClick">点击我，阻止冒泡</button> </div> <script> new Vue({ el: '#app', methods: { handleDivClick() { console.log('div被点击'); }, handleButtonClick() { console.log('button被点击，不会触发div的点击事件'); } } }); </script> </code></pre> 在这个例子中，点击按钮时，handleButtonClick方法会被调用，但事件不会冒泡到父元素div，因此handleDivClick方法不会被执行。 <ul> <li>.prevent：阻止默认行为，调用event.preventDefault()。常用于表单提交、链接跳转等场景，例如：</li> </ul> <pre><code class="prism language-typescript"><form @submit.prevent="handleSubmit"> <input type="submit" value="提交"> </form> <script> new Vue({ el: '#app', methods: { handleSubmit() { console.log('表单提交被阻止，可在此处进行自定义验证等操作'); } } }); </script> </code></pre> 这里，点击提交按钮时，表单的默认提交行为会被阻止，转而执行handleSubmit方法，开发者可以在该方法中进行自定义的表单验证、数据处理等操作。 <ul> <li>.once：只触发一次回调，例如：</li> </ul> <pre><code class="prism language-typescript"><button @click.once="handleClickOnce">只点击一次有效</button> <script> new Vue({ el: '#app', methods: { handleClickOnce() { console.log('按钮只被点击一次时执行，再次点击不会触发'); } } }); </script> </code></pre> 点击该按钮时，handleClickOnce方法只会被触发一次，再次点击按钮不会执行该方法。 <h3>6.3 v-bind 指令</h3> v-bind 指令用于动态绑定 HTML 元素的属性，它可以将 Vue 实例中的数据与 HTML 元素的属性进行关联，实现单向数据绑定。当数据发生变化时，对应的 HTML 属性也会随之更新，从而实现动态更新页面元素的属性值。其完整语法是v-bind:属性名=“表达式”，也可以使用简写形式 :属性名=“表达式” 。 例如，动态绑定img标签的src属性和a标签的href属性： <pre><code class="prism language-typescript"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-bind指令示例</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <img :src="imageSrc" alt="图片"> <a :href="linkUrl">点击访问</a> </div> <script> new Vue({ el: '#app', data: { imageSrc: 'https://example.com/image.jpg', linkUrl: 'https://example.com' } }); </script> </body> </html> </code></pre> 在上述代码中，:src是v-bind:src的简写，imageSrc数据属性的值会动态绑定到img标签的src属性上，linkUrl数据属性的值会动态绑定到a标签的href属性上。 v-bind 指令还可以用于绑定class和style属性，以实现动态切换元素的样式。 <ul> <li>绑定 class 属性：可以通过对象语法或数组语法来动态绑定class。 <ul> <li>对象语法：根据数据的真假来决定是否添加某个class类名，例如：</li> </ul> </li> </ul> <pre><code class="prism language-typescript"><div :class="{ active: isActive, 'text-danger': hasError }">这是一个div</div> <script> new Vue({ el: '#app', data: { isActive: true, hasError: false } }); </script> </code></pre> 在这个例子中，当isActive为true时，会添加active类；当hasError为true时，会添加text-danger类。 <ul> <li>数组语法：可以将多个class类名组成一个数组进行绑定，例如：</li> </ul> <pre><code class="prism language-typescript"><div :class="[baseClass, additionalClass]">这是另一个div</div> <script> new Vue({ el: '#app', data: { baseClass: 'box', additionalClass: 'highlight' } }); </script> </code></pre> 这里，baseClass和additionalClass数据属性的值会组成一个数组，动态绑定到div的class属性上，最终div会同时拥有box和highlight两个类。 <ul> <li>绑定 style 属性：同样支持对象语法和数组语法。 <ul> <li>对象语法：以 JavaScript 对象的形式来设置 CSS 样式，例如：</li> </ul> </li> </ul> <pre><code class="prism language-typescript"><p :style="{ color: textColor, fontSize: fontSize + 'px' }">这是一段文字</p> <script> new Vue({ el: '#app', data: { textColor:'red', fontSize: 16 } }); </script> </code></pre> 在这个例子中，textColor和fontSize数据属性的值会动态设置p标签的color和fontSize样式。 <ul> <li>数组语法：可以将多个样式对象组成一个数组进行绑定，常用于需要多个样式源的情况，例如：</li> </ul> <pre><code class="prism language-typescript"><div :style="[style1, style2]"></div> <script> new Vue({ el: '#app', data: { style1: { backgroundColor: 'lightblue' }, style2: { border: '1px solid gray' } } }); </script> </code></pre> 这里，style1和style2两个样式对象会组成一个数组，动态绑定到div的style属性上，使div同时拥有设置的背景颜色和边框样式。 <h2>七、总结与展望</h2> Vue 作为一款优秀的 JavaScript 框架，凭借其简洁的语法、强大的功能和丰富的生态系统，为前端开发带来了诸多便利。通过本文，我们深入学习了 Vue 的基础语法，如数据绑定、计算属性、条件渲染和列表渲染等，这些语法是构建 Vue 应用的基石，能够实现数据与视图的高效交互和动态展示。同时，我们也掌握了组件化开发的概念和方法，组件化使得代码的复用性和可维护性大大提高，通过 props 传值、自定义事件和事件总线等方式实现组件间通信，能让各个组件协同工作，构建出复杂而有序的应用结构。Vue 的生命周期钩子函数让我们可以在组件的不同阶段执行特定的逻辑，合理利用这些钩子函数能够优化应用性能，确保组件的正常运行。此外，常用指令如 v-html、v-on、v-bind 等进一步丰富了 Vue 的功能，v-html 用于渲染 HTML 内容，v-on 用于监听事件，v-bind 用于动态绑定属性，它们在实际开发中起着不可或缺的作用。 Vue 的学习是一个不断积累和实践的过程，希望读者在掌握基础知识后，能够积极参与实际项目开发，在实践中不断加深对 Vue 的理解和运用能力。同时，持续关注 Vue 的官方文档和社区动态，学习最新的技术和最佳实践，不断提升自己的前端开发水平。 展望未来，Vue 有望在性能优化、生态系统拓展和应用场景拓展等方面取得更大的进展。随着 Web 技术的不断发展，Vue 可能会进一步优化其核心算法和编译器，以提高应用的加载速度和运行效率。在生态系统方面，预计会有更多优秀的第三方库和工具涌现，为开发者提供更丰富的选择。应用场景也将更加广泛，除了传统的 Web 应用开发，Vue 可能会在移动端开发、桌面应用开发以及与人工智能、大数据等新兴技术的融合应用中发挥更大的作用。例如，在移动端，结合 Vue 和一些跨平台开发技术，能够快速构建出高性能的移动应用；在桌面应用开发中，借助相关技术框架，Vue 也有机会实现更流畅的桌面应用体验。总之，Vue 的未来充满无限可能，期待它为前端开发带来更多的惊喜和变革。 </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1941353855086292992"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(必备核心技能,vue.js,前端,javascript,从入门到精通)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1950233072825856000.htm" title="三菱PLC全套学习资料及应用手册" target="_blank">三菱PLC全套学习资料及应用手册</a> good2know <div>本文还有配套的精品资源，点击获取简介：三菱PLC作为工业自动化领域的核心设备，其系列产品的学习和应用需要全面深入的知识。本次资料包为学习者提供从基础到进阶的全方位学习资源，包括各种型号PLC的操作手册、编程指南、软件操作教程以及实际案例分析，旨在帮助用户系统掌握PLC的编程语言、指令系统及在各类工业应用中的实施。1.三菱PLC基础知识入门1.1PLC的基本概念可编程逻辑控制器（PLC）是工业自动化</div> </li> <li><a href="/article/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> good2know <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950232316974526464.htm" title="（二）SAP Group Reporting (GR) 核心子模块功能及数据流向架构解析" target="_blank">（二）SAP Group Reporting (GR) 核心子模块功能及数据流向架构解析</a> <div>数据如何从子公司流转到合并报表的全过程，即数据采集→合并引擎→报表输出，特别是HANA内存计算如何优化传统ETL瓶颈。SAPGroupReporting(GR)核心模块功能及数据流向的架构解析，涵盖核心组件、数据处理流程和关键集成点，适用于S/4HANA1809+版本：一、核心功能模块概览模块功能关键事务码/FioriApp数据采集(DataCollection)整合子公司财务数据（SAP/非SA</div> </li> <li><a href="/article/1950232190038110208.htm" title="day15｜前端框架学习和算法" target="_blank">day15｜前端框架学习和算法</a> universe_01 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>T22括号生成先把所有情况都画出来，然后（在满足什么情况下）把不符合条件的删除。T78子集要画树状图，把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索：每个边都走完，再回溯应用：二叉树搜索，图搜索回溯算法=DFS+剪枝T200岛屿数量（非常经典BFS宽度把树状转化成队列形式，lambda匿名函数“一次性的小函数，没有名字”setup语法糖：让代码更简洁好写的语法ref创建：基本类型的</div> </li> <li><a href="/article/1950228285266915328.htm" title="Git 与 GitHub 的对比与使用指南" target="_blank">Git 与 GitHub 的对比与使用指南</a> 一念& <a class="tag" taget="_blank" href="/search/%E5%85%B6%E5%AE%83/1.htm">其它</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>Git与GitHub的对比与使用指南在软件开发中，Git和GitHub是两个密切相关但本质不同的工具。下面我将逐步解释它们的定义、区别、核心概念以及如何协同使用，确保内容真实可靠，基于广泛的技术实践。1.什么是Git？Git是一个分布式版本控制系统，由LinusTorvalds于2005年创建。它的核心功能是跟踪代码文件的变化，帮助开发者管理项目历史记录、协作和回滚错误。Git是开源的，可以在本地</div> </li> <li><a href="/article/1950228158863175680.htm" title="英伟达靠什么支撑起了4万亿？AI泡沫还能撑多久？" target="_blank">英伟达靠什么支撑起了4万亿？AI泡沫还能撑多久？</a> <div>英伟达市值突破4万亿美元，既是AI算力需求爆发的直接体现，也暗含市场对未来的狂热预期。其支撑逻辑与潜在风险并存，而AI泡沫的可持续性则取决于技术、商业与地缘政治的复杂博弈。⚙️一、英伟达4万亿市值的核心支撑因素技术垄断与生态壁垒硬件优势：英伟达GPU在AI训练市场占有率超87%，H100芯片的FP16算力达1979TFLOPS，领先竞品3-5倍。CUDA生态：400万开发者构建的软件护城河，成为A</div> </li> <li><a href="/article/1950228031117258752.htm" title="深入解析JVM工作原理：从字节码到机器指令的全过程" target="_blank">深入解析JVM工作原理：从字节码到机器指令的全过程</a> <div>一、JVM概述Java虚拟机(JVM)是Java平台的核心组件，它实现了Java"一次编写，到处运行"的理念。JVM是一个抽象的计算机器，它有自己的指令集和运行时内存管理机制。JVM的主要职责：加载：读取.class文件并验证其正确性存储：管理内存分配和垃圾回收执行：解释或编译字节码为机器指令安全：提供沙箱环境限制恶意代码二、JVM架构详解JVM由三个主要子系统组成：1.类加载子系统类加载过程分为</div> </li> <li><a href="/article/1950226643771518976.htm" title="关于流媒体播放器EasyPlayer和EasyPlayerPro的介绍以及其区别" target="_blank">关于流媒体播放器EasyPlayer和EasyPlayerPro的介绍以及其区别</a> EasyDarwin <a class="tag" taget="_blank" href="/search/EasyDarwin/1.htm">EasyDarwin</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/ffmpeg/1.htm">ffmpeg</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/ar/1.htm">ar</a> <div>EasyPlayer是一款流媒体播放器系列项目，它支持多种流媒体协议的播放，包括但不限于RTSP、RTMP、HTTP、HLS、UDP、RTP、File等。除此之外，EasyPlayer还支持本地文件播放和多种功能特性，包括本地抓拍、本地录像、播放旋转、多屏播放、倍数播放等。EasyPlayer核心基于ffmpeg，稳定、高效、可靠、可控。随着多年的不断发展和迭代，EasyPlayer基于成功的实践</div> </li> <li><a href="/article/1950226517397139456.htm" title="JVM 内存模型深度解析：原子性、可见性与有序性的实现" target="_blank">JVM 内存模型深度解析：原子性、可见性与有序性的实现</a> 练习时长两年半的程序员小胡 <a class="tag" taget="_blank" href="/search/JVM/1.htm">JVM</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%89%96%E6%9E%90%EF%BC%9A%E4%BB%8E%E9%9D%A2%E8%AF%95%E8%80%83%E7%82%B9%E5%88%B0%E7%94%9F%E4%BA%A7%E5%AE%9E%E8%B7%B5/1.htm">深度剖析：从面试考点到生产实践</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98%E6%A8%A1%E5%9E%8B/1.htm">内存模型</a> <div>在了解了JVM的基础架构和类加载机制后，我们需要进一步探索Java程序在多线程环境下的内存交互规则。JVM内存模型（JavaMemoryModel，JMM）定义了线程和主内存之间的抽象关系，它通过规范共享变量的访问方式，解决了多线程并发时的数据一致性问题。本文将从内存模型的核心目标出发，详解原子性、可见性、有序性的实现机制，以及volatile、synchronized等关键字在其中的作用。一、J</div> </li> <li><a href="/article/1950226391064702976.htm" title="Flowable 实战落地核心：选型决策与坑点破解" target="_blank">Flowable 实战落地核心：选型决策与坑点破解</a> 练习时长两年半的程序员小胡 <a class="tag" taget="_blank" href="/search/Flowable/1.htm">Flowable</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%BC%95%E6%93%8E%E5%AE%9E%E6%88%98%E6%8C%87%E5%8D%97/1.htm">流程引擎实战指南</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/BPMN/1.htm">BPMN</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%BC%95%E6%93%8E/1.htm">流程引擎</a><a class="tag" taget="_blank" href="/search/flowable/1.htm">flowable</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>在企业级流程引擎的落地过程中，选型的准确性和坑点的预见性直接决定项目成败。本文聚焦Flowable实战中最关键的“选型决策”与“常见坑点”，结合真实项目经验，提供可落地的解决方案。一、流程引擎选型：从业务本质出发1.1选型的三大核心维度企业在选择流程引擎时，需避免陷入“技术崇拜”，应回归业务本质。评估Flowable是否适用，可从三个维度判断：业务复杂度若流程涉及动态审批链（如按金额自动升级审批）</div> </li> <li><a href="/article/1950226137909096448.htm" title="互信息：理论框架、跨学科应用与前沿进展" target="_blank">互信息：理论框架、跨学科应用与前沿进展</a> 大千AI助手 <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/OTHER/1.htm">OTHER</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E4%BF%A1%E6%81%AF/1.htm">互信息</a><a class="tag" taget="_blank" href="/search/%E9%A6%99%E5%86%9C/1.htm">香农</a><a class="tag" taget="_blank" href="/search/%E9%80%9A%E4%BF%A1/1.htm">通信</a><a class="tag" taget="_blank" href="/search/%E9%9A%8F%E6%9C%BA%E5%8F%98%E9%87%8F/1.htm">随机变量</a> <div>1.起源与核心定义互信息（MutualInformation,MI）由克劳德·香农（ClaudeShannon）在1948年开创性论文《AMathematicalTheoryofCommunication》中首次提出，该论文奠定了现代信息论的基础。互信息用于量化两个随机变量之间的统计依赖关系，定义为：若已知一个随机变量的取值，能为另一个随机变量提供的信息量。数学上，对于离散随机变量XXX和YYY，</div> </li> <li><a href="/article/1950225255079407616.htm" title="企业级区块链平台Hyperchain核心原理剖析" target="_blank">企业级区块链平台Hyperchain核心原理剖析</a> boyedu <a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E7%BA%A7%E5%8C%BA%E5%9D%97%E9%93%BE%E5%B9%B3%E5%8F%B0/1.htm">企业级区块链平台</a><a class="tag" taget="_blank" href="/search/Hyperchain/1.htm">Hyperchain</a> <div>Hyperchain作为国产自主可控的企业级联盟区块链平台，其核心原理围绕高性能共识、隐私保护、智能合约引擎及可扩展架构展开，通过多模块协同实现企业级区块链网络的高效部署与安全运行。以下从核心架构、关键技术、性能优化、安全机制、应用场景五个维度展开剖析：一、核心架构：分层解耦与模块化设计Hyperchain采用分层架构，将区块链功能解耦为独立模块，支持灵活组合与扩展：P2P网络层由验证节点（VP）</div> </li> <li><a href="/article/1950224490331959296.htm" title="通义万相2.2：开启高清视频生成新纪元" target="_blank">通义万相2.2：开启高清视频生成新纪元</a> Liudef06小白 <a class="tag" taget="_blank" href="/search/%E7%89%B9%E6%AE%8A%E4%B8%93%E6%A0%8F/1.htm">特殊专栏</a><a class="tag" taget="_blank" href="/search/AIGC/1.htm">AIGC</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E9%80%9A%E4%B9%89%E4%B8%87%E7%9B%B82.2/1.htm">通义万相2.2</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%94%9F%E8%A7%86%E9%A2%91/1.htm">图生视频</a> <div>通义万相2.2：开启高清视频生成新纪元2025年7月28日，中国AI领域迎来里程碑时刻——通义万相团队正式开源其革命性视频生成模型Wan2.2的核心权重，这标志着开源社区首次获得支持720P高清视频生成的先进模型架构。一、架构革新：混合专家系统1.1MoE视频扩散架构通义万相2.2首次将混合专家（MoE）架构引入视频扩散模型，通过双专家系统实现计算效率与模型容量的平衡：classMoEVideoD</div> </li> <li><a href="/article/1950223497875746816.htm" title="最新阿里四面面试真题46道：面试技巧+核心问题+面试心得" target="_blank">最新阿里四面面试真题46道：面试技巧+核心问题+面试心得</a> 风平浪静如码 <div>前言做技术的有一种资历，叫做通过了阿里的面试。这些阿里Java相关问题，都是之前通过不断优秀人才的铺垫总结的，先自己弄懂了再去阿里面试，不然就是去丢脸，被虐。希望对大家帮助，祝面试成功，有个更好的职业规划。一，阿里常见技术面1、微信红包怎么实现。2、海量数据分析。3、测试职位问的线程安全和非线程安全。4、HTTP2.0、thrift。5、面试电话沟通可能先让自我介绍。6、分布式事务一致性。7、ni</div> </li> <li><a href="/article/1950223483048882176.htm" title="【ARM】FPU,VFP,ASE,NEON,SVE...是什么意思？" target="_blank">【ARM】FPU,VFP,ASE,NEON,SVE...是什么意思？</a> 亿道电子Emdoor <a class="tag" taget="_blank" href="/search/ARM/1.htm">ARM</a><a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/ARM/1.htm">ARM</a> <div>1、文档目标对执行浮点和SIMD操作的逻辑的各种名称的缩写词进行简要解释。2、问题场景Arm处理器内核中有用于执行浮点和SIMD操作的逻辑，有各种名称。它们通常是一系列的缩写形式，因此本文旨在对每一个缩写词进行简要解释。3、软硬件环境1、软件版本：不涉及2、电脑环境：不涉及4、相关缩写FPU(Floating-PointUnit)浮点单元浮点单元是处理器核心中的一个模块，用于使用浮点数执行算术运算</div> </li> <li><a href="/article/1950222345163567104.htm" title="深入理解汇编语言子程序设计与系统调用" target="_blank">深入理解汇编语言子程序设计与系统调用</a> 网安spinage <a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96%E8%AF%AD%E8%A8%80/1.htm">汇编语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96/1.htm">汇编</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>本文将全面解析汇编语言中子程序设计的核心技术以及系统调用的实现方法，涵盖参数传递的多种方式、堆栈管理、API调用等关键知识点，并提供实际案例演示。一、子程序设计：参数传递的艺术1.寄存器传参：高效简洁.386.modelflat,stdcalloptioncasemap:none.dataxdd5;定义变量ydd6sumdd?.code;函数定义：addxy1addxy1procpushebpmo</div> </li> <li><a href="/article/1950221204333850624.htm" title="平静得接受自己的笨拙 20190118 晨间日记" target="_blank">平静得接受自己的笨拙 20190118 晨间日记</a> 吴伯符 <div>图片发自App最近做了一个关于微习惯的分享，这里有八个字：微量开始，超额完成。这里的言下之意其实是要你在一开始的时候，平静地接受自己的笨拙。接受自己的笨拙，理解自己的笨拙，放慢速度尝试，观察哪里可以改进，再反复练习，观察自己哪里可以再进一步改进，再反复…这是学习一切技能的必须的过程。这里的两个关键点是：1.尽快的开始这个过程，这就能够用到微习惯的微量开始。2.尽快的度过这个过程，这就需要用到超额完</div> </li> <li><a href="/article/1950219953118441472.htm" title="编程算法：技术创新的引擎与业务增长的核心驱动力" target="_blank">编程算法：技术创新的引擎与业务增长的核心驱动力</a> <div>在数字经济时代，算法已成为推动技术创新与业务增长的隐形引擎。从存内计算突破冯·诺依曼瓶颈，到动态规划优化万亿级金融交易，编程算法正在重塑产业竞争格局。一、存内计算：突破冯·诺依曼瓶颈的算法革命1.1存内计算的基本原理传统计算架构中90%的能耗消耗在数据搬运上。存内计算（Processing-in-Memory）通过直接在存储单元执行计算，实现能效10-100倍提升：#传统计算vs存内计算能耗模型i</div> </li> <li><a href="/article/1950218946015719424.htm" title="图论算法经典题目解析：DFS、BFS与拓扑排序实战" target="_blank">图论算法经典题目解析：DFS、BFS与拓扑排序实战</a> 周童學 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.htm">数据结构与算法</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E4%BC%98%E5%85%88/1.htm">深度优先</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%AE%BA/1.htm">图论</a> <div>图论算法经典题目解析：DFS、BFS与拓扑排序实战图论问题是算法面试中的高频考点，本博客将通过四道LeetCode经典题目（均来自"Top100Liked"题库），深入讲解图论的核心算法思想和实现技巧。涵盖DFS、BFS、拓扑排序和前缀树等知识点，每道题配有Java实现和易错点分析。1.岛屿数量(DFS遍历)问题描述给定一个由'1'(陆地)和'0'(水)组成的二维网格，计算岛屿的数量。岛屿由水平或</div> </li> <li><a href="/article/1950218817753903104.htm" title="【项目实战】容错机制与故障恢复：保障系统连续性的核心体系" target="_blank">【项目实战】容错机制与故障恢复：保障系统连续性的核心体系</a> 本本本添哥 <a class="tag" taget="_blank" href="/search/004/1.htm">004</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E7%A0%94%E6%95%88%E4%B8%8EDevOps%E8%BF%90%E7%BB%B4%E5%B7%A5%E5%85%B7%E9%93%BE/1.htm">研效与DevOps运维工具链</a><a class="tag" taget="_blank" href="/search/002/1.htm">002</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91%E8%83%BD%E5%8A%9B/1.htm">进阶开发能力</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>在分布式系统中，硬件故障、网络波动、软件异常等问题难以避免。容错机制与故障恢复的核心目标是：通过主动检测故障、自动隔离风险、快速转移负载、重建数据一致性，最大限度减少故障对业务的影响，保障系统“持续可用”与“数据不丢失”。以下从核心机制、实现方式、典型案例等维度展开说明。一、故障检测：及时发现异常节点故障检测是容错的第一步，需通过多维度手段实时感知系统组件状态，确保故障被快速识别。1.健康检查与心</div> </li> <li><a href="/article/1950218314064130048.htm" title="Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)" target="_blank">Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)</a> bug菌¹ <a class="tag" taget="_blank" href="/search/Java%E5%AE%9E%E6%88%98%28%E8%BF%9B%E9%98%B6%E7%89%88%29/1.htm">Java实战(进阶版)</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Java%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8/1.htm">Java零基础入门</a><a class="tag" taget="_blank" href="/search/Java%E5%B9%B6%E5%8F%91/1.htm">Java并发</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B%E7%AF%87/1.htm">多线程篇</a> <div>本文收录于「Java进阶实战」专栏，专业攻坚指数级提升，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！环境说明：Windows10+IntelliJIDEA2021.3.2+Jdk1.8本文目录前言摘要正文何为线程池？为什么需要线程池？线程池的好处线程池使用场景如何创建线程池？线程池的常见配置源码解析案例分享案例代码演示案例运行</div> </li> <li><a href="/article/1950216800016855040.htm" title="Effective C++ 条款10：令operator=返回一个reference to *this" target="_blank">Effective C++ 条款10：令operator=返回一个reference to *this</a> 君鼎 <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a> <div>EffectiveC++条款10：令operator=返回一个referenceto*this核心思想：赋值操作符（operator=）应始终返回当前对象的引用（*this），以实现连锁赋值并保持与内置类型一致的语义。⚠️1.问题场景：违反连锁赋值语义classWidget{public:voidoperator=(constWidget&rhs){//错误：返回voidvalue=rhs.val</div> </li> <li><a href="/article/1950215540215705600.htm" title="JVM 内存分配与回收策略：从对象创建到内存释放的全流程" target="_blank">JVM 内存分配与回收策略：从对象创建到内存释放的全流程</a> <div>在JVM的运行机制中，内存分配与回收策略是连接对象生命周期与垃圾收集器的桥梁。它决定了对象在堆内存中的创建位置、存活过程中的区域迁移，以及最终被回收的时机。合理的内存分配策略能减少GC频率、降低停顿时间，是优化Java应用性能的核心环节。本文将系统解析JVM的内存分配规则、对象晋升机制，以及实战中的内存优化技巧。一、对象优先在Eden区分配：新生代的“临时缓冲区”大多数情况下，Java对象在新生代</div> </li> <li><a href="/article/1950214657750921216.htm" title="猎板 PCB 控深槽工艺：5G 基站散热模块的关键支撑" target="_blank">猎板 PCB 控深槽工艺：5G 基站散热模块的关键支撑</a> 猎板PCB黄浩 <a class="tag" taget="_blank" href="/search/5G/1.htm">5G</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>PCB控深槽工艺在5G基站散热模块中的关键作用：猎板PCB的技术突破在5G基站的密集高频信号与高功率运行环境下，散热性能直接决定了设备的稳定性和寿命。猎板PCB通过创新性的控深槽工艺（控深锣/控深铣），结合材料科学与结构优化，为5G基站散热模块提供了高精度、高可靠性的解决方案，有效攻克了高热负荷下的技术瓶颈。一、5G基站散热的核心挑战热负荷激增：5G基站的射频功放（PA）、电源管理模块等器件功耗显</div> </li> <li><a href="/article/1950212283061825536.htm" title="女生必备技能：如何一眼辨别渣男？" target="_blank">女生必备技能：如何一眼辨别渣男？</a> 艾零的奇异世界 <div>我相信女孩子都不喜欢渣男，虽然也很喜欢看那些渣男出现的奇葩事，而且看完还得自己思考一下人生，这癖好我懂我懂！不过最近渣男出现的频率极高，甚至有点儿惊悚。3月28日芜湖市新市口，红色路虎车上烧死两人。只因男子苦追女子被拒。结果呢，男子想着呀，那就一起命送黄泉！可怜的女孩子死都没法摆脱渣男。4月12日，22岁女孩带着肚子里的孩子自杀，而渣男是准备继承皇位的花花公子。女孩3个月内打胎2次，自杀后还被键盘</div> </li> <li><a href="/article/1950209368356089856.htm" title="AI模型训练中过拟合和欠拟合的区别是什么？" target="_blank">AI模型训练中过拟合和欠拟合的区别是什么？</a> workflower <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a> <div>在AI模型训练中，过拟合和欠拟合是两种常见的模型性能问题，核心区别在于模型对数据的学习程度和泛化能力：欠拟合（Underfitting）-定义：模型未能充分学习到数据中的规律，对训练数据的拟合程度较差，在训练集和测试集上的表现都不好（如准确率低、损失值高）。-原因：-模型结构过于简单（如用线性模型解决非线性问题）；-训练数据量不足或特征信息不充分；-训练时间太短，模型尚未学到有效模式。-表现：训练</div> </li> <li><a href="/article/1950208359722446848.htm" title="元宇宙中的视觉技术：虚拟化身与场景生成" target="_blank">元宇宙中的视觉技术：虚拟化身与场景生成</a> xcLeigh <a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E8%A7%86%E8%A7%89CV/1.htm">计算机视觉CV</a><a class="tag" taget="_blank" href="/search/%E5%85%83%E5%AE%87%E5%AE%99/1.htm">元宇宙</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E5%8C%96%E8%BA%AB/1.htm">虚拟化身</a><a class="tag" taget="_blank" href="/search/%E5%9C%BA%E6%99%AF%E7%94%9F%E6%88%90/1.htm">场景生成</a><a class="tag" taget="_blank" href="/search/AIGC/1.htm">AIGC</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97%E5%AD%AA%E7%94%9F/1.htm">数字孪生</a> <div>元宇宙中的视觉技术：虚拟化身与场景生成前言一、元宇宙与视觉技术的深度关联1.1元宇宙概念深度剖析1.2视觉技术：元宇宙的“灵魂之窗”二、虚拟化身：数字世界的“第二自我”2.1虚拟化身技术的深度解析2.1.1核心技术构成2.1.2技术实现原理与流程2.2虚拟化身的应用领域及案例展示2.2.1游戏娱乐领域2.2.2教育培训领域三、场景生成：构建元宇宙的虚拟天地3.1场景生成技术全景透视3.1.1关键技</div> </li> <li><a href="/article/1950207853105049600.htm" title="【Coze搞钱实战】3. 避坑指南：对话流设计中的6个致命错误（真实案例）" target="_blank">【Coze搞钱实战】3. 避坑指南：对话流设计中的6个致命错误（真实案例）</a> AI_DL_CODE <a class="tag" taget="_blank" href="/search/Coze%E5%B9%B3%E5%8F%B0/1.htm">Coze平台</a><a class="tag" taget="_blank" href="/search/%E5%AF%B9%E8%AF%9D%E6%B5%81%E8%AE%BE%E8%AE%A1/1.htm">对话流设计</a><a class="tag" taget="_blank" href="/search/%E5%AE%A2%E6%9C%8DBot%E9%81%BF%E5%9D%91/1.htm">客服Bot避坑</a><a class="tag" taget="_blank" href="/search/%E7%94%A8%E6%88%B7%E6%B5%81%E5%A4%B1/1.htm">用户流失</a><a class="tag" taget="_blank" href="/search/%E5%B0%81%E5%8F%B7%E9%A3%8E%E9%99%A9/1.htm">封号风险</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%AE%A2%E6%9C%8D%E9%85%8D%E7%BD%AE/1.htm">智能客服配置</a><a class="tag" taget="_blank" href="/search/%E6%95%85%E9%9A%9C%E4%BF%AE%E5%A4%8D%E6%8C%87%E5%8D%97/1.htm">故障修复指南</a> <div>摘要：对话流设计是智能客服Bot能否落地的核心环节，直接影响用户体验与业务安全。本文基于50+企业Bot部署故障分析，聚焦导致用户流失、投诉甚至封号的6大致命错误：无限循环追问、人工移交超时、敏感词过滤缺失、知识库冲突、未处理否定意图、跨平台适配失败。通过真实案例拆解每个错误的表现形式、技术根因及工业级解决方案，提供可直接复用的Coze配置代码、工作流模板和检测工具。文中包含对话流健康度检测工具使</div> </li> <li><a href="/article/1950206970766094336.htm" title="C++编程基础与面向对象概念解析" target="_blank">C++编程基础与面向对象概念解析</a> 侯昂 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B/1.htm">面向对象编程</a><a class="tag" taget="_blank" href="/search/C%2B%2B%E8%AF%AD%E6%B3%95/1.htm">C++语法</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E4%B8%8E%E5%AF%B9%E8%B1%A1/1.htm">类与对象</a><a class="tag" taget="_blank" href="/search/%E7%BB%A7%E6%89%BF%E4%B8%8E%E5%A4%9A%E6%80%81%E6%80%A7/1.htm">继承与多态性</a> <div>C++编程基础与面向对象概念解析背景简介C++是一种广泛使用的面向对象编程语言，它允许开发者创建高效、灵活且功能强大的程序。本文基于《C++Primer》一书的章节内容，深入解析C++的核心概念和面向对象编程原则，旨在帮助读者构建扎实的C++编程基础。面向对象编程的原则软件危机与进化介绍了软件危机的产生和软件进化的必要性，强调了面向对象编程（OOP）在应对这些问题中的优势。面向对象编程范式讨论了面</div> </li> <li><a href="/article/1950205080594608128.htm" title="Deepseek技术深化：驱动大数据时代颠覆性变革的未来引擎" target="_blank">Deepseek技术深化：驱动大数据时代颠覆性变革的未来引擎</a> 荣华富贵8 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2%E5%BC%95%E6%93%8E/1.htm">搜索引擎</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a> <div>在大数据时代，信息爆炸和数据驱动的决策逐渐重塑各行各业。作为一项前沿技术，Deepseek正在引领新一轮技术革新，颠覆传统数据处理与分析方式。本文将从理论原理、应用场景和前沿代码实践三个层面，深入剖析Deepseek技术如何为大数据时代提供颠覆性变革的解决方案。一、技术背景与核心思想1.1大数据挑战与机遇在数据量呈指数级增长的背景下，传统数据处理方法面临数据存储、计算效率和信息提取精度的诸多挑战。</div> </li> <li><a href="/article/117.htm" title="Algorithm" target="_blank">Algorithm</a> 香水浓 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a> <div>冒泡排序 public static void sort(Integer[] param) { for (int i = param.length - 1; i > 0; i--) { for (int j = 0; j < i; j++) { int current = param[j]; int next = param[j + 1];</div> </li> <li><a href="/article/244.htm" title="mongoDB 复杂查询表达式" target="_blank">mongoDB 复杂查询表达式</a> 开窍的石头 <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>1:count Pg: db.user.find().count(); 统计多少条数据 2:不等于$ne Pg: db.user.find({_id:{$ne:3}},{name:1,sex:1,_id:0}); 查询id不等于3的数据。 3：大于$gt $gte(大于等于) &n</div> </li> <li><a href="/article/371.htm" title="Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space" target="_blank">Jboss Java heap space异常解决方法, jboss OutOfMemoryError : PermGen space</a> 0624chenhong <a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jboss/1.htm">jboss</a> <div>转自 http://blog.csdn.net/zou274/article/details/5552630 解决办法： window->preferences->java->installed jres->edit jre 把default vm arguments 的参数设为-Xms64m -Xmx512m ----------------</div> </li> <li><a href="/article/498.htm" title="文件上传下载解析相对路径" target="_blank">文件上传下载解析相对路径</a> 不懂事的小屁孩 <a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/1.htm">文件上传</a> <div>有点坑吧，弄这么一个简单的东西弄了一天多，身边还有大神指导着，网上各种百度着。下面总结一下遇到的问题：文件上传，在页面上传的时候，不要想着去操作绝对路径，浏览器会对客户端的信息进行保护，避免用户信息收到攻击。在上传图片，或者文件时，使用form表单来操作。前台通过form表单传输一个流到后台，而不是ajax传递参数到后台，代码如下: <form action=&</div> </li> <li><a href="/article/625.htm" title="怎么实现qq空间批量点赞" target="_blank">怎么实现qq空间批量点赞</a> 换个号韩国红果果 <a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a> <div>纯粹为了好玩！！逻辑很简单 1 打开浏览器console；输入以下代码。先上添加赞的代码 var tools={}; //添加所有赞 function init(){ document.body.scrollTop=10000; setTimeout(function(){document.body.scrollTop=0;},2000);//加</div> </li> <li><a href="/article/752.htm" title="判断是否为中文" target="_blank">判断是否为中文</a> 灵静志远 <a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87/1.htm">中文</a> <div>方法一： public class Zhidao { public static void main(String args[]) { String s = "sdf灭礌 kjl d{';\fdsjlk是"; int n=0; for(int i=0; i<s.length(); i++) { n = (int)s.charAt(i); if((</div> </li> <li><a href="/article/879.htm" title="一个电话面试后总结" target="_blank">一个电话面试后总结</a> a-john <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>今天，接了一个电话面试，对于还是初学者的我来说，紧张了半天。面试的问题分了层次，对于一类问题，由简到难。自己觉得回答不好的地方作了一下总结：在谈到集合类的时候，举几个常用的集合类，想都没想，直接说了list,map。然后对list和map分别举几个类型： list方面：ArrayList,LinkedList。在谈到他们的区别时，愣住了</div> </li> <li><a href="/article/1006.htm" title="MSSQL中Escape转义的使用" target="_blank">MSSQL中Escape转义的使用</a> aijuans <a class="tag" taget="_blank" href="/search/MSSQL/1.htm">MSSQL</a> <div>IF OBJECT_ID('tempdb..#ABC') is not null drop table tempdb..#ABC create table #ABC ( PATHNAME NVARCHAR(50) ) insert into #ABC SELECT N'/ABCDEFGHI' UNION ALL SELECT N'/ABCDGAFGASASSDFA' UNION ALL</div> </li> <li><a href="/article/1133.htm" title="一个简单的存储过程" target="_blank">一个简单的存储过程</a> asialee <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B/1.htm">存储过程</a><a class="tag" taget="_blank" href="/search/%E6%9E%84%E9%80%A0%E6%95%B0%E6%8D%AE/1.htm">构造数据</a><a class="tag" taget="_blank" href="/search/%E6%89%B9%E9%87%8F%E6%8F%92%E5%85%A5/1.htm">批量插入</a> <div> 今天要批量的生成一批测试数据，其中中间有部分数据是变化的，本来想写个程序来生成的，后来想到存储过程就可以搞定，所以随手写了一个，记录在此： DELIMITER $$ DROP PROCEDURE IF EXISTS inse</div> </li> <li><a href="/article/1260.htm" title="annot convert from HomeFragment_1 to Fragment" target="_blank">annot convert from HomeFragment_1 to Fragment</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E5%8C%85%E9%94%99%E8%AF%AF/1.htm">导包错误</a> <div>创建了几个类继承Fragment, 需要将创建的类存储在ArrayList<Fragment>中; 出现不能将new 出来的对象放到队列中,原因很简单; 创建类时引入包是:import android.app.Fragment; 创建队列和对象时使用的包是:import android.support.v4.ap</div> </li> <li><a href="/article/1387.htm" title="Weblogic10两种修改端口的方法" target="_blank">Weblogic10两种修改端口的方法</a> bijian1013 <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/%E7%AB%AF%E5%8F%A3%E5%8F%B7/1.htm">端口号</a><a class="tag" taget="_blank" href="/search/%E9%85%8D%E7%BD%AE%E7%AE%A1%E7%90%86/1.htm">配置管理</a><a class="tag" taget="_blank" href="/search/config.xml/1.htm">config.xml</a> <div>一.进入控制台进行修改 1.进入控制台: http://127.0.0.1:7001/console 2.展开左边树菜单域结构->环境->服务器-->点击AdminServer(管理) &</div> </li> <li><a href="/article/1514.htm" title="mysql 操作指令" target="_blank">mysql 操作指令</a> 征客丶 <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>一、连接mysql 进入 mysql 的安装目录； $ bin/mysql -p [host IP 如果是登录本地的mysql 可以不写 -p 直接 -u] -u [userName] -p 输入密码，回车，接连；二、权限操作［如果你很了解mysql数据库后，你可以直接去修改系统表，然后用 mysql> flush privileges; 指令让权限生效］ 1、赋权 mys</div> </li> <li><a href="/article/1641.htm" title="【Hive一】Hive入门" target="_blank">【Hive一】Hive入门</a> bit1129 <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a> <div>Hive安装与配置 Hive的运行需要依赖于Hadoop，因此需要首先安装Hadoop2.5.2，并且Hive的启动前需要首先启动Hadoop。 Hive安装和配置的步骤 1. 从如下地址下载Hive0.14.0 http://mirror.bit.edu.cn/apache/hive/ 2.解压hive，在系统变</div> </li> <li><a href="/article/1768.htm" title="ajax 三种提交请求的方法" target="_blank">ajax 三种提交请求的方法</a> BlueSkator <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/jqery/1.htm">jqery</a> <div>1、ajax 提交请求 $.ajax({ type:"post", url : "${ctx}/front/Hotel/getAllHotelByAjax.do", dataType : "json", success : function(result) { try { for(v</div> </li> <li><a href="/article/1895.htm" title="mongodb开发环境下的搭建入门" target="_blank">mongodb开发环境下的搭建入门</a> braveCS <a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div> linux下安装mongodb 1）官网下载mongodb-linux-x86_64-rhel62-3.0.4.gz 2）linux 解压 gzip -d mongodb-linux-x86_64-rhel62-3.0.4.gz; mv mongodb-linux-x86_64-rhel62-3.0.4 mongodb-linux-x86_64-rhel62-</div> </li> <li><a href="/article/2022.htm" title="编程之美-最短摘要的生成" target="_blank">编程之美-最短摘要的生成</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; public class ShortestAbstract { /** * 编程之美最短摘要的生成 * 扫描过程始终保持一个[pBegin,pEnd]的range,初始化确保[pBegin,pEnd]的ran</div> </li> <li><a href="/article/2149.htm" title="json数据解析及typeof" target="_blank">json数据解析及typeof</a> chengxuyuancsdn <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/typeof/1.htm">typeof</a><a class="tag" taget="_blank" href="/search/json%E8%A7%A3%E6%9E%90/1.htm">json解析</a> <div> // json格式 var people='{"authors": [{"firstName": "AAA","lastName": "BBB"},' +' {"firstName": "CCC&</div> </li> <li><a href="/article/2276.htm" title="流程系统设计的层次和目标" target="_blank">流程系统设计的层次和目标</a> comsci <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div> 流程系统设计的层次和目标 </div> </li> <li><a href="/article/2403.htm" title="RMAN List和report 命令" target="_blank">RMAN List和report 命令</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/report/1.htm">report</a><a class="tag" taget="_blank" href="/search/rman/1.htm">rman</a> <div>LIST 命令使用RMAN LIST 命令显示有关资料档案库中记录的备份集、代理副本和映像副本的信息。使用此命令可列出： • RMAN 资料档案库中状态不是AVAILABLE 的备份和副本 • 可用的且可以用于还原操作的数据文件备份和副本 • 备份集和副本，其中包含指定数据文件列表或指定表空间的备份 • 包含指定名称或范围的所有归档日志备份的备份集和副本 • 由标记、完成时间、可</div> </li> <li><a href="/article/2530.htm" title="二叉树:红黑树" target="_blank">二叉树:红黑树</a> dieslrae <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a> <div> 红黑树是一种自平衡的二叉树,它的查找,插入,删除操作时间复杂度皆为O(logN),不会出现普通二叉搜索树在最差情况时时间复杂度会变为O(N)的问题. 红黑树必须遵循红黑规则,规则如下 1、每个节点不是红就是黑。 2、根总是黑的 &</div> </li> <li><a href="/article/2657.htm" title="C语言homework3，7个小题目的代码" target="_blank">C语言homework3，7个小题目的代码</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>1、打印100以内的所有奇数。 # include <stdio.h> int main(void) { int i; for (i=1; i<=100; i++) { if (i%2 != 0) printf("%d ", i); } return 0; } 2、从键盘上输入10个整数，</div> </li> <li><a href="/article/2784.htm" title="自定义按钮, 图片在上, 文字在下, 居中显示" target="_blank">自定义按钮, 图片在上, 文字在下, 居中显示</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89/1.htm">自定义</a> <div>#import <UIKit/UIKit.h> @interface MyButton : UIButton -(void)setFrame:(CGRect)frame ImageName:(NSString*)imageName Target:(id)target Action:(SEL)action Title:(NSString*)title Font:(CGFloa</div> </li> <li><a href="/article/2911.htm" title="MySQL查询语句练习题，测试足够用了" target="_blank">MySQL查询语句练习题，测试足够用了</a> flyvszhb <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>http://blog.sina.com.cn/s/blog_767d65530101861c.html 1.创建student和score表 CREATE TABLE student ( id INT(10) NOT NULL UNIQUE PRIMARY KEY , name VARCHAR</div> </li> <li><a href="/article/3038.htm" title="转：MyBatis Generator 详解" target="_blank">转：MyBatis Generator 详解</a> happyqing <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div> MyBatis Generator 详解 http://blog.csdn.net/isea533/article/details/42102297 MyBatis Generator详解 http://git.oschina.net/free/Mybatis_Utils/blob/master/MybatisGeneator/MybatisGeneator.</div> </li> <li><a href="/article/3165.htm" title="让程序员少走弯路的14个忠告" target="_blank">让程序员少走弯路的14个忠告</a> jingjing0907 <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E5%88%92/1.htm">计划</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div> 无论是谁，在刚进入某个领域之时，有再大的雄心壮志也敌不过眼前的迷茫：不知道应该怎么做，不知道应该做什么。下面是一名软件开发人员所学到的经验，希望能对大家有所帮助 1.不要害怕在工作中学习。只要有电脑，就可以通过电子阅读器阅读报纸和大多数书籍。如果你只是做好自己的本职工作以及分配的任务，那是学不到很多东西的。如果你盲目地要求更多的工作，也是不可能提升自己的。放</div> </li> <li><a href="/article/3292.htm" title="nginx和NetScaler区别" target="_blank">nginx和NetScaler区别</a> 流浪鱼 <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>NetScaler是一个完整的包含操作系统和应用交付功能的产品，Nginx并不包含操作系统，在处理连接方面，需要依赖于操作系统，所以在并发连接数方面和防DoS攻击方面，Nginx不具备优势。 2.易用性方面差别也比较大。Nginx对管理员的水平要求比较高，参数比较多，不确定性给运营带来隐患。在NetScaler常见的配置如健康检查，HA等，在Nginx上的配置的实现相对复杂。 3.策略灵活度方</div> </li> <li><a href="/article/3419.htm" title="第11章动画效果（下）" target="_blank">第11章动画效果（下）</a> onestopweb <a class="tag" taget="_blank" href="/search/%E5%8A%A8%E7%94%BB/1.htm">动画</a> <div>index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/</div> </li> <li><a href="/article/3546.htm" title="FAQ - SAP BW BO roadmap" target="_blank">FAQ - SAP BW BO roadmap</a> blueoxygen <a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a><a class="tag" taget="_blank" href="/search/BW/1.htm">BW</a> <div>http://www.sdn.sap.com/irj/boc/business-objects-for-sap-faq Besides, I care that how to integrate tightly. By the way, for BW consultants, please just focus on Query Designer which i</div> </li> <li><a href="/article/3673.htm" title="关于java堆内存溢出的几种情况" target="_blank">关于java堆内存溢出的几种情况</a> tomcat_oracle <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a> <div>【情况一】：　　 java.lang.OutOfMemoryError: Java heap space：这种是java堆内存不够，一个原因是真不够，另一个原因是程序中有死循环；　　如果是java堆内存不够的话，可以通过调整JVM下面的配置来解决：　　<jvm-arg>-Xms3062m</jvm-arg> 　　<jvm-arg>-Xmx</div> </li> <li><a href="/article/3800.htm" title="Manifest.permission_group权限组" target="_blank">Manifest.permission_group权限组</a> 阿尔萨斯 <a class="tag" taget="_blank" href="/search/Permission/1.htm">Permission</a> <div>结构继承关系 public static final class Manifest.permission_group extends Object java.lang.Object android. Manifest.permission_group 常量 ACCOUNTS 直接通过统计管理器访问管理的统计 COST_MONEY可以用来让用户花钱但不需要通过与他们直接牵涉的权限 D</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>