4.Vue动态组件、插槽、vue项目2023-09-20

5.Vue执行和开发流程、登录小案例、混入、插件、elementui2023-09-21 6.vue之路由(跳转、多级路由、守卫)、localStorage2023-09-27 7.Vue32023-10-07 8.路飞学城之基础配置2023-10-07 9.python 安装pip3、虚拟环境、pip3下载离线包2022-07-12 10.路飞学城之多方式登录、短信验证码、课程2023-10-16 11.python之redis 缓存2023-10-17

一、动态组件

1、动态组件

# <component :is="who"></component>

# component标签的is属性等于组件名字，这里就会显示这个组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="who='home'">首页</button>
    <button @click="who='good'">商品</button>
    <button @click="who='order'">订单</button>
    <hr>
    <component :is="who"></component>
</div>
 
</body>
<script>
    var home = {
        template: `
        <div>
            <h1>首页</h1>
        </div>
        `
    }
    var good = {
        template: `
        <div>
            <h1>商品页面</h1>
        </div>
        `
    }
    var order = {
        template: `
        <div>
            <h1>订单页面</h1>
        </div>
        `
    }
 
    var vm = new Vue({
        el: '#app',
        data: {
            who: 'home'
        },
        components: {
            home,
            good,
            order
        }
    })
</script>
</html>

2、效果：点什么弹出什么

3、保存输入的记录

<keep-alive>
<component :is="who"></component>
</keep-alive>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="who='home'">首页</button>
    <button @click="who='good'">商品</button>
    <button @click="who='order'">订单</button>
    <hr>
    <keep-alive>
    <component :is="who"></component>
    </keep-alive>
     
</div>
</body>
<script>
 
    var home = {
        template: `
        <div>
            <h1>首页</h1>
        </div>
        `
    }
    var good = {
        template: `
          <div>
          <h1>商品页面</h1>
          <p>搜索商品：<input type="text" v-model="name">
            <button @click="handleSearch">搜索</button>
          </p>
          </div>
        `,
        data() {
            return {
                name: ''
            }
        },
        methods: {
            handleSearch() {
                alert(this.name)
            }
        }
    }
    var order = {
        template: `
        <div>
            <h1>订单页面</h1>
        </div>
        `
    }
 
    var vm = new Vue({
        el: '#app',
        data: {
            who: 'home'
        },
        components: {
            home,
            good,
            order
        }
    })
     
</script>
</html>

二、插槽

1、插槽的作用

一般情况下，编写完1个组件之后，组件的内容都是写死的，需要加数据只能去组件中修改，扩展性很差
然后就出现了插槽这个概念，只需在组件中添加<slot></slot>，就可以在body的组件标签中添加内容

使用步骤：

#1 在组件的html的任意位置，放个标签
<slot></slot>

# 2 后期在父组件使用该组件时
<lqz>
放内容
</lqz>

# 3 放的内容，就会被渲染到slot标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <lqz>
        <div>
            我是div
        </div>
    </lqz>
    <hr>
    <lqz>
        <img src="https://scpic.chinaz.net/files/default/imgs/2023-05-12/23659b1edfc0a984.jpg" alt="">
    </lqz>
</div>
</body>
<script>
    var lqz = {
        template: `
        <div>
            <h1>我是一个组件</h1>
            <slot></slot>
            <h2>我是组件内部的h2</h2>
        </div>
        `
    }
    var vm = new Vue({
        el: '#app',
        data: {},
        components: {
            lqz,
        }
    })
</script>
</html>

效果：

2、具名插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <lqz>
        <div slot="footer">
            我是div
        </div>
        <img src="https://scpic.chinaz.net/files/default/imgs/2023-05-12/23659b1edfc0a984.jpg" alt="" slot="middle">
    </lqz>
    <hr>
</div>
</body>
<script>
 
    var lqz = {
        template: `
        <div>
            <h1>我是一个组件</h1>
            <slot name="middle"></slot>
            <br>
            <h2>我是组件内部的h2</h2>
            <slot name="footer"></slot>
        </div>
        `
    }
    var vm = new Vue({
        el: '#app',
        data: {},
        components: {
            lqz,
        }
    })
