前期回顾

字符串(vue可能会用到的内容)

indexOf lastIndexOf

查询字符串下标,找不到返回-1

split(‘’)分割为数组

slice(start,end)切割字符串

subString(start,end)截取字符串 按下标end

subStr(start,len)截取字符串(按长度len)

json

eval()字符串当做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离开结束状态

 

 

 组件插槽传参

 

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