组件的基本使用（二）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件的基本使用</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<ntitle></ntitle>
			<ntitle></ntitle>
			<ntitle></ntitle>
			<ntitle></ntitle>
		</div>
		
		<div id="box1">
			<ntitle></ntitle>
		</div>
		<script>
			Vue.config.productionTip = false;
			
			//通过组件的形式调用，创建标题
			//1、创建组件
			const ntitle = Vue.extend({
				template:`
					<div>
						<h1>{{title}}</h1>
						<h3>编辑：{{name}}</h3>
					</div>
				`,
				data(){
					return {
						title:'科学家研究表明，不吃饭会饿。',
						name:'张三'
					}
				}
			})
			//全局组件注册
			//Vue.component('ntitle',ntitle);
			
			const vm = new Vue({
				el:'#box',
				components:{
					ntitle
				}
			})
			
			const vm1 = new Vue({
				el:'#box1'
			})
		</script>
	</body>
</html>

组件的嵌套

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件的嵌套</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<refrigerator></refrigerator>
			<br>
			<br>
			<refrigerator></refrigerator>
		</div>

		<script>
			Vue.config.productionTip = false;
			
			//通过组件的形式调用，创建标题
			//1、创建组件
			const elephant = Vue.extend({
				template:`
					<div>
						<h1>{{name}}</h1>
						<h3>体重：{{weight}}</h3>
					</div>
				`,
				data(){
					return {
						name:'大象',
						weight:'3t'
					}
				}
			})
			
			const refrigerator = Vue.extend({
				template:`
					<div>
						<h1>{{name}}</h1>
						<elephant></elephant>
					</div>
				`,
				data(){
					return {
						name:'海尔冰箱'
					}
				},
				components:{//在冰箱里面局部注册大象
					elephant
				}
			});
			
			
			
			//局部组件注册只能在当前vm里面实现，全局可以在多个vm里实现。
			//全局组件注册
			//Vue.component('ntitle',ntitle);
			
			const vm = new Vue({
				el:'#box',
				components:{//在冰箱里面局部注册大象
					refrigerator
				}
			})
		</script>
	</body>
</html>

家具网站组件化

