Создание каркасов Vue, ссылка, двусторонняя привязка, запрос axios. .

Vue CLI — это инструмент формирования леса, официально предоставляемый Vue.js. Он позволяет быстро создавать проекты Vue.js и предоставляет некоторые общие инженерные функции, такие как упаковка кода, горячая перезагрузка, модульное тестирование и т. д. Ниже приведены шаги по созданию и использованию Vue CLI:

1. Установите Node.js

Во-первых, вам необходимо установить Node.js локально. Вы можете скачать и установить последнюю версию Node.js с официального сайта https://nodejs.org/.

1. Установите Vue CLI

Введите следующую команду в терминале, чтобы установить Vue CLI:

npm install -g @vue/cli

1. Создать новый проект

В терминале перейдите в каталог, в котором вы хотите создать проект, и введите следующую команду, чтобы создать новый проект:

vue create 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:

cd todo-list
npm install element-ui --save

1. Написание компонентов и стилей

Создайте файл TodoList.vue в каталоге src/comComponents и напишите код компонента 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. Использование компонента TodoList в App.vue

В файле src/App.vue используйте компонент TodoList и импортируйте стиль пользовательского интерфейса Element:

<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 применим только к некоторым элементам формы (таким как  input, textareaи select т. д.), а двустороннюю привязку других элементов DOM необходимо реализовать с помощью пользовательских инструкций.

рефери используют

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 в обратном вызове  и присвоили  свойству полученные данные  . Если при запросе возникает ошибка,   установите свойство   в обратном вызове  , присвоив  свойству сообщение об ошибке  .loadingfalsedatacatchloadingfalseerror

В шаблоне мы используем инструкции условного рендеринга Vue.js   для отображения различного контента v-if на основе  значений  и  атрибутов. Если   свойство равно  , отображается «Загрузка...»; если   свойство не имеет значения  , отображается сообщение об ошибке; если   свойство не имеет значения  , директива используется   для перебора данных и их преобразования в список.loadingerrordataloadingtrueerrornulldatanullv-for