vue脚手架创建,ref、双向绑定,axios请求。。

Vue CLI 是 Vue.js 官方提供的一个脚手架工具,可以快速搭建 Vue.js 项目,并提供了一些常见的工程化功能,如代码打包、热重载、单元测试等。以下是 Vue CLI 的搭建和使用步骤:

  1. 安装 Node.js

首先需要在本地安装 Node.js,可以到官网 https://nodejs.org/ 下载并安装最新版的 Node.js。

  1. 安装 Vue CLI

在终端中输入以下命令,安装 Vue CLI:

npm install -g @vue/cli

  1. 创建新项目

在终端中进入要创建项目的目录,并输入以下命令来创建新项目:

vue create my-project

其中,"my-project" 是你要创建的项目名称,可以自己修改。

  1. 启动开发服务器

项目创建完成后,进入项目目录,并输入以下命令来启动开发服务器:

cd my-project
npm run serve

这样就可以在浏览器中访问 http://localhost:8080 查看项目效果了。

以上是 Vue CLI 的基本使用流程,接下来以一个简单的 TodoList 为例,演示一下如何使用 Vue CLI 创建项目。

  1. 创建项目

在终端中输入以下命令来创建新项目:

vue create todo-list
  1. 安装 Element UI

在终端中进入项目目录,安装 Element UI:

cd todo-list
npm install element-ui --save
  1. 编写组件和样式

在 src/components 目录下创建一个 TodoList.vue 文件,编写 TodoList 组件的代码:

<template>
  <div class="todo-list">
    <el-input
      class="add-todo-input"
      v-model="newTodo"
      placeholder="请输入待办事项"
      @keyup.enter.native="addTodo"
      size="large">
    </el-input>
    <ul class="todos">
      <li v-for="(todo, index) in todos" :key="index" class="todo">
        <el-checkbox v-model="todo.done">{{ todo.text }}</el-checkbox>
        <el-button type="text" @click="deleteTodo(index)">删除</el-button>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        newTodo: '',
        todos: []
      }
    },
    methods: {
      addTodo() {
        if (this.newTodo !== '') {
          this.todos.push({
            text: this.newTodo,
            done: false
          })
          this.newTodo = ''
        }
      },
      deleteTodo(index) {
        this.todos.splice(index, 1)
      }
    }
  }
</script>

<style scoped>
  .todo-list {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
  }
  .add-todo-input {
    width: 100%;
    margin-bottom: 20px;
  }
  .todos {
    list-style: none;
    padding: 0;
  }
  .todo {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .todo .el-checkbox {
    flex: 1;
  }
</style>

在样式中,使用了 Element UI 提供的样式类,使 TodoList 组件具有了基本的样式。

  1. 在 App.vue 中使用 TodoList 组件

在 src/App.vue 文件中,使用 TodoList 组件,并导入 Element UI 的样式:

<template>
  <div id="app">
    <div class="container">
      <h1 class="title">Vue TodoList</h1>
      <TodoList />
    </div>
  </div>
</template>

<script>
  import TodoList from './components/TodoList.vue'
  import 'element-ui/lib/theme-chalk/index.css'

  export default {
    name: 'App',
    components: {
      TodoList
    }
  }
</script>

<style>
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
  }
  .title {
    text-align: center;
  }
</style>
  1. 运行项目

在终端中输入以下命令来启动开发服务器:

npm run serve

打开浏览器,访问 http://localhost:8080,就可以看到 TodoList 效果。

以上的例子主要演示了如何使用 Vue CLI 创建项目、如何使用 Element UI 完成新建 Todo 和删除 Todo 的功能,以及如何将实现的组件和样式引入到 App.vue 中使用。

双向绑定

Vue.js 的双向绑定是指界面上的数据与数据源(通常是 JavaScript 对象)之间的双向绑定,即当界面上的数据发生变化时,数据源也会跟随变化,并且当数据源发生变化时,界面上显示的数据也会相应地更新。Vue.js 借助于其响应式系统实现了这个双向绑定机制,使得开发者可以方便地实现数据与界面之间的同步。

