前期回顾

字符串（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离开结束状态

 

 

 组件插槽传参

 

# json # vue.js
Logo
View Design

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

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign