vue学习的第二节 (本节简写部分指令,如有错误请联系改正,谢谢。附 官方教程:https://cn.vuejs.org/v2/guide/conditional.html)
1. vue指令:即带有v-前缀的特殊属性。常用指令:v-show 、v-on 、v-for、v-bind 、v-if、v-else、v-else-if、v-model...
2. 指令的用途:当表达式的值改变时,将某些行为应用到DOM上,简化代码更方便的完成业务代码
3. 书写规范:可以写在任意HTML 元素的开始标签内
if="$imba">狮子王
^-^ :一个开始标签内可以写入多个指令,多个指令间以空格分隔
简写(最喜欢这里了):v-on简写为 @ v-bind 简写为 : v-slot简写为 #
![]()
<template v-slot:header>
v-slot必须使用在template和自定义组件上,不能使用在普通html标签上
template>
<template #header>
template是不占用html节点的,因此不会再页面增加html节点的
template>
指令的简介
v-if 被称为条件渲染指令,可以根据表达式的真假来插入和删除元素,表达式为true时显示为false时隐藏。(和js的if/else很像)
v-else 指令为v-if添加一个else块,v-else元素必须跟在v-if元素的后面,否则不会被识别,这个指令后面也不需要写表达式。
v-show 根据表达式的真假值来切换该元素的display 属性,所以v-show和v-if的区别是 v-show的值为false会渲染页面 只是该元素的css 样式的display 为none,故而页面不显示,而v-if值为false时页面不会被渲染。
v-for 看到for想到js的for循环了吧,没错,它一样是循环。只是必须使用特定语法item in expression,为当前遍历的元素提供别名
12 {{ item.text }} 34 5 6 7 89 {{ item.text }} 添加特殊属性key会在优化索引代码,可以提高列表渲染的效率,提高性能 10 如果我们要利用key属性的优点,必须保证同一父元素的所有子元素有不同的key属性!! 11
v-on 是绑定事件监听器。
用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event属性。
v-on呢还有一些修饰符 比如阻止默认事件阻止冒泡之类的,记得去查哟
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16