Java 阶段四 Day04 Vue框架及基本指令

企业开发 2024-11-04 18:59:23 阅读次数: 0

Java 阶段四 Day04 Vue框架及基本指令

Vue框架

Vue框架概述

Vue.js（通常称为 Vue 或 VueJS）是一个用于构建用户界面的开源JavaScript框架。Vue.js 的核心库专注于视图层，允许开发者构建交互性、动态和高性能的单页面应用（SPA）和用户界面组件。

  • 框架的两种用法：
    • 多页面应用：在html页面中引入vue.js框架文件
    • 单页面应用：通过脚手架的方式使用VUE框架

如何引入Vue.js

  1. 通过 CDN 引入：

    可以直接通过 Content Delivery Network（CDN）引入 Vue.js。这是最简单的方式，适用于快速原型开发或学习 Vue.js。

    在 HTML 文件中添加以下代码：

    <!-- 开发环境版本，包含警告和调试工具 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<!-- 生产环境版本，删除了警告和调试工具，推荐用于生产环境 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> -->

    在上述代码中，您可以选择引入开发环境版本或生产环境版本，具体取决于您的需求。

  2. 使用包管理工具引入：

    如果您的项目使用了包管理工具如npm或Yarn，您可以通过以下命令来安装 Vue.js 并引入它：

    使用npm：

    npm install vue

    使用Yarn：

    yarn add vue

    然后，在您的 JavaScript 代码中，您可以使用import或require语句引入 Vue.js：

    import Vue from 'vue'; // ES6导入
// 或者
const Vue = require('vue'); // CommonJS导入

  3. 使用Vue CLI创建项目：

    如果您计划开始一个全新的 Vue.js 项目，最好的方式是使用 Vue CLI（Vue Command Line Interface）。Vue CLI 会帮助您快速搭建一个现代化的 Vue.js 项目，并自动引入 Vue.js。

    首先，您需要安装 Vue CLI（如果尚未安装），然后使用它创建新项目：

    npm install -g @vue/cli
vue create my-project

    这将创建一个包含 Vue.js 的新项目，并提供一系列配置选项供您选择。

  4. 把vue.js文件下载到本地后引入

    <script src="js/vue.min.js"></script>

Vue框架的HellowWorld

  1. 首先，确保已经引入了 Vue.js，可以通过使用 CDN 引入或者包管理工具来实现。

  2. 创建一个 HTML 文件，例如 index.html，并在文件头部引入 Vue.js：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, Vue.js</title>
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 这里将显示 "Hello, World!" -->
        {
     
     { message }}
    </div>

    <!-- 创建一个 Vue 实例 -->
    <script>
        var app = new Vue({
        
        
            el: '#app',
            data: {
        
        
                message: 'Hello, World!'
            }
        });
    </script>
</body>
</html>

  3. 在上述示例中，我们创建了一个 Vue 实例，并将其挂载到一个具有 id="app" 的 DOM 元素上。该实例具有一个数据属性 message，用于存储 “Hello, World!” 字符串。

  4. 在模板中，我们使用双花括号 { { message }} 将数据属性 message 插值到页面中。这意味着 “Hello, World!” 将显示在具有 id="app" 的元素内。

  5. 最后，通过创建一个 Vue 实例并将其挂载到 DOM 元素上，我们实现了数据绑定和显示 “Hello, World!” 的效果。

Vue框架执行原理

代码中 new 的VUE对象就相当于是MVVM设计模式中的VM视图模型，此对象负责将页面中发生改变的元素和data里面的变量在内存中绑定，并且会不断监听变量值的改变，当检测到变量值发生改变时，会自动从内存中找到与之对应的元素，并且让元素的内容跟着发生改变

基本指令

文本相关指令

在 Vue.js 中，文本相关指令用于控制元素的文本内容，以及在 HTML 模板中动态显示数据。以下是一些常用的文本相关指令：

  1. v-text 指令：v-text 指令用于替代元素的 textContent，将元素的文本内容设置为指定的表达式的值。

    示例：

    <p v-text="message"></p>

    var app = new Vue({
      
      
    el: '#app',
    data: {
      
      
        message: 'Hello, Vue.js!'
    }
});

    在这个示例中，<p> 元素的文本内容将被设置为 message 数据属性的值，显示为 “Hello, Vue.js!”。

  2. v-html 指令：v-html 指令用于将元素的 HTML 内容设置为指定的表达式的值。注意要谨慎使用，因为它会将 HTML 字符串解析为实际的 HTML 内容，可能存在安全风险。

    示例：

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

    var app = new Vue({
      
      
    el: '#app',
    data: {
      
      
        htmlContent: '<strong>This is bold text.</strong>'
    }
});

    这将在 <div> 元素内显示加粗的文本。

  3. { { }} 插值表达式：双花括号 { { }} 插值表达式是一种简便的文本插值方式，用于将数据绑定到元素的文本内容。

    示例：

    <p>{
     
     { message }}</p>

    var app = new Vue({
      
      
    el: '#app',
    data: {
      
      
        message: 'Hello, Vue.js!'
    }
});

    这将在 <p> 元素内显示 “Hello, Vue.js!”。

  4. v-pre 指令：v-pre 指令用于跳过元素和其子元素的编译过程，保持原始的文本内容不会被 Vue.js 解析，不会将message内容打印出来。

    示例：

    <p v-pre>{
     
     { message }}</p>

    在这个示例中，{ { message }} 不会被 Vue.js 解析，而原始内容 { { message }} 会保留在 <p> 元素内。

