Vue.js 初步入门
属性介绍
v-model
:唯一一个可以实现双向数据绑定的属性
使用详解
1.v-model
原生js中,要是想将标签元素上嵌入自定义数据,必须增加一个data-*
的属性来嵌入:
<button type="button" data-myData = "hello vue.js" onclick="handleBtn(this)">按钮</button>
function handleBtn(res){
console.info(res.getAttribute("data-myData"));
};
而且这种数据嵌入方式是单向的,要想取回来也要调用DOM对象进行设置。
vue为我们提供了一种很方便的解决方案用来传递嵌入自定义数据,并且还是一种方式提供双向的数据绑定。
<input type="text" v-model="msg"/><br>
<p v-text="msg"></p>
msg:"hello vue.js"
v-model
里面的数据关联到数据域中的msg
,text文本框中的数据会被自动绑定为v-model
里面的数据,同理,<p>
标签里的值也会被自动绑定,一旦text文本框里的数据发生更改,msg里的值会被同步修改,自然p标签里的值也会被修改,这就是数据的双向绑定。
<button type="button" @click="handleBtn">按钮</button>
handleBtn(){
console.info(this.msg);
}
修饰符
使用方法:
`v-model.xxx=`:xxx就是后面添加的修饰符。
.lazy
:在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步。通俗的说,就是当你在输入框输入完成失焦之后,就可以立即执行change事件,就会同步到data中去。
.number
:如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值。通俗的说,你想把输入的字符串进行转数字处理,加上这个修饰符后,就省去了自己手动转化的步骤。
.trim
:如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入。
Tip
值得注意的是,
v-model
只能用在表单元素中(input、select、checkbox、textarea …),而且v-model
的数据嵌入模式和v-text
的模式有些许相同,但也有许多不同,如一个单向,一个双向,一个能作用到任何标签,一个只能作用到表单元素等。