4、vue组件、动画、脚手架

已于 2023-11-08 14:27:12 修改
阅读量39 收藏
点赞数
分类专栏： 学习vue 文章标签： 前端 vue.js javascript
于 2023-11-06 20:08:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47168657/article/details/134249130
版权

组件、动画、脚手架

一、v-if和v-for的优先级

  • v-for优先级高于v-if

例：

    <div id="app">
        <ul>
            <!-- 
                v-for和v-if一起使用的时候，v-for的优先级高
                
                这个代码会先执行v-for,循环生成10个li标签
                然后再执行v-if,删除后面的6个不满足条件的标签，性能不好

                所有vue不建议v-for和v-if一起使用，如果真有这种业务需求，建议使用计算属性

             -->
            <!-- <li v-for="(item,index) in arr" :key="item" v-if="index < 4">{{item}}</li> -->
            <li v-for="(item,index) in showArr" :key="item">{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                arr:[1,2,3,4,5,6,7,8,9,10]
            },
            methods:{},
            computed:{
                //通过计算属性，获取到想要的数据
                showArr(){
                    return this.arr.slice(0,4)
                }
            }
        })
    </script>

二、动画

2、1 动画介绍

  • 使用场景
  1、v-if
  2、v-show
  3、路由切换
  4、动态组件
  • 动画的六个状态
    在这里插入图片描述
  进来之前：enter
  进来过程：enter-active
  进来完成：enter-to
  
  离开之前：leave
  离开过程：leave-active
  离开完成：leave-to

2、2 内部动画

  • 模板语法
 <button @click=' isshow = !isshow '>切换</button>
   <!-- 添加动画步骤
    1.带添加动画的元素，在外面嵌套transition标签
    2.在transition标签起名 name='名字' name='a'
    3.定义6个状态
    a-enter  a-enter-active  a-enter-to
    -->
    <transition name="a">
       <div class="box" v-if="isshow"></div>
    </transitio
  • 定义六个状态
 /* -------------进来的状态---------------- */
 /* 进来之前：enter */
  .a-enter {
       left: -200px;
       transform: scale(0.1, 0.1);
       opacity: 0;
   }
/* 进来过程：enter-active */
 .a-enter-active {
     transition: all 1s;
  }
/* 进来完成：enter-to */
.a-enter-to {
    left: 500px;
    transform: scale(1, 1);
    opacity: 1;
}
/* -----------------离开的状态------------- */
/* 离开之前：leave */
 .a-leave {
  left:500px;
  transform: rotate(0deg);
  opacity: 1;
 }
/* 离开过程：leave-active */
 .a-leave-active {
 transition: all 1s;
 }
/* 离开完成：leave-to */
.a-leave-to {
  left: 1000px;
  transform: rotate(720deg);
  opacity: 0
}

2、3 第三方库

  npm install animate.css  --save
  • 使用
<!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>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./node_modules/animate.css/animate.css">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: red;
            /* position: absolute; */
            /* left: 500px;
            top: 100px; */
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 
            1.下载 npm install animate.css --save
            2.引入
             <link rel="stylesheet" href="./node_modules/animate.css/animate.css">
            3.给需要添加标签的元素，嵌套transition标签
            4.设置属性
                enter-active-class='进入的样式'
                leave-active-class='离开的样式'               
         -->
        <button @click=' isshow = !isshow '>切换</button>
        <transition
            enter-active-class="animate__animated animate__bounceIn"
            leave-active-class="animate__animated animate__fadeOutLeft"
        >
            <div class="box" v-if="isshow"></div>
        </transition>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                isshow: false
            },
            methods: {}
        })
    </script>
</body>
</html>
  • 注意：不会同时使用进入和离开的状态，一般使用进入的那个状态

三、组件

  • 组件：可复用的vue实例

3、1 注册组件

3.1.1局部注册

  • 语法
new Vue({
       components:{ //复数，可以创建多个组件
               组件名称：{
                    template:"" //模板,
               }
        }
})
  • 实例-局部注册组件
  new Vue({
            el:"#app",
            data:{},
            methods:{},
            //1.注册组件-局部组件--只能在当前vue实例中使用
            components:{
                //组件名：{template:""}
                navweb:{
                    template:"<div><h1>你好，我是网站导航</h1><h1>你好</h1></div>"
                },
                one:{
                    template:"<div>我是one组件</div>"
                }
            }
        })
  • 使用组件
   <div id="app">
        <!-- 2.使用组件 -->
        <navweb></navweb>
        <navweb></navweb>
        <one></one>
        <one></one>
    </div>

