1st.v-model指令的详细用法

在表单标签中，v-model双向绑定的用法有所区别。

首先在data中定义好数据：

data: {

                name: "张三",

                sex: '男',

                address: '南京市雨花台区',

                isOK: true,

                hobbies: ['睡觉', '打游戏'],

                city:"苏州",

                foods:['巧克力','西瓜','米饭']

            }

文本框：使用v-model-value（简写v-model）直接双向绑定数据name

<p>文本框：<input type="text" v-model="name"> {{name}}</p>

单选框：使用v-model绑定sex值，name属性相同，且同时绑定数据sex的单选框会用自己的value替换掉sex

<p>单选框：

            <input type="radio" v-model="sex" name="sex" value="男">男

            <input type="radio" v-model="sex" name="sex" value="女">女

            {{sex}}

</p>

多行文本框：使用v-model-value（简写v-model）直接双向绑定数据address

<p>多行文本框：<textarea cols="30" rows="5" v-model="address"></textarea> {{address}}</p>

单个复选框：单个复选框时，使用v-model绑定一个boolean属性的数据，数据值为false时不选中，反之则选中

<p>单个复选框：<input type="checkbox" v-model="isOK">是否同意 {{isOK}}</p>

多个复选框：使用多个复选框时，使用v-model绑定一个数组，数组中的值和复选框的value相同时会选中复选框，当用户选中一个复选框时也会往数组里加入自身的value值

<p>多个复选框：

            <input type="checkbox" v-model="hobbies" value="睡觉">睡觉

            <input type="checkbox" v-model="hobbies" value="喝酒">喝酒

            <input type="checkbox" v-model="hobbies" value="抽烟">抽烟

            <input type="checkbox" v-model="hobbies" value="打游戏">打游戏

            <input type="checkbox" v-model="hobbies" value="敲代码">敲代码

            <input type="checkbox" v-model="hobbies" value="打球">打球

             {{hobbies}}

</p>

选择器：选择器使用v-model绑定数据city city的值和选择器中option的value值相同时会选择相同的option，当选择元素时会把city中的值修改成自身的value

<p>选择器：

            <select v-model="city">

                <option value="北京">北京</option>

                <option value="上海">上海</option>

                <option value="南京">南京</option>

                <option value="苏州">苏州</option>

            </select>

            {{city}}

</p>

复数选择器：复数选择器使用v-model绑定一个数组，数组中是值与value中的值对应，数组中有则value对应的选中

<p>

            复数选择器：

            <select v-model="foods" multiple>

                <option value="巧克力">巧克力</option>

                <option value="西瓜">西瓜</option>

                <option value="薯片">薯片</option>

                <option value="米饭">米饭</option>

            </select>

            {{foods}}

</p>

2nd. v-model的修饰符

.lazy

在默认情况下，v-model在每次input 事件触发后将输入框的值与数据进行同步(除了上述输入法组合文字时)。可以添加lazy 修饰符,从而转为在change事件之后进行同步:

<input v-model.lazy="msg">

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符,因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

<input v-model.number="age" type="number">

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

3rd. 绑定事件

v-on:指令用来绑定事件，简写为 @ 可以指定一个事件方法，事件方法要在methods里面定义。

指定事件方法时，如果没有给方法传递参数，默认会传递一个事件对象参数

<button @click="sayHi">sayHi</button>

如果我们传递了一个参数，还想再传递事件对象参数，就要通过$event关键字设置：

<buttonv-on:click="sayHello('你好',$event)">Say Hello</button>

如果事件处理的逻辑比较简单，可以直接在行内编写：

         <button @click="num--">-</button>

        {{num}}

        <button @click.once="num++">+</button>

4rd.事件修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<input v-on:keyup.enter="submit">

可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符：

<input v-on:keyup.page-down="onPageDown">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

5rd.深度响应式

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如：

Vue.set(vm.someObject, 'b', 2)

您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

this.$set(this.someObject,'b',2)

用delete方法，删除指定对象的属性或数组的成员

Vue.delete(this.obj,'age')

您还可以使用 vm.$delete实例方法，这也是全局 Vue.delete方法的别名：

this.$delete(this.obj,'age')

// 针对数组，只能通过以下方法，才能实现响应式：push() pop() unshift() shift() splice() reverse() sort()

如果不使用以上方法，那么也可以使用set和delete方法

// 这里set方法的参数分别是：指定的数组，数组的下标，对应的数据this.$set(this.arr,1,'苹果')

// 这里的delete方法的参数分别是：指定的数组，数组的下标 this.$delete(this.arr,1)

vue2 v-model—绑定事件—深度响应式