初识Vue2（一）：表单输入绑定（附Demo）
Written on: 5月 18, 2021
Title : 初识Vue2（一）：表单输入绑定（附Demo）
link : 初识Vue2（一）：表单输入绑定（附Demo）
初识Vue2（一）：表单输入绑定（附Demo）
在线演示
下载地址
https://gitee.com/xiongze/Vue2.git
js引用
<!--这里可以自己下载下来引用，也可以使用外部动态链接引用-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
基础用法
你可以用 v-model 指令在表单<input>、<textarea> 及<select>素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model会忽略所有表单元素的value、checked、selectedattribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的
data选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
- text 和 textarea 元素使用
valueproperty 和input事件；- checkbox 和 radio 使用
checkedproperty 和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
// 注册一个全局自定义组件 simpleVue.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-listVue.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
创作不易，任何人或团体、机构全部转载或者部分转载、摘录，请在文章明显位置注明作者和原文链接。
原文转载：http://www.shaoqun.com/a/751786.html
万国邮政联盟：https://www.ikjzd.com/w/861
乐宝：https://www.ikjzd.com/w/2200
在线演示下载地址https://gitee.com/xiongze/Vue2.gitjs引用<!--这里可以自己下载下来引用，也可以使用外部动态链接引用--><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>基础用法你可以用v-model指令在表单<in
yiqu：https://www.ikjzd.com/w/210
邮乐：https://www.ikjzd.com/w/1776
net a porter：https://www.ikjzd.com/w/2132
结婚7天 我真想把她踹下去：http://www.30bags.com/a/253123.html
职场套路！跨境电商老板打死也不会说的那些事儿！：https://www.ikjzd.com/home/113047
老婆害怕爱爱 让我和保姆上床生子：http://lady.shaoqun.com/a/271115.html
That's the article 初识Vue2（一）：表单输入绑定（附Demo）
That's it for the article 初识Vue2（一）：表单输入绑定（附Demo） this time, hopefully can be useful for all of you. okay, see you in another article post.
You are now reading the article 初识Vue2（一）：表单输入绑定（附Demo） with link address https://kanakoroku.blogspot.com/2021/05/vue2demo.html
