初识Vue2(一):表单输入绑定(附Demo)
在线演示
下载地址
js引用
<!--这里可以自己下载下来引用,也可以使用外部动态链接引用-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
基础用法
你可以用 v-model 指令在表单<input>、<textarea> 及<select>素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model
会忽略所有表单元素的value
、checked
、selected
attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的
data
选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:
- text 和 textarea 元素使用
value
property 和input
事件; - checkbox 和 radio 使用
checked
property 和change
事件; - select 字段将
value
作为 prop 并将change
作为事件。
对于需要使用输入法 (如中文、日文、韩文等) 的语言,你会发现
v-model
不会在输入法组合文字过程中得到更新。如果你也想处理这个过程,请使用
input
事件。
点击事件和提示框
HTML
<div id="example">
<button v-on:click="say('我是按钮,你点击了我')">按钮点击</button>
</div>
JS
//一个vue的实例
new Vue({
el: '#example',
data: {
msg: 'Hello!'
},
//函数(用于弹框)
methods: {
say: function (i) {
alert(i)
}
},
});
计算机属性和侦听器
1、计算机属性
HTML
<div id="example">
<div>计算属性:{{toUp}}</div>
<inputtype="text" v-model="ipt2">
</div>
JS
//一个vue的实例
new Vue({
el: '#example',
data: {
msg: 'Hello!',
ipt: '我是计算机属性'
}, //计算属性
computed: {
toUp: function () {
var that = this;
var temp = that.ipt;
return temp;
}
},
});
这里我们声明了一个计算属性 toUp
你可以像绑定普通 property 一样在模板中绑定计算属性。
2、侦听器
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。
这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
HTML
<div id="example">
<input type="text" v-model="ipt2">
</div>
JS
//一个vue的实例
new Vue({
el: '#example',
data: {
msg: 'Hello!',
ipt2: '我是观察者(侦听器)'
},
//函数(用于弹框)
methods: {
say: function (i) {
alert(i)
}
}, //观察者
watch: {
// 如果 `ipt2` 发生改变,这个函数就会运行
ipt2: function (newVal) {
this.say(newVal)
//console.log(this.ipt2);
}
}
});
使用 watch
选项允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。
除了 watch
选项之外,您还可以使用命令式的 vm.$watch API。
文本
HTML
<div id="example">
<input v-model="message" placeholder="单行文本">输入的值: {{ message }}
</div>
JS
//一个vue的实例
new Vue({
el: '#example',
message :"",
});
多行文本
HTML
<div id="example">
<textarea v-model="message" placeholder="多行文本"></textarea><br />
<span>输入的值:</span>
<p style="white-space: pre-line;">{{ message }}</p>
</div>
JS
//一个vue的实例
new Vue({
el: '#example',
message :"",
});
自定义组件(简单):输出指定内容
在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了:
Vue.component('my-component-name', { /* ... */ })
该组件名就是 Vue.component
的第一个参数。
你给予组件的名字可能依赖于你打算拿它来做什么。
当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,
我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。
这会帮助你避免和当前以及未来的 HTML 元素相冲突。
你可以在风格指南中查阅到关于组件名的其它建议。
HTML
<div id="example">
<simple></simple>
</div>
JS
// 注册一个全局自定义组件 simple
Vue.component("simple", Vue.extend({
template: '<div>我是一个div块哦</div>'
})); //一个vue的实例
new Vue({
el: '#example'
});
自定义组件(复杂):输出一个ul无序列表
HTML
<div id="example">
<do-list v-bind:data="list"> </do-list>
</div>
JS
// 注册一个复杂全局自定义【组件】 do-list
Vue.component("do-list", Vue.extend({
//(父子传参)子组件要显式地用 props 选项声明它预期的数据:
props: ['data'],
template: `
<ul>
<li v-for="item in data">{{item.name}}</li>
</ul>
`
})); //一个vue的实例
new Vue({
el: '#example',
list: [
{ name: '西游记', author: '吴承恩' },
{ name: '红楼梦', author: '曹雪芹' },
{ name: '水浒传', author: '施耐庵' },
{ name: '三国演义', author: '罗贯中' }
],
});
复选框
HTML
<div id="example">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<span>选中的值: {{ checkedNames }}</span>
</div>
JS
//一个vue的实例
new Vue({
el: '#example',
checkedNames: [], //多选
});
单选按钮
HTML
<div id="example">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<span>选中的值: {{ picked }}</span>
</div>
JS
//一个vue的实例
new Vue({
el: '#example',
picked: '', //单选
});
下拉选择框
HTML
<div id="example">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>Vue 1.x</option>
<option>Vue 2.x</option>
<option>Vue 3.x</option>
</select>
<span>选中的值: {{ selected }}</span>
</div>
JS
//一个vue的实例
new Vue({
el: '#example',
selected: '' //单选框
});
如果 v-model
表达式的初始值未能匹配任何选项,<select>
元素将被渲染为“未选中”状态。
在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。
因此,更推荐像上面这样提供一个值为空的禁用选项。
欢迎关注订阅微信公众号【熊泽有话说】,更多好玩易学知识等你来取
作者:熊泽-学习中的苦与乐 公众号:熊泽有话说 出处:https://www.cnblogs.com/xiongze520/p/14764147.html 创作不易,任何人或团体、机构全部转载或者部分转载、摘录,请在文章明显位置注明作者和原文链接。 |
初识Vue2(一):表单输入绑定(附Demo)的更多相关文章
- 前端MVC Vue2学习总结(五)——表单输入绑定、组件
一.表单输入绑定 1.1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖, ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
- Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom
这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...
- Vue表单输入绑定(文本框和复选框)
文本框 <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue.js教程--基础2(事件处理 表单输入绑定
事件处理 表单输入绑定 事件处理 监听v-on 监听 DOM 事件,并在触发时运行一些 JavaScript 代码. 可以在v-on:click=''加内联语句. 有时也需要在内联语句处理器中访问原始 ...
- Vue学习计划基础笔记(五) - 表单输入绑定、组件基础
表单输入绑定.组件基础 目标: 熟练掌握vue中表单的处理方式 对之前学习的内容简单回顾一下,并写一个实例,学以致用(最好脱离文档) vue中表单的处理方式 vue中表单的处理使用了v-model指令 ...
- VUE:事件处理和表单输入绑定
事件处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- vue样式绑定、事件监听、表单输入绑定、响应接口
1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...
- Vue(10)表单输入绑定v-model
v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...
随机推荐
- EntityFrameworkCore之工作单元的封装
1. 简介 2. DbContext 生命周期和使用规范 2.1. 生命周期 2.2. 使用规范 2.3. 避免 DbContext 线程处理问题 3. 封装-工作单元 3.1. 分析 3.2. 设计 ...
- Cookie与Session的安全性
说到cookie与session我们首先要说一下为什么要引入这两个东西,这两个多西到底是干什么的 起源 由于HTTP协议使无状态的: 每一次请求都是新的请求,不会记得之前通信的状态 客户端与服务端的一 ...
- 攻防世界 reverse SignIn
SignIn 2019_SUCTF __int64 __fastcall main(__int64 a1, char **a2, char **a3) { char mod; // [rsp+0 ...
- [Design Pattern With Go]设计模式-工厂模式
这次介绍的设计模式是工厂模式,这是一个比较常见的创建型模式.一般情况下,工厂模式分为三种:简单工厂.工厂方法和抽象工厂,下面慢慢举例介绍下. 简单工厂 考虑一个加密程序的应用场景,一个加密程序可能提供 ...
- Redis实战篇(三)基于HyperLogLog实现UV统计功能
如果现在要开发一个功能: 统计APP或网页的一个页面,每天有多少用户点击进入的次数.同一个用户的反复点击进入记为 1 次,也就是统计 UV 数据. 让你来开发这个统计模块,你会如何实现? 如果统计 P ...
- Android学习之服务初体验
•概念 Service(服务)是一个长期运行在后台,没有用户界面的应用组件,即使切换到另一个应用程序或者后台,服务也可以正常运行: 因此,服务适合执行一些不需要显示界面的后台耗时操作,比如下载网络数据 ...
- 力扣 - 剑指 Offer 37. 序列化二叉树
目录 题目 思路 代码 复杂度分析 题目 剑指 Offer 37. 序列化二叉树 思路 序列化其实就是层序遍历 但是,要能反序列化的话,前.中.后.层序遍历是不够的,必须在序列化时候保存所有信息,这样 ...
- 「HTML+CSS」--自定义加载动画【005】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...
- Go Protobuf(比xml小3-10倍, 快20-100倍)
简介 Protocol Buffers是什么? protocol buffers 是一种灵活,高效,自动化机制的结构数据序列化方法-可类比 XML,但是比 XML 更小.更快.更为简单.你可以定义数据 ...
- 由一名保安引发的Java设计模式:外观模式
目录 应用场景 外观模式 定义 意图 主要解决问题 何时使用 优缺点 结构 保安的故事 应用场景 使用方要完成一个功能,需要调用提供方的多个接口.方法,调用过程复杂时,我们可以再提供一个高层接口(新的 ...