</script>
</html>

把自定义标签（组件）中的内容往tempalte中根据name插入，所以图片在上面

三、vue项目目录结构

1、单页面应用

# 单页面应用：spa（single page web application）
    -以后vue项目就只有一个 xx.html 页面
    -定义很多组件，不可能都写在 xx.html中把
# 单文件组件（一个组件一个文件）
    https://v2.cn.vuejs.org/v2/guide/single-file-components.html#ad
     
# 一个组件中有的东西
1 html内容：以后html都放在  template标签中
2 css内容 ：以后都放在 style 标签中
3 js内容:  以后都放在 script标签中
     
# 使用vue-cli 创建vue项目，才能使用 单文件组件
    -vue脚手架：创建出vue的项目，里面带了很多基础代码
    -类似于django-admim命令，可以创建出django项目

2、安装脚手架 vue-cli

# vue-cli脚手架
    # vue2中使用创建vue项目的软件必须用vue-cli
    # vue3中可以使用vue-cli，也可也使用vite创建，vite号称新一代的构建工具
# 使用vue-cli创建vue项目  步骤
    1 vue-cli是个软件，运行在nodejs环境中，安装nodejs
        -下载地址：https://nodejs.p2hp.com/download/
        -类似于python解释器，一路下一步安装---》选择安装位置---》添加到环境变量(以后再任意位置执行node或npm都会找到)
        -查看node版本
            node -v
        -安装完，释放两个可执行文件
            node  等同于  python
            npm   等同于    pip
    2 npm 安装第三方模块，速度很慢，淘宝做了个cnpm，以后咱们可以使用cnpm替代npm，会去淘宝镜像站下载，速度快
        npm install -g cnpm --registry=https://registry.npm.taobao.org
         
        # 以后 使用npm安装模块的命令全都换成 cnpm
         
    3 安装脚手架vue-cli  （类似于装django）
        cnpm install -g @vue/cli
         
    4 装完脚手架，会多出一个命令   vue 用来创建vue项目   等同于djagno-admin命令
     
    5 使用脚手架，创建vue项目 
        vue create 项目名
        # vue create  myfirstvue

3、vue-cli 命令行创建项目

# 1 vue create 项目名
     vue create  myfirstvue
# 2 选择入下图
# 3 选择Babel，Router，vuex
    # Babel：语法转换
    # Router：页面跳转 路由效果
    # vuex：状态管理器，存储数据的
     
# 3 选vue版本
 
# 4 选package.json
# 5 之前的设置，保存与不保存都可以
等待即可

需要root权限

启动项目

# 方式一：命令行中 （一定要注意路径）
npm run serve
 
 
# 方式二：使用pycharm运行 ---》点击绿色箭头
配置一个启动脚本，以后点绿色箭头运行即可

4、使用vue-cli-ui创建

vue ui 
 
#启动出一个服务，直接在浏览器中点点击就可以创建

5、vue项目目录结构

以后只需要关注src文件夹下的文件即可

components：小组件， views 页面组件，App.vue 根组件

myfirstvue           # 项目名
    -node_modules    # 文件夹，放了该项目所有的依赖，很小很多，以后把项目传给别人，这个要删除 ，别人拿到执行  cnpm install  安装依赖
    -public           # 文件夹
        -favicon.ico  # 小图标，浏览器上面显示，可以替换
        -index.html   # spa，这个html是整个项目的一个html  你不要动
    <br>　　-src              # 以后动这里面的东西，所有代码都在这里
        -assets       # 文件夹，放一些静态资源，图片，js，css
        -components    #  小组件写在里面  xx.vue
            -HelloWorld.vue  # 默认提供了一个组件
        -router     # 装了vueRouter就会有这个文件夹，如果不装就没有，现在不用关注
            -index.js
        -store      # 装了vuex就会有，不装就没有   
            -index.js
         -views    # 文件夹，里面放了所有页面组件
            -AboutView.vue    # 页面组件
            -HomeView.vue   # 页面组件   
          - App.vue         # 根组件
          - main.js          # 项目启动的入口文件，核心
             
    -.gitignore  # git相关，后面学了就会了
    -README.md   # 项目介绍
    -package.json  # 重要，存放依赖
    -vue.config.js  # vue项目的配置文件
    -package-lock.json # 锁定文件
    babel.config.js  # babel的配置，不用管
    jsconfig.json

