技术教程 编程代码 Vue——动态组件、插槽、Vue-cli创建项目、Vue项目目录结构、编写规范、es6导入导出语法 正文

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

2023-07-30,,

动态组件

// <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导入导出语法的相关教程结束。

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

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!