3.1.2全局组件

  • 语法
   //一次只能注册一个，要放在实例前面
   Vue.component("组件名称",{
   template:""
   })
  • 实例
   //80%局部组件，20%全局组件
   //3.注册全局组件--所有的vue实例都可以使用
    Vue.component('com',{
        template:`
             <ul>
                <li>特色主题</li>
                <li>行业频道</li>
                <li>生活服务</li>
              </ul>
            `
    })
  • 使用全局组件
    <div id="app2">
        <h1>我是app2</h1>
        <!-- 局部组件只能在对应的vue实例中使用 -->
        <!-- <navweb></navweb> -->
        <!-- 4.使用全局组件 -->
        <com></com>
    </div>

3.1.2组件的命名规则

  • 命名规则
1.不能使用已经存在的标签命名，eg：div、p、span 、a、b....
2.不能使用已经存在的标签的大写命名，eg：DIV、P,SPAN ...
3.如果组件名中间包含了大写字母，调用的时候需要变成 【-小写】 烤串写法
  第一个字母就是大写可以不写-
4.组件名称中包含一个大写字母，方便调用

3、2 template

  • template 只能有一个根节点
vTwo:{
  // 报错：Component template should contain exactly one root element
  // 1.template只能有一个根节点
   template:`<div><h1>this is two</h1></div>
            <p>我是two组件的内容</p>
            `
   }，
  • 可以借助template标签书写template属性
<template id="three">
    <div>
       <h2>我是一个标题</h2>
       <ul>
          <li>列表</li>
          <li>列表</li>
          <li>列表</li>
       </ul>
    </div>
</template>
//2.可以借助template标签来书写template选项
 vThree:{template:"#three"
}

3、3 data

  • 组件中的data必须是一个函数
 data(){
     return {name:"妲己"}
 }
  • data为什么是一个函数
 1、组件是复用，希望组件长一样，但是数据相互隔离的
 2、如果data是一个对象的话，对象一个引用数据类型，那么所有的组件共用一套数据，就会出现一改全改的现象
 3、如果data是一个函数返回一个对象的话，函数是一个作用域空间，每调用一次，就会生成一个新的作用空间，
 里面有一个对象，这样的话数据都是隔离的

3、4 组件是可复用的vue实例

  • 验证
1、组件没有el
2、data必须是一个函数，返回一个对象
3、其他的和vue实例一样
4、每调用一次组件，会是一个新的生命周期
     v-if和v-show在组件上使用：v-if会引起生命周期的创建和销毁，v-show不会
