前端开发 一月 12, 2020

vue学习笔记(一)

文章字数 5.6k 阅读约需 5 mins. 阅读次数 0

vue学习笔记(一)

前言:

VUE火了一两年了,整好假期需要开发点东西,想画个好看的UI,顺手就把VUE学一下…

环境安装

这一步比较简单,我没遇见啥问题,顺手记录一下吧。

npm install vue vue-cli -g
vue ui

成功安装后,并打开vue ui管理界面如下:
vue-ui

成功创建项目后,会进入项目仪表盘,如图:
vue-ui-仪表盘

之后我们可以安装一下HbuilderX编辑器,此编辑器对vue支持更好,写起来比vscode手感更加流畅。
vue-项目结构

src里面的main.js就是入口文件,不过vue的开发模式使得我们很少回去修改mian.js,App.vue就相当于index.html,不过由于vue中使用router更方便和灵活,也使得App.vue会很少被编辑和修改,例如element-admin源代码项目结构:
vue--element-admin项目结构

我们基本完成安装,可以开始进一步学习。这里推荐一个bilibili上快速入门学习视频地址: 4个小时带你快速入门vue

视频上讲过的我就不在列举了,记录一些没有提到的,以及一些细节导致的问题,该系列后面的章节会写一些进阶的东西。

vue 动画操作

先看一个简单的效果
vue-动画

<!-- App.vue -->
<template>
  <div id="app">
        <!-- el-button 是我引入了element-ui组件库 -->
        <!-- @click 相当于v-on:click v-on是vue指令后面跟事件就行赋予一个函数名 -->
        <el-button @click="toggle">toggle</el-button>
        <!-- vue 官方的给出的组件 用于控制标签类的子标签过渡状态-->
        <transition> 
        <!-- 通过v-show指令绑定一个flag变量 -->
            <div class="chunk" v-show="flag"></div>
        </transition>
  </div>
</template>

<script>
export default {
    name: 'app',
    // 由于使用的是vue-cli搭建出来的脚手架,App.vue也相当于一个组件,所以data得是一个函数
    data:()=>{
        return {
            // 这里我们返回一个object类型直接写就行,变量定义在这里
            flag: true
        };
    },
    methods:{
        // 组件内部函数定义在这里,
        // toggle 就是上面click触发后调用的函数
        toggle: function(){
            this.$data.flag = !this.$data.flag;
        }
    }
}
</script>

<style>
/* 这四个就是我们可以修改的样式类,来呈现出动画*/
    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translateX(150px);
    }
    .v-enter-active,
    .v-leave-active{
        transition: all 0.8s ease;
    }
    /*  */
    .chunk{
        margin-top: 10px;
        width: 50px;
        height: 50px;
        background-color: #34c2ff;
    }
</style>

一些细节我在代码注释里面写得有,上面是一个手写动画演示的例子,比较简单,但真实开发环境,特别是自己接外包时,不太可能自己手写很多动画,多是使用第三方动画库,下面给出一个例子

vue-element-动画

<template>
    <div id="app">
        <el-button @click="flag = !flag">Click Me</el-button>
        <div style="display: flex; margin-top: 20px; height: 100px;">
            <transition name="el-zoom-in-center">
                <div v-show="flag" class="transition-box">.el-zoom-in-center</div>
            </transition>

            <transition name="el-zoom-in-top">
                <div v-show="flag" class="transition-box">.el-zoom-in-top</div>
            </transition>

            <transition name="el-zoom-in-bottom">
                <div v-show="flag" class="transition-box">.el-zoom-in-bottom</div>
            </transition>
        </div>
        <div style="margin-top: 10px; margin-bottom: 10px;"></div>
        <el-button @click="flag2 = !flag2">Click Me</el-button>

        <div style="margin-top: 20px; height: 200px;">
            <el-collapse-transition>
                <div v-show="flag2">
                    <div class="transition-box">el-collapse-transition</div>
                    <div class="transition-box">el-collapse-transition</div>
                </div>
            </el-collapse-transition>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'app',

        data: () => {
            return {
                flag: true,
                flag2: true
            };
        },
        methods: {}
    }
</script>

<style>
    .transition-box {
        margin-bottom: 10px;
        width: 200px;
        height: 100px;
        border-radius: 4px;
        background-color: #409EFF;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
    }
</style>

然后我们会发现,真的就复制粘贴,而且效果还不错,仅仅做一些普通的项目,对我们来说完全够用,但vue核心的地方不仅仅让我们体验到前端开发的流畅性,还有前端路由布局,axios库的网络通信。

结束语

写到这里已经快凌晨1点半了,明后天继续写。( ̄o ̄) . z Z

0%