Подробное объяснение принципа v-модели

Vue.js

v-model — одна из многих директив, предоставляемых фреймворком Vue, ее основная функция — реализовать в виде<input>,<textarea>а также<select>Создайте двустороннюю привязку данных к элементу метки.

Что такое двусторонняя привязка данных? Прежде чем объяснять директиву v-model, давайте поговорим о двусторонней привязке данных!

двусторонняя привязка данных

Без лишних слов давайте просто покажем код примера v-модели!

// 定义 v-model 示例组件
Vue.component('bindData', {
  template:`
    <div>
      <p>this is bindData component!</p>
			<button @click="handleChange">change input value</button>
      <input type="text" v-model="inputValue" />
			<p>{{inputValue}}</p>
    </div>
  `,
  data() {
    return {
      inputValue: 'hello'
    }
  },
  methods:{
    // 点击按钮改变 input 的值
    handleChange() {
      this.inputValue = `I'm changed`;
    }
  }
});

const app=new Vue({
  el: '#app',
  template: `
    <div>
      <bindData />
    </div>
  `
});

Я считаю, что приведенный выше простой пример кода является рутинной операцией для студентов, которые участвовали в разработке проектов стека технологий на основе Vue.Если вы не участвовали в разработке проектов стека технологий на основе Vue или не очень хорошо знакомы с Vue , я возражаю, ты сначала проверьОфициальный сайтdocs, попробуйте один или два проекта, а затем вернитесь к этой статье, и вы обязательно получите новое понимание v-модели!

Приведенный выше пример кода выполняет очень волшебную функцию, связывая v-model с входным тегом:

  • Сначала привяжите директиву v-model к входному тегу.data_（如果你还不知道встроенное свойство данных этого примера Vue, вы можете нажать _здесь_) свойство inputValue _;

  • Поскольку свойство inputValue $data имеет начальное значение hello, при монтировании компонента значение, отображаемое на входе, является hello, а значение, отображаемое в теге p под тегом input, такжеhello;

  • Когда компонент отображается, введите значение во ввод и обнаружите, что тег p под тегом ввода показывает _ _Значение, отображаемое в данный момент входным тегом;


* Наконец, щелкните тег кнопки над тегом ввода и обнаружите, что значение тега ввода и содержимое, отображаемое в теге p, изменились одновременно, а содержимое _displayed такое же, и оба отображаются так, как я я изменился_.

v-model

Выше перечислены некоторые операции и показаны в деталях.Оглядываясь назад, можно сказать, что это двусторонняя привязка данных! В этот момент, если вы не очень хорошо знаете принцип реализации v-модели, вы можете успокоиться и подумать или предположить, как внутренняя работа v-модели основана на уже известных вам знаниях (не будьте боюсь подумать неправильно 💪 ).

Прошло несколько минут. . . [косящийся смех]

Связаться с v-моделью

Теперь давайте проанализируем это вместе:

  • 1. Начните с атрибута inputValue, потому что единственной связью между тегом input, v-model, тегом кнопки и тегом p является этот атрибут inputValue.Если вы мне не верите, просто посмотрите на пример кода!

  • 2. Поскольку входной атрибут определен в $data, это адаптивные данные _ (если вы не знаете, что такое адаптивные данные, вы можете нажать _здесь), в соответствии с характеристиками адаптивных данных: ** Когда значение данных изменяется, оно будет управлять изменением представления и отображать измененные данные, ** затем изменится содержимое, отображаемое соответствующим тегом p, привязанным к свойству inputValue.

  • 3. Когда мы вводим значение на вход, содержимое, отображаемое тегом p, также изменяется соответственно.В соответствии с характеристиками отзывчивых данных здесь должно быть инициировано изменение значения inputValue, а значение ввода на этом время присваивается inputValue, Это привело к изменению содержимого тега p;

  • 4. При нажатии кнопки значения, отображаемые тегами input и p, изменяются, а отображаемые значения совпадают В функции обработчика кликов, привязанной к кнопке, мы напрямую присваиваем новое значение inputValue . Тег p отображается для отображения значения свойства inputValue, поэтому, конечно, он изменился, а как насчет ввода?

  • 5. Насколько нам известно, на входе есть атрибут value.Мы можем установить отображаемое значение для ввода в соответствии с атрибутом value. После нажатия кнопки мы устанавливаем новое значение для inputValue, и отображаемое значение ввода также меняется.Должна быть операция для установки значения атрибута value ввода;

  • 6. В пунктах 3 и 5 показано, что есть две неявные операции над вводом: установка inputValue и установка свойства value ввода. Но на входном теге не показано действие привязки, только директива v-model.

❓ Здесь мы предполагаем, что эти две неявные операции инкапсулированы v-моделью.

Навязчивая трансформация v-модель

По анализу вышеперечисленных 6 пунктов или по имеющимся у нас знаниям немного переписываем код:

// 定义 v-model 示例组件改写
Vue.component('bindData1', {
  template:`
    <div>
      <p>this is bindData1 component!</p>
			<button @click="handleChange">change input value</button>
      <input type="text" :value="inputValue" @change="handleInputChange" />
			<p>input 中的值为：{{inputValue}}</p>
    </div>
  `,
  data() {
    return {
      inputValue: 'hello'
    }
  },
  methods:{
    // 处理 input 输入 change 事件
    handleInputChange(e) {
      this.inputValue = e.target.value;
    },
    
    // 点击按钮改变 input 的值
    handleChange() {
      this.inputValue = `I'm changed`;
    }
  }
});

const app=new Vue({
  el: '#app',
  template: `
    <div>
      <bindData1 />
    </div>
  `
});

