布吉建网站,做网站素材网,少儿编程学什么,大兴企业官方网站建设指令
什么是html属性#xff1a;就是用来扩展html标签的功能#xff0c;属性是写在html的开发标签中#xff1a;属性“属性值”#xff0c;
指令就是用来扩展在vue中标签的功能
{{}} #xff1a;模板语法#xff0c;文本插值
不可解析html标签
{{ 可以写变量#x…指令
什么是html属性就是用来扩展html标签的功能属性是写在html的开发标签中属性“属性值”
指令就是用来扩展在vue中标签的功能
{{}} 模板语法文本插值
不可解析html标签
{{ 可以写变量常量表达式}} undefined和null写了不会渲染到页面
就是把表达式通过计算返回结果的公式放到页面中进行展示
v-cloak :解决刷新页面时出现{{ }}一般写在根组件上idapp上必须手动添加css代码 - 使得 {{}} 刷新不让用户看见- 直到编译完成前div 将不可见- 必须手工添加css代码- 适用于多个元素div idapp v-cloak{{msg}}/divscriptnew Vue({el: #app,data: {msg: 欢迎Vue!}})/scriptstyle [v-cloak]display:none;}/style
v-text文本指令 不可解析html标签 元素 v-text变量常量表达式/元素 vue3警告会覆盖掉标签中的内容
v-html解析HTML标签或特殊符号 可以解析html标签 元素 v-html变量常量表达式/元素 vue2会覆盖掉标签中的内容 vue3警告会覆盖
template标签!-- 它是一个标签但是不会显示到页面 --
template v-ifage18 成年人的世界你懂得~ /template
v-once元素内容首次加载时动态显示 元素 v-once{{...}}/元素
v-pre不想编译内容{{}} 元素 v-prexxx{{xxx}}xx/元素
v-bind 绑定数据和元素属性 v-bind: 属性名 简写带冒号属性名 div idapp!-- 基本绑定样式 --p classactive白日依山尽/pp :classactive白日依山尽/pp :classx白日依山尽/pp :classflag?x:白日依山尽/p!-- 对象的方式 --p :class{active:false,border:true}黄河入海流/p!-- 数组的方式 --p :class[active,border]欲穷千里目/p!-- style绑定 --p :style{backgroundColor:red,fontSize:28px}更上一层楼/pp :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 typetext v-model.numbertext
默认情况下 只要给输入框绑定了v-model 那么修改内容的时候 边修改内容会跟这变
但是有些时候 我们想修改完成内容再变 当change事件的时候才会修改内容
input typecheckbox v-modelchecked /{{checked}} //true或者false根据复选状态
data变量的类型分两大类input中 data变量的值的类型是数组 v-model关联的值是 以数组形式 包含所有选中的value的值 data变量的值的类型是非数组 v-model关联的值是 布尔类型的值 truefalse 使用频率高
select v-modeldata中变量v-model关联的是选中的选项
在普通表单元素上用v-model 实现对表单元素的双向绑定
在自定义组件上用v-model 实现对子组件内容的双向绑定
