Vue.js前端基础_网页前端怎么使用vue.js-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_58504010/article/details/144352276

步骤三：查看效果

使用浏览器打开 index.html 文件，就能看到页面上显示初始计数为 0，点击 “点击增加计数” 按钮后，计数会随之增加，展示了 Vue.js 实现数据驱动视图更新以及交互功能的基本流程。

你可以根据自己的需求进一步扩展这个案例，比如添加更多的功能、样式等，以此加深对 Vue.js 的理解和掌握。

收起

html

       <button v - on:click="handleClick">点击我</button>

或者缩写形式：

收起

html

       <button @click="handleClick">点击我</button>

这里的handleClick是 Vue 实例的methods部分定义的一个方法，例如：

收起

javascript

       methods: {
         handleClick() {
           console.log('按钮被点击了');
         }
       }

当按钮被点击时，就会在控制台输出 “按钮被点击了”。v - on指令还可以用于绑定其他多种事件，如@keyup（键盘按键抬起事件）、@keydown（键盘按键按下事件）等。例如，在一个输入框中监听回车键按下事件：

收起

html

       <input v - on:keydown.enter="submitForm">

或者缩写形式：

收起

html

       <input @keydown.enter="submitForm">

当在输入框中按下回车键时，就会执行submitForm方法。
3. v - if 和 v - show 指令

收起

html

       <div v - if="isVisible">
         只有当isVisible为真时，我才会出现。
       </div>

在 Vue 实例的data部分定义isVisible：

收起

javascript

       data: {
         isVisible: true
       }

如果isVisible的值变为false，这个div元素会从 DOM 中移除。
对于v - show，例如：

收起

html

       <div v - show="isVisible">
         不管isVisible的值是多少，我都会在DOM中，只是可能隐藏起来。
       </div>

同样在data部分定义isVisible，当isVisible为false时，这个div元素的display属性会被设置为none，从而隐藏起来，但元素本身依然在 DOM 中。
4. v - for 指令

收起

html

       <ul>
         <li v - for="(user, index) in userList" :key="index">{{ user.name }}</li>
       </ul>

在 Vue 实例的data部分定义userList：

收起

javascript

       data: {
         userList: [
           {name: '张三'},
           {name: '李四'},
           {name: '王五'}
         ]
       }

这里v - for指令会遍历userList数组，对于每个元素，会创建一个li元素，并将user.name的值（即用户的名字）显示在li元素中。key属性是必需的，它用于帮助 Vue 识别每个节点的唯一性，在这个例子中，使用index作为key。
5. v - model 指令

收起

html

       <input v - model="message">

在 Vue 实例的data部分定义message：

收起

javascript

       data: {
         message: '初始消息'
       }

当用户在输入框中输入内容时，message的数据会自动更新；反之，当message的数据在其他地方（如通过方法修改）发生变化时，输入框中的内容也会自动更新。在select元素中也可以使用v - model，例如：

收起

html

       <select v - model="selectedOption">
         <option value="option1">选项1</option>
         <option value="option2">选项2</option>
         <option value="option3">选项3</option>
       </select>

在data部分定义selectedOption，当用户选择不同的选项时，selectedOption的值会自动更新，并且如果selectedOption的值在其他地方改变，select元素的选中状态也会相应更新。
6. v - text 和 v - html 指令

介绍一下Vue.js中的v-model指令

详细解释Vue.js中的v-for指令

除了v-bind指令，Vue.js中还有哪些常用的指令？

收起

html

       <div v - text="textData"></div>

在data部分定义textData：

收起

javascript

       data: {
         textData: '这是要显示的纯文本内容'
       }

这个div元素的textContent会被设置为textData的值。
对于v - html，例如：

收起

html

       <div v - html="htmlData"></div>

在data部分定义htmlData：

收起

javascript

       data: {
         htmlData: '<p>这是一段HTML内容</p>'
       }

这个div元素的innerHTML会被设置为htmlData的值，从而将<p>这是一段HTML内容</p>渲染到div元素内部。