属性绑定和双向绑定

属性绑定和双向绑定是 Vue.js 中两个重要的概念，用于处理数据与视图之间的关系。

属性绑定（One-Way Data Binding）：

属性绑定是指将数据从 Vue 实例的数据模型绑定到视图元素的属性，以实现数据的单向传递，即从数据模型到视图。这意味着当数据模型发生更改时，视图会相应地更新。在 Vue 中，通常使用 v-bind 指令来进行属性绑定。

示例：

<div id="app">
    <p v-bind:title="message">Hover over me</p>
</div>

var app = new Vue({
    
    
    el: '#app',
    data: {
    
    
        message: 'This is a tooltip message.'
    }
});

在这里插入图片描述

在上述示例中，我们使用 v-bind:title 将 message 数据绑定到 <p> 元素的 title 属性上。当鼠标悬停在该元素上时，浏览器将显示提示消息。

双向绑定（Two-Way Data Binding）：

双向绑定是指数据模型与视图之间的双向同步。这意味着当您更改输入字段的值时，数据模型将自动更新，反之亦然。在 Vue 中，通常使用 v-model 指令来实现双向绑定。

示例：

<div id="app">
    <input v-model="message" placeholder="Type something">
    <p>You typed: {
   
   { message }}</p>
</div>

var app = new Vue({
    
    
    el: '#app',
    data: {
    
    
        message: ''
    }
});

在上述示例中，我们使用 v-model 将 message 数据绑定到输入字段，并在下方的 <p> 元素中显示用户输入的内容。这意味着当用户在输入字段中键入文本时，message 数据将自动更新以反映输入的值，并且任何对 message 数据的更改也会反映在输入字段中。

总结：

  • 属性绑定（One-Way Data Binding）用于将数据从数据模型传递到视图元素的属性，使数据的更改能够在视图中反映出来。
  • 双向绑定（Two-Way Data Binding）不仅可以将数据从数据模型传递到视图，还可以将视图中的更改自动同步回数据模型，实现双向同步。
  • v-bind 用于属性绑定，而 v-model 用于双向绑定。
  • 双向绑定通常用于表单输入元素，使用户能够与表单交互，并且这些交互能够直接影响数据模型。

事件绑定

在Vue.js中，事件绑定是将DOM元素的事件与Vue实例中的方法关联起来，以实现在事件触发时执行特定的操作。Vue.js提供了一种简单的方式来绑定事件，通常使用v-on指令（也可以使用简写@）来实现。

以下是一个事件绑定的示例：

<div id="app">
    <button v-on:click="sayHello">点击我</button>
    <!--也可以使用事件简写@来实现相同的效果-->
    <button @click="sayHello">点击我</button>
</div>

var app = new Vue({
    
    
    el: '#app',
    methods: {
    
    
        sayHello: function() {
    
    
            alert('Hello, Vue.js!');
        }
    }
});

在上述示例中，我们绑定了一个点击事件（click事件）到<button>元素上，当按钮被点击时，会执行sayHello方法。v-on:click指令用于监听按钮的点击事件，然后调用Vue实例中的sayHello方法。在methods属性中定义了sayHello方法，该方法弹出一个包含"Hello, Vue.js!"的警告框。

事件绑定不仅适用于点击事件，还可以用于监听各种其他事件，如mouseover、keydown、submit等。您可以通过指定不同的事件名称来监听不同的事件。

除了绑定DOM元素上的事件，您还可以将事件绑定到组件上，以便在组件的生命周期中执行特定操作。事件绑定是Vue.js中实现交互性的关键机制之一，允许您响应用户操作并更新应用程序的状态。

v-for循环遍历指令

v-for 是 Vue.js 中用于循环遍历数组或对象的指令。它允许您在模板中重复渲染元素，以根据数据集合动态生成内容。

以下是使用 v-for 的基本示例：

<div id="app">
  <ul>
    <li v-for="item in items">{
   
   { item }}</li>
  </ul>
</div>

var app = new Vue({
    
    
  el: '#app',
  data: {
    
    
    items: ['Item 1', 'Item 2', 'Item 3']
  }
});

在这里插入图片描述

在这个示例中，我们使用 v-for="item in items" 遍历名为 items 的数组，然后在 <li> 元素内重复渲染数组中的每个元素，生成一个无序列表。

v-for 还可以带有索引，如下所示：

<div id="app">
  <ul>
    <li v-for="(item, index) in items">
      {
   
   { index + 1 }}. {
   
   { item }}
    </li>
  </ul>
