标签：Vue 项目 插槽 Day05 js vue 标签 组件 home
动态组件
// 关键字：
component
// 使用方法：
<component :is="who"></component>
// component标签的is属性等于组件名字，这里就会显示这个组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<div>
<button @click="who='home'">首页</button>
<button @click="who='goods'">商品</button>
<button @click=who='number'>订单</button>
<hr>
<component :is="who"></component>
component标签的is属性等于组件名字，这里就会显示这个组件
</div>
</div>
</body>
<script>
var home = {
template: `
<div>
<h1>首页</h1>
</div>`,
}
let goods = {
template: `
<div>
<h1>商品</h1>
</div>`,
}
let number = {
template: `
<div>
<h1>订单</h1>
</div>`,
}
new Vue({
el: "#app1",
data: {
who: 'home'
},
methods: {},
components: {
home,
goods,
number
}
})
</script>
</html>
keep-alive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<div>
<button @click="who='home'">首页</button>
<button @click="who='goods'">商品</button>
<button @click=who='number'>订单</button>
<hr>
// Vue提供的keep-alive标签
<keep-alive>
<component :is="who"></component>
</keep-alive>
component标签的is属性等于组件名字，这里就会显示这个组件
</div>
</div>
</body>
<script>
var home = {
template: `
<div>
<h1>首页</h1>
</div>`,
}
let goods = {
template: `
<div>
<h1>商品</h1>
<p>搜索商品: <input type="text" v-model="name">
<button @click="handername">搜索</button>
</p>
</div>`,
data() {
return {
name: ""
}
},
methods: {
handername() {
alert(this.name)
}
}
}
let number = {
template: `
<div>
<h1>订单</h1>
</div>`,
}
new Vue({
el: "#app1",
data: {
who: 'home'
},
methods: {},
components: {
home,
goods,
number
}
})
</script>
</html>
插槽
// 一般情况下，编写完一个组件之后，组件的内容都是写死的，需要加数据只能去组件中修改，扩展性很差
// 然后就出现了插槽这一概念，只需要在组件中添加<slot></slot>,就可以在body的组件标签中添加内容
// 使用步骤：
//1 在组件的html的任意位置，放个标签
<slot></slot>
//2 后期在父组件使用该组件时
<lqz>
放内容
</lqz>
//3 放的内容，就会被渲染到slot标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<div>
<button @click="who='home'">首页</button>
<hr>
<keep-alive>
<component :is="who"></component>
</keep-alive>
component标签的is属性等于组件名字，这里就会显示这个组件
<hr>
<home>
<div>
我是div
</div>
</home>
<hr>
<home>
<img src="img/测试图.jpg" alt="" height="750px" width="750px">
</home>
</div>
</div>
</body>
<script>
var home = {
template: `
<div>
<h1>首页</h1>
<slot></slot>
</div>`,
}
new Vue({
el: "#app1",
data: {
who: 'home'
},
methods: {},
components: {
home,
}
})
</script>
</html>
具名插槽
1、组件中可以留多个插槽，命名
template: `
<div>
<slot name="one"></slot>
<h1>首页</h1>
<slot name="two"></slot>
</div>`
2、父组件使用时，指定某个标签渲染到某个插槽
<home>
<div slot="one">
我是具名插槽
</div>
<img src="img/测试图.jpg" alt="" height="750px" width="750px" slot="two">
</home>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="src/JS/Vue.js"></script>
<script src="src/JS/jQuery.js"></script>
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<script type="module" src="/src/main.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<div>
<button @click="who='home'">首页</button>
<hr>
<keep-alive>
<component :is="who"></component>
</keep-alive>
component标签的is属性等于组件名字，这里就会显示这个组件
<hr>
<hr>
<home>
<div slot="one">
我是具名插槽
</div>
<img src="img/测试图.jpg" alt="" height="750px" width="750px" slot="two">
</home>
</div>
</div>
</body>
<script>
var home = {
template: `
<div>
<slot name="one"></slot>
<h1>首页</h1>
<slot name="two"></slot>
</div>`,
}
new Vue({
el: "#app1",
data: {
who: 'home'
},
methods: {},
components: {
home,
}
})
</script>
</html>
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号称新一代的构建工具
步骤如下：
###安装nodejs
1 vue-cli是个软件，运行在nodejs环境中，安装nodejs
-下载地址：https://nodejs.p2hp.com/download/
-类似于python解释器，一路下一步安装---》选择安装位置---》添加到环境变量(以后再任意位置执行node或npm都会找到)
-查看node版本
node -v
-安装完，释放两个可执行文件
node 等同于 python
npm 等同于 pip
###使用cnpm替换掉npm
2 npm 安装第三方模块，速度很慢，淘宝做了个cnpm，以后咱们可以使用cnpm替代npm，会去淘宝镜像站下载，速度快
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后 使用npm安装模块的命令全都换成 cnpm
###在cmd中安装vue-cli以及创建vue项目
3 在node环境中装vue-cli （类似于装django）
cnpm install -g @vue/cli
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 之前的设置，保存与不保存都可以
![]()
![]()
![]()
![image-20230607113340472]()
使用vue-cli-ui创建
vue ui 启动出一个服务，直接在浏览器中点点击就可以创建
运行vue项目
1、npm run serve
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文件夹下的文件即可
vue项目编写规范
修改项目
App.vue
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<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 里面有三部分
# 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>
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,
项目,
插槽,
Day05,
js,
vue,
标签,
组件,
home
From： https://www.cnblogs.com/chao0308/p/17722008.html