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

2023/6/8 1:22:54

本文主要是介绍Vue——动态组件、插槽、Vue-cli创建项目、Vue项目目录结构、编写规范、es6导入导出语法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

动态组件

// <component :is="who"></component>
// component标签的is属性等于组件名字,这里就会显示这个组件

<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>
    let home = {
        template: `
          <div>
          <h1>首页</h1>
          </div>`,
    }
    let good = {
        template: `
        <div>
          <h1>商品页面</h1>
          </div>`,
    }
    let order = {
        template:`
        <div>
          <h1>订单页面</h1>
          </div>`,
    }
    let vm = new Vue({
        el: '#app',
        data: {
            who:'home',
        },
        components: {
            home,
            good,
            order
        }
    })
</script>

keep-alive

// 使用keep-alive把动态组件包裹起来 保存当前状态 就算切换到其他组件再切换回来 依旧还是之前的状态

<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>
    let home = {
        template: `
          <div>
          <h1>首页</h1>
          </div>`,
    }
    let 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)
            }
        }
    }
    let order = {
        template: `
        <div>
          <h1>订单页面</h1>
          </div>`,
    }
    let vm = new Vue({
        el: '#app',
        data: {
            who: 'home',
        },
        components: {
            home,
            good,
            order
        }
    })
</script>

插槽

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

// 使用步骤:
	1.在组件的html的任意位置,放个标签
		<slot></slot>
	2.后期在父组件使用该组件时
		<home>
			可以随意放内容
		</home>
	3.放的内容会被渲染到sort标签中

<body>
<div id="app">
    <xxx>
        <div>
            我是组件内部插槽添加的内容
        </div>
    </xxx>
    <hr>
    <xxx>
        <img src="https://img2.baidu.com/it/u=699375721,822998638&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
    </xxx>
</div>
</body>
<script>
    let xxx = {
        template: `
          <div>
          <h1>我是一个组件</h1>
          <slot></slot>
          <h1>我是一个组件</h1>
          </div>`,
    }

    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            xxx,
        }
    })
</script>

具名插槽

// 使用步骤
	1.组件中可以留多个插槽,命名
		 <div>
              <h1>我是一个组件</h1>
              <slot name="up"></slot>
              <h1>我也是这个组件</h1>
              <slot name="down"></slot>
          </div>
	2.在父组件中使用时,指定某个标签渲染到某个插槽上,如果不指定会全部渲染上
		<xxx>
            <div slot="up">我是div</div>
            <img src="https://img1.baidu.com/it/u=3617963344,1360304150&fm=253&fmt=auto&app=138&f=JPEG?w=507&h=500" alt="" slot="down">
        </xxx>


// 参考案例
<body>
<div id="app">
<xxx>
    <div slot="up">我是div</div>
    <img src="https://img1.baidu.com/it/u=3617963344,1360304150&fm=253&fmt=auto&app=138&f=JPEG?w=507&h=500" alt="" slot="down">
</xxx>
</div>
</body>
<script>
    let xxx = {
        template: `
          <div>
          <h1>我是一个组件</h1>
          <slot name="up"></slot>
          <h1>我也是这个组件</h1>
          <slot name="down"></slot>
          </div>
        `,
    }

    let vm = new Vue({
        el: '#app',
        data: {},
        components: {
            xxx
        }
    })
</script>

Vue-cli创建项目

# 单页面应用:spa
	以后vue项目就只有一个 index.html页面
    定义很多组件,不可能都写在 index.html中
# 单文件组件(一个组件一个文件)
	https://v2.cn.vuejs.org/v2/guide/single-file-components.html#ad
        
# 一个组件中有哪些东西
	1 html内容:以后html都放在 template标签中
    2 css内容:以后css样式都放在 style标签中
    3 js内容:以后js都放在 script标签中
    
# 使用vue-cli 创建vue项目,才能使用 单文件组件
	vue脚手架:创建出vue的项目,里面带了很多基础代码
    	类似于创建Django项目--->django-admin startproject 项目名
       
# 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)
    	
    4 装完脚手架,会多出一个命令   vue 用来创建vue项目   等同于djagno-admin命令
    
    5 使用脚手架,创建vue项目	
    	vue create 项目名
        # vue create  myfirstvue 

vue-cli命令行创建项目

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

# 4 选package.json
# 5 之前的设置,保存与不保存都可以

使用vue-cli-ui创建

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

Vue项目目录结构

# 编写vue项目,使用编辑器---》pycharm
# 使用pycharm打开vue项目

'''运行vue项目'''
#  方式一:命令行中 (一定要注意路径)
	npm run serve
     
# 方式二:使用pycharm运行  ---》点击绿色箭头
	配置一个启动脚本,以后点绿色箭头运行即可

vue项目的目录结构

myfirstvue			# 项目名
	node_modules	# 文件夹,放了该项目所有的依赖,很小很多,以后把项目传给别人,这个要删除,别人拿到执行 cnpm install 安装依赖
    public			# 文件夹
    	favicon.ico	# 小图标,浏览器上面显示,可以替换
        index.html   # spa,这个html是整个项目的应该html,不要动
    src				# 以后动这里的东西 所有代码都在这
    	assets		# 文件夹,放一些静态资源,图片,js,css
        components	 # 以后小组件写在里面 xxx.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文件夹下的文件即可

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

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

1 只需要创建页面组件
	IndexView.vue
2 里面有三部分
	// template 必须只能有一个标签,以后所有的html都写在这里
		<template>
          <div class="home">
            <h1>我是首页</h1>
            <button @click="handleClick">点我看小图片</button>
            <br>
            <img :src="url" alt="">
          </div>
        </template>
	// script标签写js代码
		<script>
            export default {
              name: 'HomeView',
              data() {
                return {
                  url: ''
                }
              },
              methods: {
                handleClick() {
                  this.url = 'https://img2.baidu.com/it/u=2095050745,1769460453&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400'
                }
              }
            }
         </script>
	// style标签写所有的样式
		<style>
            h1{
              color: pink;
            }
        </style>

es6导入导出语法

# 导出语法
	1.项目中:创建包,创建一个文件夹 xxx
    2.在包下创建 package.js
    3.在文件中写js代码
    	var name = 'xxx'
        function add(a, b) {
            return a + b
        }
    4 默认导出 对象 
        export default {
                add:add,
                name:name
            }
    5 命名导出 导出了两个变量
    	export const name = 'yyy'
        export const add = (a, b) => {
            return a + b
        }
    
# 导入语法
	# 默认导出的导入
    1 在任意的js中
    	import 起个名字  from './lqz/package'
    2 使用导入的包
    	起的名字.导出的字段
        
    import xxx from './xxx/package'
    let res = xxx.add(1,2)
    console.log(res)
    console.log(xxx.name)

        
    # 命令导出的导入
    1 在任意的js中
    	import {name,add}  from './lqz/package'
    2 直接使用即可
    
    import {add,name} from './xxx/package'
    console.log(name)
    console.log(add(2,2))


这篇关于Vue——动态组件、插槽、Vue-cli创建项目、Vue项目目录结构、编写规范、es6导入导出语法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程