下面是一个简单的双向绑定的例子,通过 v-model 指令将 message 与文本框的值进行双向绑定:

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>
new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js!"
  }
});

在上面的例子中,当文本框中的值发生变化时,message 会随之更新,当 message 的值发生变化时,界面上显示的文本也会相应更新。

Vue.js 的双向绑定机制是通过实现一个响应式的数据模型来实现的。当数据模型的某个属性发生变化时,Vue.js 的响应式系统会自动检测变化并更新相应的 DOM 元素,从而实现数据与界面的同步更新。需要注意的是,Vue.js 的双向绑定机制只适用于一些表单元素(如 inputtextareaselect 等),对于其他 DOM 元素的双向绑定则需要使用自定义指令等方式实现。

refs使用

ref 是 Vue.js 提供的一个指令,可以用来在 DOM 元素或组件上添加一个唯一的标识。通过 ref,我们可以在组件内部直接获取到对应的 DOM 元素或组件实例,从而方便地操作其属性或方法。

下面是一个 ref 的例子,我们通过 ref 将一个输入框和按钮分别标识为 input 和 button,并在组件内部使用 $refs 属性来获取对应的 DOM 元素:

<template>
  <div>
    <input type="text" ref="input">
    <button @click="handleClick" ref="button">点击</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$refs.input.value);
      console.log(this.$refs.button.innerText);
    }
  }
};
</script>

在上面的例子中,我们在模板中为输入框和按钮分别添加了 ref 属性,并分别指定为 input 和 button。在组件内部的 handleClick 方法中,我们使用了 $refs 属性来获取对应的 DOM 元素,从而获取输入框的值和按钮的文本内容。

需要注意的是,为了使 $refs 属性生效,我们必须在组件被挂载到 DOM 后才能访问 $refs。因此,在上面的例子中,我们必须等到按钮被点击时才能访问 $refs

另外,需要注意的是,使用 ref 可能会破坏 Vue.js 的数据驱动机制,因为我们直接操作了 DOM 元素或组件实例,而不是通过修改数据来更新界面。因此,在使用 ref 时需要注意谨慎使用,避免出现意料之外的结果。

点击事件进行请求

<template>
  <div>
    <button @click="fetchData">点击获取数据</button>
    <div v-if="loading">Loading...</div>
    <div v-if="error">{{ error }}</div>
    <ul v-if="data">
      <li v-for="(item, index) in data" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      loading: false, // 是否正在加载数据
      error: null, // 错误消息
      data: null // 获取到的数据
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      this.error = null;

      axios
        .get('/api/data')
        .then(response => {
          this.loading = false;
          this.data = response.data;
        })
        .catch(error => {
          this.loading = false;
          this.error = error.message;
        });
    }
  }
};
</script>
 

在上面的例子中,我们在模板中定义了一个按钮,绑定了 fetchData 方法。在 fetchData 方法中,我们首先设置 loading 属性为 true,用于在界面上显示“正在加载”的提示。然后,我们使用 axios 库发送了一个 GET 请求,并在 then 回调中将 loading 属性设置为 false,将获取到的数据赋值给 data 属性。如果请求出现错误,则在 catch 回调中将 loading 属性设置为 false,将错误消息赋值给 error 属性。

在模板中,我们使用了 Vue.js 的条件渲染指令 v-if 来根据 loadingerror 和 data 属性的值来显示不同的内容。如果 loading 属性为 true,则显示“Loading...”;如果 error 属性不为 null,则显示错误消息;如果 data 属性不为 null,则使用 v-for 指令遍历数据并渲染到列表中。

文章来源地址:https://www.uudwc.com/A/BvjjW/

原文地址:https://blog.csdn.net/qq_56921846/article/details/132804006

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

上一篇2023年09月14日 23:13
状态管理艺术——借助Spring StateMachine驭服复杂应用逻辑
下一篇 2023年09月14日 23:13