indexOf lastIndexOf
查询字符串下标，找不到返回-1
split（‘’）分割为数组
slice（start，end）切割字符串
subString（start，end）截取字符串 按下标end
subStr（start，len）截取字符串（按长度len）
eval（）字符串当做js执行
json字符串转换js对象
把js对象转换为json字符串
：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>监听数据的变化执行回调函数
基本语法
computed：{
"obj":{
handler(oval,nval){
//执行函数
}，
deep:true
}
}
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: {
// 自定义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离开结束状态
