共计 2236 个字符,预计需要花费 6 分钟才能阅读完成。
内容渲染指令
v-text
指令的毛病:会笼罩元素外部原有的内容!{{}}
插值表达式:在理论开发中用的最多,只是内容的占位符,不会笼罩原有的内容!v-html
指令的作用:能够把带有标签的字符串,渲染成真正的 HTML 内容!
属性绑定指令
留神:插值表达式只能用在元素的 内容节点 中,不能用在元素的 属性节点 中!
- 在 vue 中,能够应用
v-bind:
指令,为元素的属性动静绑定值; - 简写是英文的
:
-
在应用 v-bind 属性绑定期间,如果绑定内容须要进行动静拼接,则字符串的里面应该包裹单引号,例如:
<div :title="'box' + index"> 这是一个 div</div>
事件绑定
-
在 vue 提供的模板渲染语法中,除了反对 绑定简略的数据值之外,还反对 Javascript 表达式的运算
例 : {{OK ? 'YES' : 'NO'}} {{message.split('').reverse().join('') }}
-
vue 提供了 v-on 事件绑定指令,用来辅助程序员为 DOM 元素绑定事件监听
<h3>count 的值为 : {{count}}</h3> <!-- 语法格局为 v-on: 事件名称 ="事件处理函数的名称" --> <button v-on:click="addCount">+1</button>
留神:原生 DOM 对象有
onclick、oninput、onkeyup
等原生事件,替换为 vue 的事件绑定模式后, 别离为:v-on:click、v-on:input、v-on:keyup -
通过 v-on 绑定的事件处理函数,须要 在 methods 节点 中进行申明:
const vm = new Vue({ el: '#app', data: {count: 0}, methods: { //v-on 绑定的事件处理函数, 须要申明在 methods 节点中 addCount() { // 事件处理函数的名字 // this 示意以后 new 进去的 vm 实例对象, // 通过 this 能够拜访到 data 中的数据 this.count += 1 } }, })
v-on:
简写是@
-
语法格局为:
<button @click="add"></button> methods: {add() { // 如果在办法中要批改 data 中的数据,能够通过 this 拜访到 this.count += 1 } }
-
$event
的利用场景:如果默认的事件对象 e 被笼罩了,则能够手动传递一个 $event。例如:<button @click="add(3, $event)"></button> methods: {add(n, e) { // 如果在办法中要批改 data 中的数据,能够通过 this 拜访到 this.count += 1 } }
注:$event 是 vue 提供的非凡变量,用来示意原生的事件参数对象 event。$event 能够解决事件参数对象 event
被笼罩的问题。
-
事件修饰符:
-
.prevent
阻止默认行为(例: 阻止 a 链接的跳转, 阻止表单的提交等)
<a @click.prevent="xxx"> 链接 </a>
-
.stop
阻止事件冒泡<button @click.stop="xxx"> 按钮 </button>
-
capture 以捕捉模式触发以后的事件处理函数
.once 绑定的事件只触发 1 次
.self 只有在 event.target 是以后元素本身时触发事件处理函数
-
v-model 指令
-
input 输入框
- type=”radio”
- type=”checkbox”
- type=”xxxx”
- textarea
-
select
v-model 指令的修饰符
为了不便对用户输出的内容进行解决, vue 为 v -model 指令提供了 3 个修饰符, 别离是:
修饰符 作用 示例 .number 主动将用户的输出值转为数值类型 <input v-model.number=”age”> .trim 主动过滤用户输出的首尾空白字符 <input v-model.trim=”msg”> .lazy 在 ”change” 时而非 ”input” 时更新 <input v-model.lazy=”msg”>
条件渲染指令
-
v-show
的原理是:动静为元素增加或移除display: none
款式,来实现元素的显示和暗藏- 如果要频繁的切换元素的显示状态,用 v-show 性能会更好
-
v-if
的原理是:每次动态创建或移除元素,实现元素的显示和暗藏- 如果刚进入页面的时候,某些元素默认不须要被展现,而且前期这个元素很可能也不须要被展现进去,此时 v-if 性能更好
在理论开发中,绝大多数状况,不必思考性能问题,间接应用 v-if 就好了!!!
v-if 指令在应用的时候,有两种形式:
-
间接给定一个布尔值 true 或 false
<p v-if="true"> 被 v-if 管制的元素 </p>
-
给 v-if 提供一个判断条件,依据判断的后果是 true 或 false,来管制元素的显示和暗藏
<p v-if="type ==='A'"> 良好 </p>
- v-else | v-else-if 指令必须配合 v -if 指令一起应用, 否则它将不会被辨认.
列表指令渲染
-
v-for 指令须要应用 item in items 模式的非凡语法:
- items 是待循环的数组
- item 是被循环的每一项
- (应用 key 保护列表的状态)
- 应用 key 保护列表的转态
-
key 的注意事项:
- key 的值只能是字符串或数字类型
- key 的值必须具备唯一性(即:key 的值不能反复)
- 倡议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具备唯一性)
- 应用 index 的值当作 key 的值没有任何意义(因为 index 的值不具备唯一性)
- 倡议应用 v -for 指令时肯定要指定 key 的值(既晋升渲染性能, 有避免列表状态错乱)