前期回顾 字符串（vue可能会用到的内容）
indexOf lastIndexOf
查询字符串下标，找不到返回-1
split（‘’）分割为数组
slice（start，end）切割字符串
subString（start，end）截取字符串 按下标end
subStr（start，len）截取字符串（按长度len）
jsoneval（）字符串当做js执行
JSON.parse(str)json字符串转换js对象
json.stringify(obj)把js对象转换为json字符串
数组 style：style=“{color:'red',fontSize:'24px'}”
css属性驼峰式写法
文本:class="active"
没有加单引号的active是一个变量不是字符串
对象:class="{'active':flag}"
数组:class="list"
相关案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .active { background-color: #f00; color: #fff; } .big { font-size: 22px; padding: 6px; } .blod { font-weight: 800; } </style> <body> <div class="app"> <!-- 字符串方式 --> <button @click="flag=!flag" v-bind:class="flag?'active':''">开关</button> <!-- 对象方式 --> <button @click="flag=!flag" :class="{'active':flag,'big':isBig}">开关</button> <!-- 数组方式 --> <p :class="classList">测试文本</p> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script> <script> new Vue({ el: ".app", data() { return { flag: true, isBig: true, classList: ['blod', 'big', 'active'] } } }) </script> </html> watch 监听监听数据的变化执行回调函数
基本语法
computed：{ "obj":{ handler(oval,nval){ //执行函数 }， deep:true } } ?本地存储 components 组件 作用1、组件是vue的一个重要的特点
2、实现多人协作开发
3、通过组件划分降低开发的难度
4、实现复用，降低重复劳动
组件解释组件就是定义好的一功能模块
建议：多用props，少在组件使用data（降低组件的耦合性）
定义与使用1、定义 注意：template有且只有一个根节点
const steper={
template：`<span></span>`
}
使用2、在父组件中注册
components：{steper：steper}
3、在组件的模板中使用
<steper></steper>
组件传参 父子传参 ??
?子传父 插槽父:
<model> <input/> <button></button> </model>子组件 模板中使用
template:`<div><slot></slot></div>` 具名插槽 插槽作用域 directives指令自定义指令
directives: { // 自定义focus指令 "focus": { // 当被插入时候用inseted // 只绑定一次用bind // 更新时候用update bind(el, binding) { // el指令对应节点 // binding.value el指令的值 console.log(el, binding); if (binding.value) { // 让指令对应的节点获取焦点 el.focus(); } }, } }filters过滤
filters: { fix(val, len = 3) { // 返回显示的内容 return Number(val).toFixed(len) }, day(val) { var time1 = new Date(val).getTime(); var time2 = new Date().getTime(); var srr = time2 - time1; var day = Math.round(srr / 1000 / 60 / 60 / 24); return day + '天前'; } }作用：格式化数据 val 过滤前的值 return 过滤后的值 len fix 过滤器的参数
watch监听
computed计算
props属性
created创建完毕
动画两个状态形成过度
进入和离开 v-if v-show
transition 单个动画元素
属性name名称 enter-active-calss=" " 指定进入class
leave-active-class 指定离开class
产生状态与类产生状态与类:.v-enter-active 进入整个状态.v-enter
进入开始状态.v-enter-to 进入结束状态 .v-leave-active
离开整个状态.v-leave 离开开始状态.v-leave-to离开结束状态
?
?
?组件插槽传参?
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