Модифицированный код может достичь того же эффекта двусторонней привязки данных, что и до модификации, но пример кода до модификации, код после модификации в основном изменен в двух местах:

  • 1. Удалена инструкция v-model во входном теге, заменена инструкцией v-bind:value (аббревиатура: значение) для привязки свойства inputValue и добавлено событие v-on:change (аббревиатура);

  • 2. Добавлена ​​функция обработки изменения ввода.Логика функции заключается в присвоении значения текущего тега ввода свойству inputValue $data

Погрузитесь в v-модель

Видя это, вы бормочете: оба этих двух разных кода могут добиться одинакового эффекта двухсторонней привязки данных, что точно не совпадение, между этими двумя методами обработки должна быть какая-то связь.

Да, приведенные выше два примера в основном эквивалентны реализациям. Модифицированный пример представляет собой сложную реализацию до модификации, то есть v-model — это просто своего рода инкапсуляция или синтаксический сахар, который отвечает за мониторинг событий пользовательского ввода для обновления данных и выполняет специальную обработку в некоторых экстремальных сценариях.

v-model игнорирует начальные значения атрибутов value, checked и selected всех элементов формы и всегда использует данные экземпляра Vue в качестве источника данных. Вы должны объявить начальное значение в параметре данных компонента через JavaScript.

Использование v-model для разных тегов HTML отслеживает разные атрибуты и генерирует разные события:

  • использование элементов text и textareavalueсвойства иinput мероприятие;

  • флажок и использование радиоcheckedсвойства иchange мероприятие;

  • Поле выбора будетvalueкак опора и воляchangeкак событие.

Увидеть это - не внезапное осознание! Ниже приведен пример выбора, другие примеры можно найти наОфициальный сайт Vue:

Feb-26-2019 12-57-55.gif

V-модель пользовательского компонента

Предыдущий контент только объясняет использование v-model для собственных тегов формы. Частота использования v-model при использовании компонентов, предоставляемых сторонними библиотеками пользовательского интерфейса в обычной разработке, также очень хороша. Затем v-model для пользовательских компонентов. Как это это достигнуто?

В пользовательских компонентах v-model по умолчанию будет использовать свойство с именем value и событие с именем input , но для разных элементов формы свойство value будет использоваться для разных целей (как мыупомянутый выше), такие как переключатели и флажки, отображаются как отмеченные. Чтобы различать эти различные функции представления, Vue предоставляет свойство конфигурации модели для компонентов. Модель — это объект: она предоставляет свойства prop для указания свойства значения компонента, а событие определяет событие, которое должно запускаться при изменении значения.

Сказав все это, давайте перейдем к примеру кода!

// 自定义组件 checkbox
Vue.component('checkbox', {
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `,
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
});

// 使用自定义组件 
Vue.component('useCheckbox', {
  template: `
		<checkbox v-model="checkStatus" @change="handleChange"></checkbox>
	`,
  data() {
  	return {
    	checkStatus: false
    }
  },
  methods: {
  	handleChange(checked) {
    	// do something
    }
  }
});

Значение checkStatus в примере кода будет передано в это свойство с именем checked . В то же время, когда флажок вызывает событие изменения с новым значением, свойство checkStatus будет обновлено.

⚠️Примечание. Обратите внимание, что вам все равно нужно объявить проверенную опору в опции реквизитов компонента.

модификатор v-модели

Мы закончили объяснять использование v-model в нативных элементах формы и пользовательских компонентах, заодно поговорили о принципе реализации v-model, теперь вы должны хорошо знать v-model!

Далее поговорим о модификаторах, используемых в v-модели.

.lazy

В приведенном выше содержании мы упомянули, что v-модель реализует двустороннюю привязку данных.Характеристики двусторонней привязки данных: когда значение, отображаемое тегом ввода, изменяется в режиме реального времени, оно также вызывает событие ввода на тег ввода в режиме реального времени Синхронизируйте значение поля ввода с данными в режиме реального времени после срабатывания каждого события ввода. В некоторых особых требованиях и сценариях вы можете захотеть, чтобы синхронизация данных не была синхронизацией в реальном времени, а выполнялась при запуске события изменения, тогда вы можете добавить модификатор lazy для обработки.Пример использования следующий:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number

Когда проверка ввода должна быть числом в форме, например операции, связанные с деньгами💰, вы можете автоматически преобразовать значение, введенное пользователем, в числовой тип, затем вы можете добавить модификатор числа в v-модель, чтобы быть обработанный.

<!-- 将输入的值自动转换成数字类型 -->
<input v-model.number="age" type="number">

⚠️ Принцип обработки числового модификатора: используйте функцию parseFloat() для обработки входного значения. Если входное значение не может быть проанализировано функцией parseFloat(), например, строка, начинающаяся с не числа, исходное значение будет возвращен.

.trim

Для строки, введенной пользователем в теге формы, и, наконец, мы все хотим удалить символы пробела в начале и в конце, этот модификатор обрезки очень полезен.

<!-- 去除输入值的首尾空白字符 -->
<input v-model.trim="msg">

Суммировать

v-model — очень практичная инструкция, ее использование может сэкономить нам много кода бизнес-логики, сделав код более понятным и удобным для сопровождения. Конечно, принцип реализации v-model по-прежнему очень прост для понимания и усвоения.Кроме того, чтобы сделать нашу разработку более удобной, v-model предоставляет очень практичные модификаторы для упрощения наших операций, а использование модификаторов также очень просто. .

С принципом реализации v-model разобрались, в следующем разделе поговорим о том, как исходный код Vue реализует v-model, до новых встреч👋!

Категории