一: v-on 的缩写和事件修饰符
事件修饰符:
. stop 阻止冒泡
. prevent 阻止默认事件
. capture 添加事件侦听器时使用事件捕获模式
. self 只当事件在该元素本身 (比如不是子元素) 触发时触发回调
. once 事件只触发一次
二: v-model 和双向数据绑定
v-bind 只能实现数据的单向绑定, 从 M 到 V ,v-model 可以实现数据的双向绑定, 表单元素和 Model 中的数据
注意: v-model 只能运用在表单元素中
{ input(radio ,text ,address ,email ...) select checkbox textarea}
三: v-bind 属性设置样式
~~~ vue 中通过属性绑定 (v-bind:) 为元素设置 class 样式
--- 使用 class 样式
1. 直接传递一个数组
2. 数组中使用三元表达式
3. 在数组中使用对象代替三元表达式(数组中嵌套对象)
4. 直接使用对象
~~~ vue 中通过属性绑定 (v-bind:) 为元素绑定 style 行内样式
--- 使用内联样式
1. 直接在元素上设置 : style
2. 将样式定义到 data 中, 直接引用到 : style 中
3. 在 : style 中通过数组, 引用多个 data 上的样式对象
四: v-for 的四种使用方式(与 key 属性)
1. 根据一组数组或对象的选项列表进行渲染.
2. v-for 指令需要使用 item in items 形式的特殊语法,
3. 是源数据数组 / 对象
4. 当要渲染相似的标签结构时用 v-for
注意: 在使用 v-for 时, 要把一个唯一值赋值给: key 属性(通常是数组的 index 或者数据的 id)
变量数组和对象
数组 语法: v-for="(item,i) in list"
对象 语法: v-for="(v,k,i) in obj"
补充 : 在每一项数据 追加一个属性 :key="唯一标识" 建议如果有 ID 使用 ID 没有考虑索引
- <body>
- <div id="app">
- <!-- v-for 作用: 列表渲染, 当遇到相似的标签结构时, 就用 v-for 去渲染
- v-for="元素 in 容器(数组和对象)"
- v-for="数组中的元素 in data 中的数组名"
- v-for="对象中的属性值 in data 中的对象名"
- -->
- <!-- 数组 -->
- <p v-for="item in list">{{item}}</p>
- <hr>
- <p v-for="(item,index) in list">{{item}}----{{index}}</p>
- <!-- (v,i) in 数组
- v: 数组中的每个元素
- i: 数组中元素的下标
- -->
- <hr>
- <!-- 对象 -->
- <!-- (v,k,i)in 对象
- v: 值
- k: 键
- i: 对象中每对 key-value 的索引 从 0 开始
- 注意: v,k,i 是参数名, 见名知意即可!
- -->
- <p v-for="value in per">{{value}}</p>
- <hr>
- <p v-for="(value,key) in per">{{value}}----{{key}}</p>
- <hr>
- <p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}</p>
- </div>
- <script src="./vue.js"></script>
- <script>
- new Vue({
- el: '#app',
- data: {
- list: ['a', 'b', 'c'],
- per: {
- name: '老王',
- age: 38,
- gender: '男'
- }
- },
- methods: {
- }
- })
- </script>
- </body>
来源: http://www.bubuko.com/infodetail-3073238.html