</div>

在这里插入图片描述

在这个示例中，我们在 v-for 中添加了 (item, index)，以获取当前元素和索引。然后，我们在列表中显示每个元素的索引和值。

除了遍历数组，v-for 也可以用于遍历对象的属性。以下是一个遍历对象属性的示例：

<div id="app">
  <ul>
    <li v-for="(value, key) in user">
      {
   
   { key }}: {
   
   { value }}
    </li>
  </ul>
</div>

var app = new Vue({
    
    
  el: '#app',
  data: {
    
    
    user: {
    
    
      name: 'John',
      age: 30,
      email: '[email protected]'
    }
  }
});

在这里插入图片描述

在这个示例中，我们遍历了名为 user 的对象的属性，并在列表中显示每个属性的键和值。

v-for 还可以与 v-bind:key 一起使用，以提供唯一的键，帮助 Vue.js 识别每个重复元素的身份。这对于处理动态数据和优化性能非常重要。

总结：

  • v-for 是用于循环遍历数组和对象的指令。
  • 它允许您在模板中动态生成内容，根据数据集合重复渲染元素。
  • 您可以使用 (item, index) 语法来获取当前元素和索引。
  • 为了更好地处理重复元素，请使用 v-bind:key 来提供唯一的键。

显示隐藏相关指令

在Vue.js中，您可以使用一些指令来控制元素的显示和隐藏。以下是一些常见的显示和隐藏相关指令：

  1. v-if 和 v-else-if 指令：

    v-if 指令用于根据条件来显示或隐藏元素。如果条件为真，元素将被渲染，否则将被隐藏。v-else-if 可以与 v-if 一起使用来添加额外的条件。
    使用 v-if控制显示和隐藏：
    示例：

     <div id="app">
  	 <p v-if="isVisible">这个元素会根据条件显示或隐藏。</p>
  	 <p v-else>当条件不满足时，显示这个元素。</p>
   	<button @click="toggleVisibility">切换可见性</button>
 </div>

    var app = new Vue({
      
      
  el: '#app',
  data: {
      
      
    isVisible: true // 初始时可见
  },
  methods: {
      
      
    toggleVisibility: function() {
      
      
      this.isVisible = !this.isVisible;
    }
  }
});

    在这里插入图片描述
    在这里插入图片描述

    在上述示例中，我们使用 v-if 和 v-else 来控制两个段落元素的显示和隐藏。初始时，isVisible 设置为 true，因此第一个段落可见。当单击按钮时，toggleVisibility 方法会切换 isVisible 的值，从而切换元素的可见性。

  2. v-show 指令：

    v-show 指令也用于根据条件来显示或隐藏元素，但不会从DOM中删除元素，而是使用CSS的display属性来切换元素的可见性。

    示例：

    <div id="app">
   <p v-show="isVisible">这个元素会根据条件显示或隐藏，但不会从DOM中删除。</p>
   <button @click="toggleVisibility">切换可见性</button>
 </div>

    var app = new Vue({
      
      
  el: '#app',
  data: {
      
      
    isVisible: true // 初始时可见
  },
  methods: {
      
      
    toggleVisibility: function() {
      
      
      this.isVisible = !this.isVisible;
    }
  }
});

    在这里插入图片描述
    在这里插入图片描述

    在这个示例中，我们使用 v-show 来控制段落元素的显示和隐藏。初始时，isVisible 设置为 true，因此段落可见。单击按钮时，toggleVisibility 方法会切换 isVisible 的值，但不会从DOM中删除段落元素。

  3. v-if vs. v-show：

    • 当元素需要频繁切换显示和隐藏时，推荐使用 v-show，因为它不会频繁操作DOM，性能更好。
    • 当元素在初始化时可能需要隐藏，并且很少改变可见性时，可以使用 v-if。

  4. v-cloak 指令：

    v-cloak 指令用于防止Vue.js模板在加载时闪烁（即在Vue实例初始化之前，模板会以未编译的形式显示在页面上）。通常，您将在样式表中定义一个隐藏元素的样式，然后使用v-cloak来确保元素在Vue.js准备好时再显示出来。

    示例：

    <style>
  [v-cloak] {
        
         display: none; }
</style>
<div v-cloak>
  <!-- 这个元素将在Vue.js准备好后显示出来。 -->
</div>

猜你喜欢

转载自blog.csdn.net/weixin_44693429/article/details/133307901
今日推荐
周排行
Android图片与下拉框
java常用的设计模式之单例模式
zabbix自动化监控之自动注册
杨老师课堂之Excel VBA 程序开发第八讲使用工作表函数
Android 去掉底部虚拟导航栏
Android Studio 3.2 Beta 4 发布，功能改进和修复
Linux-3.5_总线驱动设备
Qt QTableView QStandardItemModel用法
session处理
分享几个实用的方法
每日归档
更多
2025-02-06(0)
2025-02-05(0)
2025-02-04(0)
2025-02-03(0)
2025-02-02(0)
2025-02-01(0)
2025-01-31(0)
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022