Vue
一.列表渲染
- 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名
v-for
<li v-for="item in items">
{{item}}
</li>
data(){
return {items:['angular','react','vue','jquery']}
}
v-for对象
//可以用 v-for 来遍历一个对象的 property。
<li v-for="value in obj">
{{value}}
</li>
data(){
return {obj:{title:"Vue2.0入门",author:"木木",pdate:"2022-3-1"}}
}
v-for索引
//v-for 还支持一个可选的第二个参数,即当前项的索引。
<li v-for="(item,index) in items" >
{{index}}-{{item}}
</li>
data(){
return {items:['angular','react','vue',jquery]}
}
v-for 唯标识符 key
//为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的 key
<li v-for="(item,index) in items" key="item.id" >
...
</li>
//不建议使用index作为key的值(只要key的值唯一就行
v-for 范围
- v-for 也可以接受整数。在这种情况下,它会把模板重复对应次数
-
{{ n }}
二.事件
1.监听事件
- 我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件,并在触发事件时执行一些 JavaScript。
<button @click="counter++">{{counter}}</button>
<button v-on:click="counter--">{{counter}}</button>
new Vue({
data() {
return { counter: 1 }
}
})
2.事件处理方法
- 许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。
<button @click="greet">问候</button>
new Vue ({
data(){return{name:'vue'}},
methods: { greet(event){
alert('你好'+this.name)
} }
})
3.内联处理器中的方法
- 除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:
<button @click="say('你好')">问候你好</button>
<button @click="say('吃饭了没')">问候吃饭</button>
new Vue ({
methods:{say(msg){alert(msg)}
}
})
4.事件修饰符
- 阻止事件冒泡与阻止默认事件
- Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
<div @click="showMe" style="padding: 50px;">
// <!-- 阻止单击事件继续冒泡 -->
<div class="son" @click.stop="showMe" style="background-color: #dbffd0;">阻止事件冒泡</div>
//<!-- 单击事件不跳转 -->
<a @click.prevent="showMe" href="http://baidu.com">百度</form>
//<!-- 修饰符可以串联 -->
<a @click.stop.prevent="showMe" href="http://baidu.com">串联</a>
// <!-- 只执行一次 -->
<button @click.once="showMe">我爱你</button>
</div>
methods:{
showMe(event){ alert(event.target.innerHTML) }
}
//单词:
//.stop 阻止事件冒泡
//.prevent 阻止默认事件
//.capture 捕获
//.self 自身元素触发
//.once 执行一次
//.passive 滚动立即触发,不等待滚动完成(移动端性能提升)
5.按键修饰符
- 监听键盘事件时,我们经常需要检查特定的按键。可以使用按键修饰符
//<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />
//Vue 为最常用的键提供了别名
//.enter 回车
//.tab 制表
//.delete “删除”和“退格”键
//.esc 取消
//.space空格
//.up 上
//.down 下
//.left 左
//.right 右
6.系统修饰符
- 按下相应按键时才触发鼠标或键盘事件的监听器
//.enter 回车
//ctrl
//.alt
//.shift
//.meta (⌘或Windows 徽标键 ⊞)
//.exact 精确
7.鼠标按钮修饰符
//.left
//.right
//.middle
//这些修饰符会限制处理函数仅响应特定的鼠标按钮。
总结
这是我目前自己预习的Vue的一小部分知识,!