Vue学习之路—No.6(分享心得,欢迎批评指正)

<span>{{fld3}}</span> <input type=”text”
v-bind:value=”fld1″ /> <input type=”text” v-model=”fld2″ />

我们还是先回顾一下上一次的重点:

{{}} 和 v-bind:value
类似,都是单向的,即属性值发生变化,会立即在界面上呈现出来,但是在界面上改变值,不会回写回属性。v-bind:value
用于表单元素。注意:<textarea>{{fld}}</textarea>
这种写法是通不过编译的。

1.事件绑定,我们可以对分别用方法和js表达式对事件进行处理

v-model 是双向的,当我们改变 input 的值时,它会立即回写回属性。

2.当方法名带括号的时候,在方法中一定要传参;而不带括号的时候,vm会自动配置默认event

上面示例中:我们改变第一个文本框的值,再改变第二个文本框的值,所有值有重新绑定,我们会发现第一个文本框的输入值又变成
fld1 的值了。

3.各类事件修饰器

扩展

 

我们知道 v-bind:value 是为 value 属性写值,所以也存在 v-bind:class 为
class 属性写值的情况,以此类推。

 

相关阅读

之前我们提到过表单绑定,那么现在我们来深入了解一下,Vue这一令人惊奇的双向表单绑定功能:

  • Vue 中冒号 :、@、#
    是什么意思?
  • Vue
    中组件属性是数字、布尔类型怎么写?

直接进入正题:

 

<input v-model=”
message “>

<p>{{ message
}}</p>

这是最简单的表单双向绑定,标签P中的值将随着vm中值的变化而变化

值得注意的是,就算我们这样写:

<input v-model=”
message ” value=” ye “>

也不会读取value,message的值只会随着vm中的数据而变化,也就应证了vue数据驱动视图的原理

 

我们再延展一下:

<span>
文本框中输入的值为: </span>

<p> {{ message }}
</p>

<textarea v-model=”
message ” ></textarea>

同理:

我们这样写也是没有作用的:

<textarea>{{ message
}}</textarea>

 

继续深入:

当我们在使用多选框的时候:

 

单个checkbox:

<input
v-model=”checked” type=”checkbox” id=” lla “>

<lable for=” lla
“>{{ checked }}</lable>

这个时候checked的值将会在true和false之间切换。

 

多个checkbox的时候:

<input type=” checkbox
” id=”a” value=”f” v-model=”checked”>

<lable
for=”a”>a</lable>

 

<input type=” checkbox
” id=”b” value=”m” v-model=”checked”>

<lable
for=”b”>b</lable>

<input type=” checkbox
” id=”c” value=”c” v-model=”checked”>

<lable
for=”c”>c</lable>

 

<span>选中的为:{{
checked }}</span>

当我们对input设置了value的时候,那么checked的值就不再是true or
false了,而是相应的value值

 

new Vue:({

    el:”,

    data:{

       
checked:[]

}

})

如上面的代码,这个时候,返回在span中的值,是以数组的形式渲染的

单个radio:

<input type=”radio”
id=”a” value=”f” v-model=”picked”>

<lable for=” a
“>a</lable> 

 

<input type=”radio”
id=”b” value=”m” v-model=”picked”>

<lable for=” b
“>b</lable>

 

<span>{{ picked
}}</span>

其实和多选框的原理是一样的,澳门新葡亰3522平台游戏,区别仅仅在于这里span中的值不是一个数组而是一个单一的值

 

下拉菜单 select:::

 

单选:

 

<select
v-mode=”selected”>

   
<option>a</option>

 
  <option>b</option>

 
  <option>c</option>

</select>

 

<span>{{ selected
}}</span>

option标签没有指定value属性时,那么返回的值就是标签中的内容

 

 

多选:

<select
v-mode=”selected” multiple>