首页 > 其他分享 >动态组件，插槽，vue-cli创建项目，目录结构，编写规范，导入导出语法

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

时间：2023-06-07 20:45:55浏览次数：39  
标签：vue cli 项目 插槽 js var 组件

1 动态组件

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.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>

    component标签的is属性等于组件名字，这里就会显示这个组件
</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>

1.1 keep-alive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.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>

2 插槽

# 一般情况下，编写完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="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.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.1 具名插槽

# 使用步骤：	
	1 组件中可以留多个插槽，命名
        <div>
            <h1>我是一个组件</h1>
            <slot name="middle"></slot>
            <h2>我是组件内部的h2</h2>
            <slot name="footer"></slot>
        </div>
	2 在父组件中使用时，指定某个标签渲染到某个插槽上
        <lqz>
            <div slot="footer">
                我是div
            </div>

            <img src="https://scpic.chinaz.net/files/default/imgs/2023-05-12/23659b1edfc0a984.jpg" alt="" slot="middle">

        </lqz>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.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>
            <h2>我是组件内部的h2</h2>
            <slot name="footer"></slot>
        </div>
        `
    }
    var vm = new Vue({
        el: '#app',
        data: {},
        components: {
            lqz,
        }


    })
</script>
</html>

3 vue-cli创建项目

# 单页面应用：spa
	-以后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项目
        
        
        
# 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 在node环境中装vue-cli  （类似于装django）
		cnpm install -g @vue/cli
        
    4 装完脚手架，会多出一个命令   vue 用来创建vue项目   等同于djagno-admin命令
    D
    5 使用脚手架，创建vue项目	
    	vue create 项目名
        # vue create  myfirstvue

3.1.1 vue-cli 命令行创建项目

# 1 vue create 项目名
     vue create  myfirstvue
# 2 选择入下图
# 3 选择Babel，Router，vuex
	# Babel：语法转换
    # Router：页面跳转 路由效果
    # vuex：状态管理器，存储数据的
    
# 3 选vue版本

# 4 选package.json
# 5 之前的设置，保存与不保存都可以
等待即可

image

3.1.2 使用vue-cli-ui创建

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

4 vue项目目录结构

# 编写vue项目，使用编辑器---》pycharm

# 使用pycharm打开vue项目

4.1 运行vue项目

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

image

4.2 vue项目的目录结构

myfirstvue           # 项目名
	-node_modules    # 文件夹，放了该项目所有的依赖，很小很多，以后把项目传给别人，这个要删除 ，别人拿到执行  cnpm install  安装依赖
    -public           # 文件夹
    	-favicon.ico  # 小图标，浏览器上面显示，可以替换
    	-index.html   # spa，这个html是整个项目的一个html  你不要动
    -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
    
    
    
### 总结
以后只需要关注src文件夹下的文件即可

5 vue项目编写规范

*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>

5.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>

6 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 直接用即可

标签：vue,cli,项目,插槽,js,var,组件
From： https://www.cnblogs.com/whxx/p/17464491.html

相关文章

  • Vue 插槽的定义和使用
     父组件中使用插槽,相当于开放了在子组件内部使用的条件在APP的Vue中解析后塞到Category中,videos里添加上controls就能够播放电影了 子组件Category中定义,slot中间存放默认值 category的样式 不具名插槽写两份,就有两个重复的展示效果 使用时会有两个,......
  • VUE路由传参的实用方式
    本文讲解了VUE项目中路由之间的传值方式，涉及到的方法都是开发时常用的，希望对大家有多帮助。1.方式一：使用router-link标签 1.1params传参首先定义好路由constroutes=[{path:‘/home’,component:()=>import(‘/../views/home.vue’)},{path:......
  • vue和vuex的版本搭配
    重要是事情说三遍，vue2使用vuex3！vue3使用vuex4.！否则会出现this.$store为undefined错误！vue2使用vuex3！vue3使用vuex4.！否则会出现this.$store为undefined错误！vue2使用vuex3！vue3使用vuex4.！否则会出现this.$store为undefined错误！......
  • Vue 配置项props 使用方法
     props templatescript1 script2 ......
  • Vue 执行流程
    1.main.js项目入口文件2.App.vue创建路由,设置App的样式,由router-link链接到响应的路由地址不同版本的vue区别3.router>index.js注册APP下的二级路由到不同视图4.public>index.htmlpublic下的页面配置,public的路由是5.自定义配置文件不能更改的文件:......
  • clickhouse读写数据库3-- clickhouse_driver 模块
    这是用百度的文心一言生成的代码。刚开始2次都是错误的，明确指出clickhouse_driver没有占位符，让AI重新生成。重新生成了2次之后，才得到正确代码  #!/usr/bin/envpython#-*-coding:utf-8-*-#author:henry#desc:整理clickhouse读写的范例，方便日后读写click......
  • vscode rest client
    安装略helloworld文档地址:https://marketplace.visualstudio.com/items?itemName=humao.rest-client文件后缀为.http或.rest一个文件有多个请求的话,用###分割如果有报错:HeadernamemustbevalidHTTPtoken,细看官网,则注意大小写content-typebody参......
  • vue封装组件并发布到Npm
    前言vue封装组件是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用，甚至我们可以直接从npm仓库下载别人封装好的组件使用，入element-ui这一类的组件库。1、环境准备因为我们此次封装的是Vue组件，所以我们直接在Vue脚手架项目里面进行封装即可。（1）、初始化项目vuec......
  • vue 预览word文档、图片、pdf文件等
    <el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handlePreviewFile(obj)">预览</el-button><el-dialogtitle="预览":visible.sync="......
  • vue3实现自定义指令
    创建一个empty.jsimport{nextTick}from'vue';constemptyImgUrl=newURL('@/assets/images/empty-icon.jpeg',import.meta.url).href;//在vue3中不支持require引入静态图片，这是一种引入方式另外一种是直接importconstempty={install(app,options){app......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99