
<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
            //上面的title绑定在script
		</view>
	</view>
</template>
<script>
	export default {
		//提供的模板类
		data() {
			return {
				title: 'Hello 计算机学院'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

template模版内包含基本所有的类似HTML标签，view是一个视图组件，相当于vue里的div

下方的script写的是所有的JavaScript样式

所有的每一个单个页面里面template（相当于view)，script(协调者，调度器）里的model:所有的数据在return里面写，style这三个标签只能去写一个

template:View
Script:VM:协调者，调度器
title是写在script里的data里的
data :Model:所有的数据
在data中写好后，就可以通过VM 渲染

所有的自定义方法必须写到methods里面

数据的双向绑定贯穿开发的过程

 <template>
     <view class="content">
         <image class="logo" src="/static/logo.png"></image>
         <view class="text-area">
             <text class="title">{{title}}</text>
             <input type="text" :value="title" @input="change"/>
             <!-- :的作用是使之与后面关联title -->
         </view>
     </view>
 </template>
 
 <script>
     export default {
         //提供的模板类//上面的title绑定在script
         data() {
             return {
                 title: 'Hello 计算机学院'
             }
         },
         onLoad() {
 
         },
         methods: {
             change(e){
                 var txtTitle = e.detail.value;
                 // value后面不需要括号
                 this.title = txtTitle;
                  // debugger;
                  // 断点
             }
 
         }
     }
 </script>
 
 <style>
     .content {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
     }
 
     .logo {
         height: 200rpx;
         width: 200rpx;
         margin-top: 200rpx;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 50rpx;
     }
 
     .text-area {
         display: flex;
         justify-content: center;
     }
 
     .title {
         font-size: 36rpx;
         color: #8f8f94;
     }
 </style>

前端 | 青训营

框架基础

MVC与MVVM思想

MVC模式

MVVM模式

项目结构和文件类型