vue执行流程

1 定义的组件，在其他组件中使用
<br>2 main.js--->App.vue--->index.html
<br>3 浏览器输入不同路径，显示不同页面
-写页面组件
-在router中配置
-浏览器中访问即可

四、vue项目编写规范

1、修改项目

##  App.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
 
##  HomeView.vue
<template>
<div class="home">
</div>
</template>
 
<script>
export default {
name: 'HomeView',
}
</script>
 
## AboutView.vue
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

2、以后写vue项目，只需要在固定位置写固定代码即可

1 只需要创建页面组件
    IndexView.vue
2 里面有三部分
    # 2.1 template 必须只能有一个标签，以后所有的html都写在这里
    <template>
      <div class="home">
        <h1>我是首页</h1>
        <button @click="handleClick">点我看美女</button>
      </div>
    </template>
     
    #2.2 script 标签写js代码
        <script>
        export default {
          name: 'HomeView',
          data(){return {
               
          }},
          methods: {
            handleClick() {
              alert('美女')
            }
          }
        }
        </script>
         
   # 2.3 所有的样式，写在<style>
    <style>
    h1{
      font-size: 80px;
    }
    </style>

3、es6导入导出语法

导出语法（默认导出和命名导出）

# 导出语法   
    1 项目中：创建一个文件夹  lqz
    2 在包下创建 package.js
    3 在文件中写js代码
        var name = 'lqz'
        function add(a, b) {
            return a + b
        }
   4 默认导出 对象 
        export default {
            add:add,
            name:name
        }
     
   5 命名导出 导出了两个变量
        export const name = '彭于晏'
        export const add = (a, b) => {
            return a * b
        }

导入语法（默认和命名）

# 默认导出的导入
    1 在任意的js中
    import 起个名字  from './lqz/package'
    2 使用导入的包
        起个名字.导出的字段
         
    # 命名导出的导入
    1 在任意的js中
    import {name,add}  from './lqz/package'
    2 直接用即可

posted @ 2023-09-20 14:56 凡人半睁眼阅读(25) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue执行和开发流程、登录小案例、混入、插件、elementui

· vue 模版语法、指令、nodejs

· Vue - Vue之动态组件、插槽、项目的创建

· 动态组件，插槽，vue-cli创建项目，目录结构，编写规范，导入导出语法

· Vue——动态组件、插槽、Vue-cli创建项目、Vue项目目录结构、编写规范、es6导入导出语法

历史上的今天：
2020-09-20 docker 6 种网络类型+网络插件

阅读目录(Content)

此页目录为空

海棠未雨，梨花先雪，一半春休

想看山海，早也去，晚也去，一个人也去

念两句诗

Vue动态组件、插槽、vue项目

一、动态组件

二、插槽

三、vue项目目录结构

四、vue项目编写规范

公告

个人信息

日历

搜索

常用链接

最新随笔

积分与排名

合集 (7)

随笔分类 (236)

随笔档案 (342)

相册 (5)

阅读排行榜

评论排行榜

推荐排行榜

海棠未雨，梨花先雪，一半春休

想看山海，早也去，晚也去 ，一个人也去

念两句诗

Vue动态组件、插槽、vue项目

一、动态组件

二、插槽

三、vue项目目录结构

四、vue项目编写规范

公告

个人信息

日历

搜索

常用链接

最新随笔

积分与排名

合集 (7)

随笔分类 (236)

随笔档案 (342)

相册 (5)

阅读排行榜

评论排行榜

推荐排行榜

想看山海，早也去，晚也去，一个人也去