Vue 知识整理—03-指令3
|
一：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属性）
4. 当要渲染相似的标签结构时用v-for 注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的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,i)in 对象
v:值
k:键
i:对象中每对key-value的索引 从0开始
注意: v,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>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |