10《Vue 入门教程》Vue 双向绑定指令

本小节我们将介绍 Vue 中数据的双向绑定指令 v-model 。 v-model 的学习相对简单。我们可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

2 木子解释

用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。— 官方定义

v-model 是 vue 提供的用来对表单控件做数据双向绑定的指令。它可以根据用户的输入动态改变其绑定的值，同样可以根据绑定值的改变来 *** 作页面 DOM 的更新。

3 基本用法

接下来我们将详细介绍 v-model 在不同表单元素上的使用。

31 单行文本 input

实例演示

Document

名称是: {{ name }}

12345678910111213141516171819202122232425

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给输入框 input 和 name 形成双向绑定，当 input 中数据发生改变时 name 也会发生改变。同理，我们在控制台通过 vmname = "" 给 name 赋值时输入框的内容也会发生改变。

32 多行文本 textarea

实例演示

Document

描述是: {{ desc }}

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给输入框 textarea 和 desc 形成双向绑定，当 textarea 中数据发生改变时 desc 也会发生改变。同理，我们在控制台通过 vmdesc = "" 给 desc 赋值时输入框的内容也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给单个选择框 checkbox 和 isDelivery 形成双向绑定，当 checkbox 改变选中状态时 isDelivery 也会发生改变。同理，我们在控制台通过 vmisDelivery = true 给 isDelivery 赋值时 checkbox 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给多个选择框 checkbox 和 types 形成双向绑定，当任意 checkbox 改变选中状态时 types 也会发生改变。同理，我们在控制台通过 vmtypes = [] 给 types 赋值时对应 checkbox 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给单选按钮 radio 和 isFree 形成双向绑定，当 radio 改变选中状态时 isFree 也会发生改变。同理，我们在控制台通过 vmisFree = 0 给 isFree 赋值时 radio 的选中状态也会发生改变。

实例演示

"运行案例" 可查看在线运行效果

代码解释： 上述代码，我们通过 v-model 给选择框 select 和 company 形成双向绑定，当 select 改变选项时 company 也会发生改变。同理，我们在控制台通过 vmcompany = 0 给 company 赋值时 select 的选中项也会发生改变。

对于单选按钮、复选框及选择框的选项，v-model 绑定的值通常是静态字符串 （对于复选框也可以是布尔值）：

但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

代码解释： 上述代码中，我们通过 true-value 和 false-value 给 复选框指定来选中和非选中的值，当选中时 vmisDelivery === 'yes' ，当没有选中时 vmisDelivery === 'no'

代码解释： 上述代码中，我们通过 v-bind:value 给 randio 指定选中的值，当 radio 选中时 vmpick === vma 。

代码解释： 上述代码中，我们通过 v-bind:value 给 option 指定 value 值，当 该 option 选中时 vmselected 的值为 { number: 123 } 。

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

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

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

本小节我们介绍了 Vue 数据双向绑定 v-model 的使用，主要包括以下知识点：

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行 *** 作。

Vue自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vuedirective( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vueuse() 调用。

批量注册指令，新建 directives/indexjs 文件

在 mainjs 引入并调用

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

下面分享几个实用的 Vue 自定义指令

复制粘贴指令 v-copy

长按指令 v-longpress

输入框防抖指令 v-debounce

禁止表情及特殊字符 v-emoji

懒加载 v-LazyLoad

权限校验指令 v-premission

实现页面水印 v-waterMarker

拖拽指令 v-draggable

v-copy

需求：实现一键复制文本内容，用于鼠标右键粘贴。

思路：

动态创建 textarea 标签，并设置 readOnly 属性及移出可视区域

将要复制的值赋给 textarea 标签的 value 属性，并插入到 body

选中值 textarea 并复制

将 body 中插入的 textarea 移除

在第一次调用时绑定事件，在解绑时移除事件

使用：给 Dom 加上 v-copy 及复制的文本即可

剩余的请看原文

<textarea id="reportText" type="text" readonly="readonly" ></textarea>

$(function(){

①

var h = $("#reportText")val()split("\n")length; //获取文本行数

var v= $("#reportText")val(); //获取文本内容

if(vlength > 20 && h <= 1){ //如果文本内容多于自定义的20个字一行,

//且文本的高度只有一行时候的判断

h = (vlength / 20)+1;

}

$("#reportText")attr("rows", h);

①

})

精测没有问题的 , 可以用 , 不过有的时候可能根据数据读取的快慢 , 方法加载会有问题 , 如果没能自适应高度 , 可将该方法①放在setTimeout()函数中根据自己数据读取的时间自定义

以上就是关于10《Vue 入门教程》Vue 双向绑定指令全部的内容，包括:10《Vue 入门教程》Vue 双向绑定指令、8个非常实用的Vue自定义指令、如何得到textarea内容的高度或textarea内容的行数等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！