標簽:nta load initial cti xib 之間 one 程序 nload
MVC模式
1. model:模型层,数据的增删改查
2. view:视图层,前端页面
3. controller:控制层,处理业务
文件頁面結構
1. 页面以`.vue`结尾
2. `template`,`script`,`style`三个标签,一个页面只能存在一个
3. 代码段分析如下所示:
<script> //vm(view-model):協調者調度器 export default { // model 所有的数据 data() { return { title: ‘Hello‘ } }, onLoad() { }, // 所有自定義的方法函數都寫在這裏 methods: { } } </script>
v-if與v-show的區別
前者在DOM中被移除,後者display:none
在不同端進行編譯
<template> <view> <!-- #ifdef H5 --> <view>只在H5編譯</view> <!-- #endif --> <!-- #ifdef APP-PLUS --> <view>只在ios/安卓編譯</view> <!-- #endif --> <!-- #ifdef MP --> <view>只在小程序編譯</view> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <view>只在微信小程序編譯</view> <!-- #endif --> <!-- #ifndef MP --> <view>不在小程序編譯</view> <!-- #endif --> <view class="color"></view> </view> </template> <script> export default { data() { return { } }, onLoad(){ // #ifdef H5 console.log("只在H5編譯"); // #endif // #ifdef APP-PLUS console.log("只在ios/安卓編譯"); // #endif // #ifdef MP console.log("只在小程序編譯"); // #endif // #ifdef MP-WEIXIN console.log("只在微信小程序編譯"); // #endif }, methods: { } } </script> <style> .color{ /* #ifdef H5 */ background-color: #008000; /* #endif */ /* #ifdef MP-WEIXIN */ background-color: #007AFF; /* #endif */ width: 250upx; height: 250upx; } </style>
flex布局
1. flexible box:弹性盒状布局
2. 容器控制内部元素的布局定位
3. 伸缩元素,自由填充,自适应
布局優勢
- 可在不同方向排列元素
- 控制元素排序的方向
- 控制元素的对齐方式
- 控制元素之間的差距
- 控制单个元素放大与缩放比例、占比、对齐方式
flex布局常用術語
1. flex contaier:flex容器
2. flex item: flex项目(元素)
3. flex direction: 布局方向
flex容器的屬性
1. flex-direction:设置元素的排列方向
標簽:nta load initial cti xib 之間 one 程序 nload
原文地址:https://www.cnblogs.com/leoych/p/14893131.html