渐进式框架
- Vue.js 是一个渐进式 JavaScript 框架。这意味着你可以根据项目的需求，逐步地采用 Vue.js 的功能。它可以在一个现有项目中仅仅作为一个视图层库来使用，比如在一个传统的 HTML 页面中引入 Vue.js，增强页面的交互性；也可以用于构建复杂的单页应用（SPA）。
- 例如，你有一个简单的新闻网站，可能最初只需要使用 Vue.js 来实现文章点赞、评论等交互功能。随着网站的发展，可能会使用 Vue.js 构建整个管理后台等复杂的应用部分。
数据驱动视图
- Vue.js 采用数据驱动的方式来更新视图。它通过建立数据和 DOM 之间的响应式联系，当数据发生变化时，视图会自动更新，而不需要手动操作 DOM 元素。
- 例如，在一个购物车应用中，商品数量的数据变化会自动导致购物车总价的计算和显示更新，以及购物车列表中商品数量的显示变化。数据是 “驱动” 视图变化的核心力量。
组件化
- 组件是 Vue.js 的核心概念之一。一个组件可以看作是一个独立的、可复用的小块，包含了自己的模板（HTML 结构）、数据（JavaScript 对象）、方法（JavaScript 函数）等。
- 比如，在一个电商网站中，可以有商品列表组件，它负责展示商品的图片、名称、价格等信息。这个组件可以在多个页面中复用，如首页的热门商品推荐部分和分类商品展示页面。每个组件都有自己独立的作用域，使得代码的维护和扩展更加容易。
指令
- 指令是带有v -前缀的特殊 HTML 属性。它们用于在 DOM 元素上应用特定的行为。
- 例如：
  - v - bind（缩写为:）：用于将元素的属性绑定到数据上。如<img :src="imageUrl">，imageUrl是 Vue 实例中的数据，通过v - bind指令，图像的src属性会根据imageUrl的数据动态变化。
  - v - on（缩写为@）：用于绑定事件监听器。如<button @click="handleClick">点击我</button>，当按钮被点击时，会调用handleClick方法。
  - v - if和v - show：用于控制元素的显示和隐藏。v - if是真正的条件渲染，根据表达式的值决定元素是否添加到 DOM 中；v - show是通过修改元素的display属性来控制显示，元素始终在 DOM 中。
生命周期钩子
- Vue.js 实例从创建到销毁的过程中会经历一系列的阶段，每个阶段都有对应的生命周期钩子函数。这些函数可以让开发者在特定的阶段执行代码。
- 例如，created钩子函数在 Vue 实例创建完成后被调用，此时数据观测（data observer）和事件 / 生命周期钩子已经配置完成，但挂载阶段还没开始。可以在这个钩子函数中进行数据的初始化、异步数据获取等操作。
响应式原理
- Vue.js 通过Object.defineProperty()方法（在 ES5 环境下）或者Proxy（在 ES6 环境下）来实现数据的响应式。
- 简单来说，当一个对象的属性被定义为响应式时，Vue.js 会对这个属性进行 “追踪”。当属性的值发生变化时，Vue.js 能够检测到这种变化，并更新与之绑定的视图。例如，在一个包含用户信息的对象中，当用户的姓名属性被修改时，所有使用这个姓名属性的视图部分都会自动更新。

以下是一个简单且完整的第一个 Vue.js 案例，实现了在页面上显示一个计数器，点击按钮可以增加计数，涵盖了 Vue.js 基本的实例创建、数据绑定、指令以及方法使用等知识点，具体步骤如下：

步骤一：创建 HTML 文件

首先，新建一个名为 index.html 的文件，代码如下：

收起

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>第一个 Vue.js 案例</title>
  <!-- 引入 Vue.js 的开发版本，可根据实际情况后续切换为生产版本 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 使用插值表达式展示 count 数据 -->
    <p>当前计数: {{ count }}</p>
    <!-- 使用 v-on 指令绑定点击事件到 increment 方法 -->
    <button v-on:click="increment">点击增加计数</button>
  </div>

  <script>
    // 创建 Vue 实例
    var app = new Vue({
      el: '#app', // 挂载到页面中 id 为 app 的元素上
      data: {
        count: 0 // 初始化计数为 0
      },
      methods: {
        increment() {
          // 在方法中修改 count 的值，视图会自动更新
          this.count++;
        }
      }
    });
  </script>
