带v- 的我们叫做指令 用来操作dom,指令只能用在标签上
v-model:只能用于form表单元素上(input/ select/checkbox/radio等标签上才有效果)
作用:
可以自动让原生表单组件的值自动和你选择的值绑定
效果:
输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化
v-for :用于循环
数组 arr:[ “a”,“b”,“c”]
数组更新检测
数组的变异方法(mutation method)
Vue将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新,这些被包裹的方法包括:
push( )
pop( )
shift( )
unshift( )
splice( )
sort( )
reverse( )
可以打开控制台,然后对前面的例子的items数组尝试调用变异方法,比如
example.items.push({ message:’ Baz’})
但是由于受JavaScript的限制,Vue不能检测以下数组的变动:
1.当你利用索引直接设置一个数组项时,例如:
vm.items[indexOfItem] = newValue;
vm.arr[0]=“新的值”
2.当你修改数组的长度时,例如:
vm.items.length = newLength
var.arr.length=“新的长度”
这两种方式都无法检测到
为了解决这类问题有两种方式解决:
1.Vue.set(vm.items,indexOfItem,“新值”)
2.vm.$set(vm.items,indexOfItem,“新值”)
v-bind 属性绑定
可以通过v-bind绑定class样式
可以绑定变量名,让属性能够被解析
v-bind简写是 “ :”
经常绑定的属性:id / class / style img的src属性