5、一个组件只能使用自己的data，自己的子组件，自己的methods，computed，watch，filters
6、全局组件，所有vue实例都可以使用
  • 代码案例一
 <!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>
    <script src="./vue.js"></script>
    <style>
        .box{
            padding: 20px;
            margin: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <v-one></v-one>
        <v-one></v-one>

        <button @click="isshow = !isshow">开关</button>
        <!--3. v-if和v-show作用在组件上的时候，v-if切换引起生命周期的重新执行，v-show不会 -->
        <v-one v-if="isshow"></v-one>
    </div>

    <!-- 定义组件模板 -->
    <template id="one">
        <div class="box">
            <p>姓名：{{name}}</p>
            <button @click="change">修改名字</button>
        </div>
    </template>
    <script>
        new Vue({
            el:"#app",
            data:{
                isshow:true
            },
            methods:{},
            components:{
                //1.组件是可复用的vue实例
                //组件没有el，data必须是函数返回一个对象，其他的都和vue实例一样
                vOne:{
                    template:"#one",
                    data(){
                        return {
                            name:"杨洋"
                        }
                    },
                    methods:{
                        change(){
                            this.name = "王楚然";
                        }
                    },

                    //2.生命周期，每调用一次组件，都会产生一个新的vue实例，都会走生命周期
                    mounted(){
                        console.log("挂载完成");
                    },
                    destroyed(){
                        console.log("卸载完成");
                    }
                }
            }
        })
    </script>
</body>
</html>
  • 代码案例二：使用了组件嵌套
<!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>
    <script src="./vue.js"></script>
    <style>
        .box{
            padding: 20px;
            margin: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <v-one></v-one>
        <v-two></v-two>
        <web-nav></web-nav>
    </div>


    <!-- one组件-->
    <template id="one">
        <div class="box">
            <p>this is one</p>
            <p>姓名：{{name}}</p>

            <!-- 使用嵌套组件 -->
            <v-child></v-child>
            <web-nav></web-nav>
        </div>
    </template>

    <!-- two组件-->
    <template id="two">
        <div class="box">
            <p>this is two</p>
            <p>姓名：{{name}}</p>
            <v-child></v-child>
            <web-nav></web-nav>
        </div>
    </template>

    <!-- 嵌套组件 -->
    <template id="child">
        <div class="box">
            <h1>this is child</h1>
            <web-nav></web-nav>
        </div>
    </template>

    <!-- 全局组件 -->
    <template id="nav">
        <div class="box">
            <ul>
                <li>首页</li>
                <li>列表页</li>
                <li>详情页</li>
            </ul>
        </div>
    </template>
    <script>
        // 2.定义全局组件--全局组件可以在所有vue实例中使用
        Vue.component("webNav",{
            template:"#nav"
        })

        new Vue({
            el:"#app",
            data:{
                isshow:true
            },
            methods:{},
            components:{
                //讨论组件关系的时候，只有父子，非父子组件
                //1.一个组件只能用自己东西（data,methods,computed,filters,components.....）
                vOne:{
                    template:"#one",
                    data(){
                        return {
                            name:"杨洋"
                        }
                    },
                    components:{
                        vChild:{
                            template:"#child"
                        }
                    }
                },
                vTwo:{
                    template:"#two",
                }
            }
        })
    </script>
</body>
</html>

3、5 组件嵌套

  • 嵌套
 //注册
 vOne:{
      template: "#one",
            components: {
              vTwo: {
                template: "#two"
              }
           }
  }
  • this的指向
    在这里插入图片描述

四、脚手架

4、1 脚手架创建项目

  • 脚手架------vue-cli
 vue-cli是vue核心工具之一，通过命令快速搭建项目的基本骨架

  npm i webpack -g :全局安装webpack
  webpack -v：   查看webpack安装版本
   
  npm  install @vue/cli   -g :全局安装vue脚手架
  vue -v或者 vue  --version:脚手架版本
  • 脚手架创建项目
    注意：创建项目的地方不有vue.js文件
  vue create 项目名称（不要有中文，不要用驼峰，不要使用关键字）

在这里插入图片描述

  • 启动
  cd 项目目录
  npm run serve

4、2 项目目录

  • 目录
  vue.config.js       (跨域代理)
  README.md           阅读指南，有那些指令
  package.json        依赖管理
  package-lock.json   依赖管理
  babel.config.js     es6转es5配置文件
  .gitignore          定义git的忽略文件
  src                 前端写代码的地方
     --assets         静态资源文件 img css js font
     --components     组件文件夹，一个.vue文件就是一个组件，一个组件包含三个部分
                        1.视图template html部分
                        2.逻辑代码script js部分
                        3.样式style css部分
     --app.vue        根组件
     --main.js        入口js文件，实例化vue的地方
  public 共有文件
     --favicon.ico 图标
     --index.html 主html文件
  node_modules 第三方包文件夹

4、3 初始化项目

  • 删除assets,components文件夹中的文件
  • 重置app.vue文件的内容
<template>
</template>
<script>
  export default {
   }
</script>
<style>
</style>
是瑶妹儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
构建vue组件库脚手架_Vue.js的原型组件库构建
cuk5239的博客
07-25 262
构建vue组件库脚手架 原语 (Protovue) A prototyping component library. 原型组件库。 入门 (Getting Started) Hacker Noon Tutorial黑客中午教程 Protovue Examples原型实例 组件 (Components) 格 (Grid) <v1-grid /> <v1-grid size...
14-VUE的脚手架
m0_57262196的博客
04-09 977
ref属性1.被用来给元素或子组件注册引用信息(id的替代者)2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象(vc)3.使用方式：打标识：.... 或 获取：功能：让组件接收外部传过来的数据(1).传递数据：(2).接收数据：第一种方式（只接收）：第二种方式（限制类型）：props:{第三种方式（限制类型、限制必要性、指定默认值）：props:{
vue进阶讲解 组件，动画，模板引用以及脚手架
WUYOU798的博客
03-02 433
组件的插槽 和 HTML 元素一样，我们经常需要向一个组件传递内容 我们使用 <slot> 作为我们想要插入内容的占位符 <step> 你好，我是嵌套内容 </step> template:`<div><h1>组件的标题</h1><slot></slot></div>` 作用域插槽 有时让插槽内容能够访问子组件中才有的数据是很有用的。 ...
使用vue脚手架搭建前端工程（附：搭配ElementUI来快速开发）
m0_63445035的博客
06-18 9774
首先根目录下面有一个index.html的文件，这也是唯一的一个html文件吧，里面很简单，就是vue挂载了一个div：这个对应的vue实例在main.js文件里，main.js是核心文件这里指明了路由，还指明了局部组件以及模板。通过注册了名字为App的组件，以及注册好了路由。
vue组件+脚手架
weiweiweb888的博客
11-19 788
组件(components) 以前我们讲过模块化，而模块化指的是纯js的部分，也就是纯逻辑部分。 前端包含html、css、js。前端提出了一个组件化思想： 组件化：指把html、css、js通过某种规范把它蹂躏在一起。然后我通过书写标签的方式，那么就复用了某段代码（包含你封装好的html、css、js），那封装好的这个东西就叫组件 。 组件化一定是包含模块化的（每个组件都是独立的）、而模块化不等于组件化。 定义 组件(component)在vue是一个很强大的功能,可以对HTML进行扩展,在大型应用中,为
从0搭建vue-cli4脚手架
11-20
后续的开发过程中，你还需要了解 Vue 的组件化开发、生命周期、响应式数据绑定、计算属性、指令、过渡动画等核心概念和功能。 总的来说，Vue CLI 4 提供了一站式的解决方案，帮助开发者快速地创建和管理 Vue 项目，...
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
vue移动端轮盘抽奖组件
07-16
4. **组件化开发**：Vue组件是可复用的代码块，可以封装HTML、CSS和JavaScript。抽奖轮盘可以作为一个单独的组件编写，这样有利于代码组织和复用。组件内部可以包含数据、方法、生命周期钩子等。 5. **CSS动画**：...
Vue Transition实现类原生组件跳转过渡动画的示例
12-10
这个组件在 Vue 应用中起到了桥梁的作用，它能够帮助开发者在不同组件之间添加丰富的过渡动画，使得用户体验更加流畅和专业。Vue.js 官方文档中详细介绍了 Vue Transition 的使用方式，包括其与 CSS 动画的结合、...
基于vue-cli脚手架整合echarts5创建的水球图案例
07-19
Vue CLI是一个强大的脚手架工具，用于快速搭建Vue.js项目，而ECharts5则是一款优秀的数据可视化库，它提供了丰富的图表类型，包括我们在此案例中使用的水球图（liquidFill）。 首先，让我们了解Vue CLI。Vue CLI是...
Vue 组件库 Element 脚手架 入门教程
热门推荐
JAVA_HIGHNESS的专栏
03-26 10万+
前提是安装了nodejs（6.0+），npm 验证安装成功 node –version npm –version Element官网地址： http://element-cn.eleme.io/#/zh-CNElement 脚手架 代码git地址： https://github.com/ElementUI/element-starter.gitgit clone下来后，进入elem
vue组件使用（脚手架中使用）
Candy_mi的博客
11-27 543
父组件 // 父组件 &lt;template&gt; &lt;div id="app"&gt; &lt;img src="./assets/logo.png"&gt; &lt;!-- 路由的方法 --&gt; &lt;!-- &lt;router-view/&gt; --&gt; &lt;!-- 组件的方法 ti
Vue（八）vue脚手架
qd520_1314的博客
04-25 2020
a.先决定要把项目文件夹保存在哪个位置； b.然后在整个文件夹的位置，shift+鼠标右键打开power shell窗口，运行：vue create 自定义项目名；系统出现提示后按照以下过程进行选择： 1）? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) > Manually select features 2）? Check the
Node多版本管理器NVM安装使用
最新发布
GongWeiBuQi的博客
07-11 180
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 867
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 749
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 1027
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 758
模糊搜索功能 每个网站都要用得到
前端Vue面试题精选,速来!!!完整版pdf.pdf
12-14
前端Vue面试题精选,速来!!!完整版pdf.pdf

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值