</body>

</html>

步骤二：代码解析

引入 Vue.js 库：
在 HTML 文件的 <head> 部分，通过 <script> 标签引入了 Vue.js 的开发版本（从 CDN 获取）。在实际项目应用中，项目上线时可以换成生产版本以减小文件体积。
创建挂载点：
在 <body> 中有一个 <div> 元素，其 id 为 app，这就是后续 Vue 实例要挂载的 DOM 节点，Vue 会管理这个节点及其内部元素的相关行为和数据展示等操作。
定义 Vue 实例：
在 <script> 部分创建了一个 Vue 实例。
- el 属性指定了实例挂载的 DOM 元素选择器，也就是前面提到的 id 为 app 的 <div>。
- data 属性是一个对象，用于存放页面要展示和操作的数据，这里定义了 count 并初始化为 0，通过插值表达式 {{ count }} 就能在页面上展示这个数据的值。
- methods 属性定义了实例的方法，这里有 increment 方法，在这个方法内部通过 this.count++ 修改了 count 的值。由于 Vue.js 的响应式机制，一旦数据变化，页面上所有和 count 绑定的地方（这里就是通过 {{ count }} 显示计数的 <p> 元素）都会自动更新显示内容。
使用指令和绑定事件：
在 <button> 元素上使用了 v-on:click（通常缩写为 @click）指令，将按钮的点击事件和 increment 方法进行绑定，所以每次点击按钮，就会执行 increment 方法，实现计数的增加。
- 步骤一：引入 Vue.js 库文件
  - 在 HTML 文件的<head>标签内添加<script>标签来引入 Vue.js。对于开发环境，可以使用 Vue.js 的开发版本，它包含了完整的警告和调试模式。例如：
收起

html
```
       <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
```
这是从 jsDelivr CDN（内容分发网络）引入 Vue.js 2.6.14 版本。jsDelivr 是一个免费的公共 CDN，提供了快速可靠的文件分发服务。
步骤二：创建 Vue 应用
- 在 HTML 文件的<body>标签内，创建一个 DOM 元素作为 Vue 实例的挂载点。例如，创建一个<div>元素，设置其id为app：
收起

html
```
       <div id="app"></div>
```
然后在<script>标签内创建一个 Vue 实例并挂载到这个id为app的元素上。例如：
收起

html
```
       <script>
         var app = new Vue({
           el: '#app',
           data: {
             message: 'Hello, Vue!'
           }
         });
       </script>
```
这里创建了一个 Vue 实例app，el属性指定了挂载点（#app是id为app的元素的 CSS 选择器），data属性包含了要在视图中显示的数据，在这个例子中是message变量。可以通过在挂载点的 HTML 元素中使用插值表达式{{ message }}来显示这个数据。
2. 使用 NPM 安装（适合大型项目和开发环境）
步骤一：初始化项目（如果没有初始化过）
- 打开终端或命令提示符，进入项目目录，运行npm init -y。这会创建一个package.json文件，用于管理项目的依赖关系。例如：

收起

plaintext

       mkdir my - vue - project
       cd my - vue - project
       npm init -y

步骤二：安装 Vue.js
- 在项目目录下运行npm install vue。这会将 Vue.js 安装到项目的node_modules目录下，并将其添加到package.json文件的dependencies列表中。例如：
收起

plaintext
```
       npm install vue
```
步骤三：创建并使用 Vue 组件（以单文件组件为例）
- 创建一个.vue文件，如App.vue。在这个文件中，定义一个 Vue 组件，包括模板（template）、脚本（script）和样式（style）部分。例如：

收起

html

       <template>
         <div>
           <p>{{ message }}</p>
         </div>
       </template>
       <script>
         export default {
           data() {
             return {
               message: 'Hello from App.vue'
             };
           }
         };
       </script>
       <style>
         /* 这里可以添加组件的样式 */
       </style>

为了使用这个组件，需要在 JavaScript 文件中引入并挂载它。通常会使用构建工具（如 Vue CLI）来处理组件的打包和挂载。如果不使用构建工具，可以手动创建一个index.html文件和一个main.js文件来挂载组件。在main.js文件中：
收起

