前端学习（1717）：前端系列javascript之基础组件应用

index.vue

<template>
	<!-- <view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view> -->
	<view>
	<view class="box" hover-class="hoverclass">
		测试文字1
	</view>
	<view class="box" hover-class="hoverclass">
		测试文字2
	</view>
	<text>测试文字3</text>
	<text>测试文字4</text>
	<view class="image-box">
		<image src="../../static/logo.png" mode="aspectFit"></image>
	</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.box{
		border:1px solid red;
	}
	.hoverclass{
		background:#007AFF ;
	}
	.image-box{
		width: 100px;
		height: 100px;
	}
</style>

运行结果