我在这里学习内置指令
- v-model
- v-if
- v-show
- v-else
- v-for
- v-bind
- v-on
v-model表单数据模型双向绑定
example：
① 表单文本输入框效果
<input type="text" v-model.trim="myValue"> {{ myValue }}
export default {
data () {
return {
myValue: '',
}
}
效果演示：在文本框中输入的内容会立刻动态地在{{ myValue }}处展示出来
- v-model.lazy 延迟，当我们完成了输入后按enter键才会有输出。
<input type="text" v-model.lazy="myValue"> {{ myValue }}
输入内容没有即刻显示:
点击Enter键后:
- v-model.number 强制我们输入的值是数字
<input type="text" v-model.number="myValue"> {{ myValue }}
此时测试时，会发现效果和什么都不加即
<input type="text" v-model="myValue"> {{ myValue }}没有任何区别
但实际上改变的是所输入内容的类型，我们可以对Mustache的输入内容稍作修改，改为{{ typeof myValu }}看看有什么不同之处
1.v-model时，无论是空白、还是纯字母、纯数字或者是数字字母混合，其类型都是string
<input type="text" v-model="myValue"> {{ typeof myValue }}
- v-model.number时
当文本框内容为空白或者是输入的第一个字符是非数字是，都是String类型
当输入的内容为纯数字或者是以数字开头的都是number类型。
对于以数字开头的数字字母混合按理来说应该是String类型，但我们可以看到下图第2,3两个文本框， 当鼠标不再聚焦到文本框时，数字后面的内容就会自动删除。
- v-model.trim 文本框前后输入的空格会被忽略掉。
② 复选框效果
<input type="checkbox" value="apple" v-model="myBox">apple
<input type="checkbox" value="banana" v-model="myBox">banana
<input type="checkbox" value="pinapple" v-model="myBox">pinapple
{{ myBox }}
export default {
data () {
return {
myBox: []
/*因为复选框中有不同的元素，所以给myBox初始化为一个空的数组*/
}
}
每点击一个元素后，立即动态的在{{ myBox }}中显示其value
v-if
v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。
v-show
条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
v-if 是html代码中有没有被选中的内容
v-show是没有被选中的内容display为none但它是存在的。
v-else
v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。
v-for
指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似
v-for="item in items" (items是一个数组，item是当前被遍历的数组元素。)
v-for 数组渲染和对象渲染的区别
① 数组渲染
export default {
data () {
return {
hello: 'hello vue.js',
list: [
{
name: 'apple',
price: 34
},
{
name: 'banana',
price: 56
}
]
}
<template>
<div id="app">
<ul>
<li v-for="(item, index) in List">{{ item.name }} + {{ item.price }} + {{ index }}</li>
</ul>
</div>
</template>
结果演示为：
- apple + 34 + 0
- banana + 56 + 1
②对象渲染
data () {
return {
objList: {
name: 'apple',
price: 34,
color: 'red',
weight: '2kg'
}
}
}
<template>
<div id="app">
<ul>
<li v-for="(value, key) in objList">{{ key }} + {{ value }}</li>
</ul>
</div>
</template>
结果演示：
- name + apple
- price + 34
- color + red
- weight + 2kg
提示：
上面所用到的item,index,value,key都是自定义变量。
数组渲染可以显示下标如index，对象渲染可以显示对象名如key
v-for参数列表
- 一个参数 ：
v-for="value in items" - 两个参数：
<div v-for="(value, key) in object"> {{ key }}: {{ value }} </div> - 三个参数：
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
v-bind
绑定标签属性。
v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class （可以给这个class添加新的属性）
example:用v-bind绑定class
①class 为一个字符串时
<a v-bind:class = "classStr">to baidu</a>
/*给a标签加上class为red-font的js代码*/
export default {
data () {
return{
classStr: 'red-font'
}
}
}
②加上的类名也可以是一个对象。
<a v-bind:class = "className">to baidu</a>
/*给a标签加上class为red-font的js代码，根据布尔值判断是否加入*/
export default {
data () {
return{
className: {
'red-font'/*这是类名*/ : true,
'blue-font': false
}
}
}
}
③以数组的方式添加类名
<a v-bind:class = "className">to baidu</a>
/*数组里面全部的类名都会被加入到a标签中*/
export default {
data () {
return{
className: [red-font, big-font, blue-font]
}
}
}
④在标签中直接输入要添加的calss
<a v-bind:class = [classA, classB,{red-font: hassErr}]>to baidu</a>
/*同时将classA和classB渲染到了a标签中*/
export default {
data () {
return{
classA: 'isClassA',
classB: 'isClassB',
hassErr: true
}
}
}
或者<a v-bind:class = [classA, {red-font: true }]>to baidu</a>
v-on
v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的
v-on可以是自定义事件也可以是浏览器的默认事件。
example：
浏览器默认事件<a v-on:click="doSomething">
自定义事件：<a @my-event="onComaMyEvent">
v-bind和v-on的缩写
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。
网友评论