指令
什么是html属性:就是用来扩展html标签的功能,属性是写在html的开发标签中:属性=“属性值”,
指令就是用来扩展在vue中标签的功能
{ {}} :模板语法,文本插值
不可解析html标签
{ { 可以写变量,常量,表达式}} :undefined和null写了不会渲染到页面
就是把表达式(通过计算返回结果的公式)放到页面中进行展示
v-cloak :解决刷新页面时出现{ { }},一般写在根组件上,id="app"上,必须手动添加css代码
- 使得 {
{}} 刷新不让用户看见
- 直到编译完成前,`<div>` 将不可见
- 必须手工添加css代码
- 适用于多个元素
<div id="app" v-cloak>{
{msg}}</div>
<script>
new Vue({
el: '#app',
data: {
msg: '欢迎Vue!'
}
})
</script>
<style>
[v-cloak]
display:none;
}
</style>
v-text:文本指令
-
不可解析html标签
-
<元素 v-text='变量,常量,表达式'></元素>
-
vue3警告,会覆盖掉标签中的内容
v-html:解析HTML标签或特殊符号
-
可以解析html标签
-
<元素 v-html='变量,常量,表达式'></元素>
-
vue2会覆盖掉标签中的内容
-
vue3警告,会覆盖
v-model.trim:去除首位空格
这样,用户在输入框中输入的值会自动去除首尾空格,并与 Vue 实例中的 message
数据进行双向绑定。
<input v-model.trim="message">
template标签:<!-- 它是一个标签,但是不会显示到页面 -->
<template v-if="age>18"> 成年人的世界,你懂得~ </template>
v-once:元素内容首次加载时动态显示
-
<元素 v-once>{ {...}}</元素>
v-pre:不想编译内容:{ {}}
-
<元素 v-pre>xxx{ {xxx}}xx</元素>
v-bind :绑定数据和元素属性
-
v-bind: 属性名=""
-
简写带冒号:属性名=""
<div id="app">
<!-- 基本绑定样式 -->
<p class="active">白日依山尽</p>
<p :class="'active'">白日依山尽</p>
<p :class="x">白日依山尽</p>
<p :class="flag?x:''">白日依山尽</p>
<!-- 对象的方式 -->
<p :class="{active:false,border:true}">黄河入海流</p>
<!-- 数组的方式 -->
<p :class="['active','border']">欲穷千里目</p>
<!-- style绑定 -->
<p :style="{backgroundColor:'red',fontSize:'28px'}">更上一层楼</p>
<p :style="{backgroundColor:z}">更上一层楼</p>
</div>
v-show 标签显示和隐藏
v-show原理:css方式通过控制display: none/block来控制标签的显示和隐藏:适用于频繁切换
v-if、v-else-if、v-else 标签的创建和删除
v-if的原理:通过创建和销毁dom节点来控制元素显示和隐藏。 true 添加 false 移除:耗性能
:使用的使用js中创建(document.createElement())和删除(ele.remove() )
<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
...
<元素n v-else>
紧挨着写,不能插入其他元素
v-if和v-show区别
v-show 作用:css方式通过控制display: none/block来控制标签的显示和隐藏:适用于频繁切换
v-if的原理:通过元素的创建和销毁来控制元素显示和隐藏。 true 添加 false 移除:耗性能
性能:
-
v-if切换一次就耗费一次性能
-
v-show,只是初始显示时耗费一次性能
安全性(权限控制会体现):v-if要高于v-show
支持写在template标签上
-
v-if支持
-
v-show不支持
v-for <!-- 口诀:想让谁出现多次,就把v-for写在谁身上 -->
-
for in 遍历数组获得的是(值,下标),遍历对象获得的是(键值,健名,下标)
-
语法 v-for="(遍历的值,遍历的下标) in 你要便利的数据"
-
// 语法一:遍历数字: // v-for = "item in 数字" :key='唯一的, 有id用id,没有id使用index'
-
// 语法二:遍历数组 // v-for = "(item,index) in data中的数组" :key='唯一的, 有id用id,没有id使用index'
-
// 语法三:遍历对象 // v-for = "(value,key,index)in data中的对象" :key='唯一的, 有id用id,没有id使用index'。value是键值,key是键名,index索引
-
带key, 提高for循环的效率
-
v-if和v-for的优先级
vue2中:v-for的优先级高于v-if
vue3中:v-if的优先级更高v-for
注意:v-if和v-for尽量不要写在一个标签上
v-on:绑定事件监听器
/*
绑定事件的语法:
v-on:事件名= "少量的js代码(要求代码是赋值语法)"
v-on:事件名= "函数名"
v-on:事件名= "函数名(参数)"
简写:
@事件名 = "少量的js代码(要求代码是赋值语法)"
@事件名 = "函数名"
@事件名 = "函数名(参数)"
事件对象如何获取:
如何阻止事件的默认行为 e.preventDefault()
1. 调用时不传参数时,默认就在第一个形参位置就是事件对象
2. 调用时传递参数时,需要手动的 把事件对象$event 放在最后一个参数位置
事件修饰符:
@事件名.prevent = '事件处理函数'
@事件名.stop = '事件处理函数'
@事件名.prevent.stop = '事件处理函数'
特殊的事件如keyup 事件
按键修改符:
@keyup.enter = '事件处理函数' 抬起时并按下了回车键,就会指向事件处理函数
.enter
.delete (捕获“Delete”和“Backspace”两个按键)
.space (空格键)
.up (上箭头)
.down (下箭头)
.left (左箭头)
.right (右箭头)
配合功能键:
.ctrl 键
.alt 键
.shift 键
.meta 键
需求: 按下enter键的同时按下ctrl键
@keyup.ctrl.enter = ''
*/
v-model 在表单元素中进行双向绑定:唯一 一个双向绑定
文本类型的 <input> 和 <textarea> 元素会绑定 value默认值
文本类型的 <input> 和 <textarea> 元素会绑定 value默认值
<input type="text" v-model.number="text">
默认情况下 只要给输入框绑定了v-model 那么修改内容的时候 边修改内容会跟这变
但是有些时候 我们想修改完成内容再变 当change事件的时候才会修改内容
<input type="checkbox" v-model="checked" />
{
{checked}} //true或者false根据复选状态
data变量的类型分两大类(input中)
data变量的值的类型是数组, v-model关联的值是 以数组形式 包含所有选中的value的值
data变量的值的类型是非数组, v-model关联的值是 布尔类型的值 (true,false) (使用频率高)
<select v-model='data中变量'>
v-model关联的是选中的选项
在普通表单元素上用v-model 实现对表单元素的双向绑定
在自定义组件上用v-model 实现对子组件内容的双向绑定