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导入导出语法的更多相关文章
- vuecli创建项目-vue项目目录介绍-es6导入导出语法-小练习登录功能-scoped
目录 vuecli创建项目-vue项目目录介绍-es6导入导出语法-小练习登录功能-scoped 今日内容概要 今日内容详细 1 vue-ci创建项目 2 vue项目目录介绍 3 es6导入导出语法 ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- 【Vue】vue项目目录介绍 es6的导入导出语法 vue项目开发规范 Vue项目编写步骤
目录 昨日回顾 今日内容 0 vue-cli创建项目 node.js环境 创建vue-cli项目 1 vue项目目录介绍 node_modules index.html app.vue package ...
- maven 创建web项目的标准目录结构
maven 创建web项目的标准目录结构 CreateTime--2018年4月18日21:05:37 Author:Marydon 1.标准目录介绍(开发目录) 2.在eclipse下,目录展示 ...
- YII框架开发一个项目的通用目录结构
YII框架开发一个项目的通用目录结构: 3 testdrive/ 4 index.php Web 应用入口脚本文件 5 assets/ 包含公开的资源文件 6 css/ 包含 CSS 文件 7 ima ...
- maven项目的标准目录结构
maven项目的标准目录结构如下:
- Oracle 删除用户和表空间////Oracle创建删除用户、角色、表空间、导入导出、...命令总结/////Oracle数据库创建表空间及为用户指定表空间
Oracle 使用时间长了, 新增了许多user 和tablespace. 需要清理一下 对于单个user和tablespace 来说, 可以使用如下命令来完成. 步骤一: 删除user drop ...
- 【Vue】计算属性 监听属性 组件通信 动态组件 插槽 vue-cli脚手架
目录 昨日回顾 1 计算属性 插值语法+函数 使用计算属性 计算属性重写过滤案例 2 监听属性 3 组件介绍和定义 组件之间数据隔离 4 组件通信 父子通信之父传子 父子通信之子传父 ref属性 扩展 ...
- Vue动态组件的实践与原理探究
我司有一个工作台搭建产品,允许通过拖拽小部件的方式来搭建一个工作台页面,平台内置了一些常用小部件,另外也允许自行开发小部件上传使用,本文会从实践的角度来介绍其实现原理. ps.本文项目使用Vue CL ...
- Vue 动态组件、动画、插件
1 动态组件 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is=”组件名 ...
随机推荐
- 解放生产力：30+实用AI工具汇总
除了ChatGPT,还有哪些好用AI工具?带着这个问题,也为了解AIGC已经在哪些场景落地,我体验了30多个AI工具并且分享出来,希望对你有帮助. 文字 ChatGPT -- 解决任何问题地址:htt ...
- Go语言：通过TDD驱动测试开发为同事写的程序优化提速——初次接触并发与channel
正文: 假如同事已经写了一个 CheckWebsites 的函数检查 URL 列表的状态. package concurrency type WebsiteChecker func(string) b ...
- 使用 Azure OpenAI 打造自己的 ChatGPT
一.前言 当今的人工智能技术正在不断发展,越来越多的企业和个人开始探索人工智能在各个领域中的应用.其中,在自然语言处理领域,OpenAI 的 GPT 系列模型成为了研究热点.OpenAI 公司的 Ch ...
- Alchemy Nft黑客松任务(第一周)
Alchemy是什么项目? 2019年12月,Alchemy完成1500万美元A轮融资,资方为Pantera Capital,斯坦福大学,Coinbase,三星等. 2021年4月,Alchemy以5 ...
- 四月二十八号Java基础知识
1.由于Thread类位于java.lang包中,因而程序的开头不用import导入任何包就可直接使用try{ sleep((int)(1000*Math.random()));//sleep()方法 ...
- LeeCode 二叉树问题（四）
二叉搜索树的应用问题 二叉搜索树的定义 若左子树不空,则左子树上所有节点的值均小于根节点的值 若右子树不空,则右子树上所有节点的值均大于根节点的值 它的左右子树也均为二叉搜索树 中序遍历结果为一个升序 ...
- homebrew 无法从 API 更新错误问题
今天中午吃饭前,想看看有没有更新,于是打开终端模拟器(我用的是 WezTerm),brew update,结果更新出了点问题 大致情况就是我不能从 API 更新,这个特性是从 homebrew 进入 ...
- Linx 阶段一
Linux Linux常用命令 具体演示 1). ls 2). pwd 3). touch 4). mkdir 5). rm 使用技巧 1. 连按 Tab健自动补齐文件名 2. ll 查看当前目录文件 ...
- “露天煤矿现场调研和交流案例分享”在CSDN发表，两次审核未通过，判定：全篇涉及广告
我在博客园发布了:露天煤矿现场调研和交流案例分享.后台分享到了CSDN,结果判定为:全篇涉及广告.我要是真能写出来全篇涉及广告的文章,也算我能力比较强,就算是让ChatGPT可能也写不出来吧. 这种坐 ...
- ROS动态调试PID参数
ROS动态调试PID参数 连接小车 注意:必须在同一区域网 ssh clbrobort@clbrobort 激活树莓派主板 roslaunch clbrobot bringup.launch 打开PI ...