Vue基础

左手js右手vue

已于 2022-09-23 21:25:13 修改

阅读量4k

点赞数 2

文章标签： json vue.js vue

于 2022-09-21 17:26:30 首次发布

本文链接：https://blog.csdn.net/ck2018182068/article/details/126976974

版权

前期回顾

字符串（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、在组件的模板中使用

组件传参

父子传参

子传父

插槽

父:

<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创建完毕