Vue笔记——10.表单输入绑定

最新推荐文章于 2021-04-14 14:50:30 发布

东栏梨花__

最新推荐文章于 2021-04-14 14:50:30 发布

阅读量167

点赞数

分类专栏： vue笔记

本文链接：https://blog.csdn.net/qq_45956680/article/details/109037500

版权

小妍Vue笔记——目录

Vue笔记——1.基本语法指令

Vue笔记——2.搭建脚手架并快速创建Vue项目

Vue笔记——3.实例

Vue笔记——4.模板语法

Vue笔记——5.计算属性

Vue笔记——6.Class 与 Style 绑定

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。

什么是语法糖（syntactic suger）

语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性斜体样式，从而减少程序代码出错的机会。

之所以叫「语法」糖，不只是因为加糖后的代码功能与加糖前保持一致，更重要的是，糖在不改变其所在位置的语法结构的前提下，实现了运行时的等价。可以简单理解为，加糖后的代码编译后跟加糖前一毛一样。

之所以叫语法「糖」，是因为加糖后的代码写起来很爽，包括但不限于：代码更简洁流畅，代码更语义自然…写着爽，看着爽，就像吃了糖。效率高，错误少…

据说还有一种叫做「语法盐」的东西，主要目的是通过反人类的语法，让你更痛苦的写代码。其实它同样能达到避免代码书写错误的效果，但编程效率应该是降低了，毕竟提高了语法学习门槛，让人咸到忧伤…

最基本的，for循环就是一个语法糖：

for(int i = 0; i < 5; i ++){
   
}

而实际上跟while没啥区别：

int i = 0;
while ( i <5 ){
   
    ...
    i ++;
}

Python中也有非常多的语法糖，比如：

i = a if a < b else b

这与下面的代码是同样的效果

if a < b:
    i = a
else
    i = b

它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。

你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。

文本

<input v-model="message" placeholder="edit me"> 
　　<p>Message is: {
   {
    message }}</p>

在这里插入图片描述

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{
   {
    message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>