javascript
```
       import Vue from 'vue';
       import App from './App.vue';
       new Vue({
         render: h => h(App)
       }).$mount('#app');
```
这里import Vue from 'vue'引入了 Vue.js 库，import App from './App.vue'引入了App.vue组件。new Vue({...}).$mount('#app')创建了一个 Vue 实例，通过render函数将App组件渲染并挂载到id为app的元素上。然后在index.html文件中：

收起

html
```
       <!DOCTYPE html>
       <html lang="en">
       <head>
         <meta charset="UTF - 8">
       </head>
       <body>
         <div id="app"></div>
         <script src="main.js"></script>
       </body>
       </html>
```
这就完成了一个简单的基于 NPM 安装和使用 Vue.js 的过程。在实际开发中，通常会使用构建工具来更方便地管理和开发 Vue 项目，如 Vue CLI 可以帮助你快速搭建项目结构、处理热更新、代码打包等复杂的任务。
v - bind 指令
- 基本介绍
  - v - bind是用于将 HTML 元素的属性与 Vue 实例中的数据进行绑定的指令。这样可以根据数据的变化动态地更新元素的属性。它的完整语法是v - bind:属性名="表达式"，不过在实际开发中，更常用的是它的缩写形式:属性名。
- 示例代码及解释
  - 例如，在一个图片展示的组件中，有一个img元素，其src属性需要根据数据来动态变化：
收起

html
```
       <img v - bind:src="imageUrl" alt="示例图片">
```
或者使用缩写形式：

收起

html
```
       <img :src="imageUrl" alt="示例图片">
```
这里的imageUrl是 Vue 实例中的一个数据属性。当imageUrl的值发生变化时，img元素的src属性会自动更新，从而显示不同的图片。例如，在 Vue 实例的data部分定义imageUrl：

收起

javascript
```
       data: {
         imageUrl: 'https://example.com/image1.jpg'
       }
```
如果在某个方法中修改了imageUrl的值，比如：

收起

javascript
```
       methods: {
         changeImage() {
           this.imageUrl = 'https://example.com/image2.jpg';
         }
       }
```
当changeImage方法被调用时，图片就会切换。
2. v - on 指令
基本介绍
- v - on指令用于给 HTML 元素绑定事件监听器，当事件被触发时，会执行对应的 JavaScript 方法。它的完整语法是v - on:事件名="表达式"，通常缩写为@事件名。
示例代码及解释
- 例如，在一个按钮点击事件的场景中：
基本介绍
- v - if和v - show都用于控制元素在页面上的显示和隐藏，但它们的实现方式有所不同。
- v - if是 “真正的” 条件渲染。它会根据表达式的值来决定是否将元素添加到 DOM 中。如果表达式的值为false，元素及其所有子元素都不会在 DOM 中存在。
- v - show只是简单地通过修改元素的CSS属性display来控制显示和隐藏。元素在初始渲染时就会被添加到 DOM 中，不管表达式的值是多少。
示例代码及解释
- 对于v - if，例如：
基本介绍
- v - for指令用于遍历数组或对象，并根据遍历的结果渲染元素。它的语法是v - for="(item, index) in items"，其中item是数组中的元素，index是元素的索引（可选），items是要遍历的数组。
示例代码及解释
- 例如，在一个展示用户列表的组件中，有一个ul列表，要展示多个用户的名字：
基本介绍
- v - model指令主要用于在表单元素（如input、select、textarea等）和 Vue 实例中的数据之间建立双向数据绑定。它使得数据的变化可以在表单元素和数据之间自动更新。
示例代码及解释
- 例如，在一个简单的输入框场景中：
基本介绍
- v - text指令用于更新元素的textContent，它会将表达式的值作为纯文本内容进行渲染，覆盖元素原有的文本内容。
- v - html指令用于更新元素的innerHTML，它可以将表达式的值作为 HTML 片段进行渲染，需要注意的是，使用v - html可能会带来安全风险，如 XSS（跨站脚本攻击），所以要确保数据来源是可信的。
示例代码及解释
- 对于v - text，例如：