<!DOCTYPE html>
<html>
	<!-- head给浏览器看的 -->
	<head>
		<meta charset="utf-8">
		<title>某某家具网站</title>
		<style>
			*{margin: 0;padding: 0;}
			/* 第一屏布局的开始 */
			.banner{
				width: 100%;
				height: 900px;
				background: url(images/slider1.jpg) no-repeat;
				background-size: 100% 93%;
			}
			.banner-con{
				width: 60%;
				height: 800px;
				/* 上下外边距为0 左右外边距自适应; */
				margin: 0 auto;
			}
			.banner-con-nav{
				width: 100%;
				height: 80px;
			}
			/* banner-con-nav 下面的子标签 */
			.banner-con-nav > img{
				margin-top: 35px;
			}
			.banner-con-nav > ul{
				list-style: none;
				float: right;
			}
			.banner-con-nav > ul > li{
				float: left;
				margin-left: 50px;
				margin-top: 44px;
				color: #FFFFFF;
			}
			
			
			.banner-con-intr{
				width: 90%;
				height: 160px;
				margin-top: 70px;
				padding: 80px 5%;
			}
			.banner-con-intr > span{
				color: #C6C6C6;
			}
			.banner-con-intr > h1{
				font-size: 60px;
				margin-top: 5px;
				color: #FFFFFF;
			}
			.banner-con-intr > p{
				line-height: 25px;
				width: 60%;
				font-size: 4px;
				color: #beb5a5;
				margin-top: 20px;
			}
			
			.banner-con-buy{
				width: 100%;
				height: 60px;
				margin-top: 40px;
			}
			.banner-con-buy > div{
				width: 220px;
				height: 50px;
				padding: 5px;
				text-align: center;
				border-radius: 30px;
				margin-left: 5%;
				line-height: 50px;
				font-size: 25px;
				background-color: #ffa800;
			}
			.banner-con-buy img{
				display: block;
				margin-left: 170px;
				margin-top: -48px;
			}
			
			
			.banner-con-img{
				width: 100%;
				height: 110px;
				margin-top: 220px;
			}
			.banner-con-img > img{
				height: 110px;
				display: block;
				float: left;
				/* 鼠标变手 */
				cursor: pointer;
			}
			.banner-con-img img:nth-child(1){
				height: 100px;
				border: #ffa800 5px solid;
			}
			/* 第一屏布局的结束 */
		</style>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<!-- body是给用户看的 -->
	<!--
	布局的三步
	一、包裹所有内容
	二、包裹文字/图片内容
	三、文字/图片摆放位置的调整 
	-->
	<body>
		<!-- 第一屏的开始 -->
		<div class="banner" id="banner">
			<div class="banner-con">
				<mytltle></mytltle>
				<div class="banner-con-intr">
					<span>某某家具给你最舒适的体验</span>
					<h1>秋季温暖好物</h1>
					<p>
						A young and vigorous hrand, to improve the office environment,give the work of higher value as its own reponsibility We are determined to create an efficient and comfortable office 
						A young and vigorous hrand, to improve the office environment,give the work
					</p>
				</div>
				<div class="banner-con-buy">
					<div>
						立即购买
						<img src="images/icon-btn-arrow.png" >
					</div>
				</div>
				<mytltle></mytltle>
				<div class="banner-con-img">
					<img src="images/slider1-small.png" >
					<img src="images/slider2-small.png" >
					<img src="images/slider3-small.png" >
				</div>
			</div>
		</div>
		<!-- 第一屏的结束 -->
		<script>
			const mytltle = Vue.extend({
				template:`
					<div class="banner-con-nav">
						<img :src="logo">
						<ul>
							<li v-for="name in titleli">
								{{name}}
							</li>
							<li><img :src="icon" ></li>
						</ul>
					</div>
				`,
				data(){
					return {
						logo:'images/logo.png',
						icon:'images/icon-cart.png',
						titleli:[
							'首页','全部产品','软装配饰','配饰参考','会员账户','关于我们','地图导航'
						]
					}
				}
			})
		
		
			const vm = new Vue({
				el:'#banner',
				components:{
					mytltle
				}
			})
		</script>
	</body>
	

</html>

单文件组件

School.vue

<!-- 放模板代码 -->
<template>
	<div>
		<h1>{{schoolName}}</h1>
	</div>
</template>

<!-- vue的脚本语言 -->
<script>
	/* ES6语法 定义输出接口 export */
	export default{
		name:'School',
		data(){
			return {
				schoolName:'希望小学'
			}
		}
	}
</script>

<!-- 样式 -->
<style>
</style>

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单文件组件</title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<!-- 容器 -->
		<div id="root">
			<School></School>
		</div>
		<!-- 入口文件 -->
		<script src="main.js"></script>
	</body>
</html>

main.js

//引入
import School from "School.vue"

new Vue({
	el:'#root',
	components:{
		School//注册组件
	}
})

 

Vue脚手架 Vue Cli (安装 | Vue CLI (vuejs.org))

1、如果下载慢 换淘宝镜像

npm config set registry " https://registry.npm.taobao.org "

2、下载cli

npm install -g @vue/cli

3、验证

vue --version

异常解决

npm install -g @vue/cli-init

创建项目

vue init webpack hellovue

 

  • Project name 项目名称
  • Project description 项目描述
  • Author 作者
  • Vue build vue的构造工具 直接回车
  • Install vue-router? vue的路由
  • Use ESLint to lint your code? No  vue的代码检测工具
  • Set up unit tests No 单元测试工具
  • Setup e2e tests with Nightwatch? No 端到端测试工具

项目结构

  • build 构建脚本目录
  • config 项目配置目录
  • node_modules 项目的依赖模块
  • src 开发目录
  • static 静态资源目录（放图片或字体）
  • index.html 入口文件
  • package.json 包配置文件（依赖包等信息）
  • README.md 项目说明文档
     
最后修改于 2021-09-26 16:53:53
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