初识Vue2（一）：表单输入绑定（附Demo）

时间 2021-07-25

标签 html vue git npm api 微信异步 ide 函数学习栏目 HTML 繁體版

原文原文链接

在线演示

http://demo.xiongze.net/html

下载地址

https://gitee.com/xiongze/Vue2.gitvue

js引用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>git

基础用法

你能够用 v-model 指令在表单<input>、<textarea> 及<select>素上建立双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。npm

尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。api

v-model 会忽略全部表单元素的 value、checked、selected attribute 的初始值而老是将 Vue 实例的数据做为数据来源。微信

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

v-model 在内部为不一样的输入元素使用不一样的 property 并抛出不一样的事件：ide

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>

//一个vue的实例
new Vue({
    el: '#example',
    data: {
        msg: 'Hello!'
    },
 　 //函数（用于弹框）
     methods: {
        say: function (i) {
            alert(i)
        }
      },
});

计算机属性和侦听器

一、计算机属性

HTML

<div id="example">
  <div>计算属性：{{toUp}}</div>
  <inputtype="text" v-model="ipt2">
</div>

//一个vue的实例
        new Vue({
            el: '#example',
            data: {
                msg: 'Hello!',
                ipt: '我是计算机属性'
            },

            //计算属性
            computed: {
                toUp: function () {
                    var that = this;
                    var temp = that.ipt;
                    return temp;
                }
            },
        });

这里咱们声明了一个计算属性 toUp

你能够像绑定普通 property 同样在模板中绑定计算属性。

二、侦听器

虽然计算属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。

这就是为何 Vue 经过 watch 选项提供了一个更通用的方法，来响应数据的变化。

当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。

HTML

<div id="example">
  <input type="text" v-model="ipt2">
</div>

//一个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>

//一个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>

//一个vue的实例
new Vue({
    el: '#example',
    message :"",
});

自定义组件(简单)：输出指定内容

在注册一个组件的时候，咱们始终须要给它一个名字。好比在全局注册的时候咱们已经看到了：

Vue.component('my-component-name', { /* ... */ })

该组件名就是 Vue.component 的第一个参数。

你给予组件的名字可能依赖于你打算拿它来作什么。

当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，

咱们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。

这会帮助你避免和当前以及将来的 HTML 元素相冲突。

你能够在风格指南中查阅到关于组件名的其它建议。

HTML

<div id="example">
  <simple></simple>
</div>

// 注册一个全局自定义组件 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>

// 注册一个复杂全局自定义【组件】 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>

//一个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>

//一个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>

//一个vue的实例
new Vue({
    el: '#example',
    selected: ''  //单选框
});

若是 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。

在 iOS 中，这会使用户没法选择第一个选项。由于这样的状况下，iOS 不会触发 change 事件。

所以，更推荐像上面这样提供一个值为空的禁用选项。

欢迎关注订阅微信公众号【熊泽有话说】，更多好玩易学知识等你来取
做者：熊泽-学习中的苦与乐
公众号：熊泽有话说
出处： https://www.cnblogs.com/xiongze520/p/14764147.html
创做不易，任何人或团体、机构所有转载或者部分转载、摘录，请在文章明显位置注明做者和原文连接。