1.框架基础目录
1.MVC与MVVM思想
2.项目结构与文件类型
3.全局标题与页面标题
4.全局样式与页面样式
5.App的生命周期
6.页面的生命周期
7.数据绑定与事件
8.组件中的动态与静态变量
9.条件判断与for循环
10.多端兼容条件编译
1.MVC与MVVM思想
MVC模式
1.M:Model-模型层：实现数据的增删改查
2.V:view-视图层：前端页面（Html+CSS+Javascript）
3.C:controller-控制层：处理业务
MVVM模式
通过代码阐述MVVM和双向数据绑定
打开上一节新建的HelloWorld项目
打开页面文件index.vue(pages/index/index.vue，所有的页面文件都是以.vue结尾的，而不是html）
<template>标签放html代码
<script>里面写JavaScript代码
<style>里面写样式代码
以上三个标签，在一个.vue页面文件中只能去写一个。
<view>相当于html中的<div>起到一个代码盒子的作用，无执行意义
其中<template>里的就是页面，相当于View，export default{}相当于VM，data(){return{}}相当于Model
:绑定数据，@绑定方法
将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 class=""> <input type="text" :value="title" @input="change" /> </view> <view class=""> {{student.age}} </view> <view class=""> {{skill[0]}},{{skill[1]}},{{skill[2]}},{{skill[3]}},{{skill[4]}},{{skill[5]}} </view> </view> </template> <script> export default { data() { return { title: 'Hello World', student:{age:18}, skill:['python','java','go','html','css','javacript'] } }, onLoad() { }, methods: { change(e){ var txtTitle=e.detail.value; this.title=txtTitle } } } </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>
运行后，在浏览器内：
2.页面路由和标题
在pages.json文件中进行配置
“pages”:[]数组中 ，配置每一个页面的信息，第一个是默认的首页。
"globalStyle": {}对象中，配置全局的信息。
私有页面标题会覆盖全局页面标题"navigationBarTitleText"
上拉刷新和下拉刷新，都在这里配置。
3.项目配置文件
App.vue内，可以配置公共样式，会被私有页面的样式覆盖
main.js内，可以配置全局变量
manifest.json内，可以配置项目版本号等相关配置
4.生命周期
1.应用的生命周期
onLaunch，初始化完成全局只触发一次
onShow/onHide 从后台到前台，从前台到后台，最小化等，都会触发的
还有nvue接收到数据触发，在通讯类app内才用得到。
2.页面的生命周期
onLoad/onUnload加载/关闭页面触发
onShow/onHide从后台到前台，从前台到后台，跟整个应用的一样，不同页面也可以定义自己的。
onPullDownRefresh下拉刷新
onReachBottom页面上拉触底事件
跳转演示
在pages目录下新建页面hello
在pages.json会自动生成配置代码
在hello.vue内：
<template> <view> <navigator url="../index/index"> <view class="" style=" 100rpx;height: 100rpx;background-color: #007AFF;"> </view> </navigator> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style> </style>
在index.vue中：
<template> <view class="content"> <navigator url="../hello/hello"> <image class="logo" src="/static/logo.png"></image> </navigator> <view class="text-area"> <text class="title">{{title}}</text> </view> <view class=""> <input type="text" :value="title" @input="change" /> </view> <view class=""> {{student.age}} </view> <view class=""> {{skill[0]}},{{skill[1]}},{{skill[2]}},{{skill[3]}},{{skill[4]}},{{skill[5]}} </view> </view> </template> <script> export default { data() { return { title: 'Hello World', student:{age:18}, skill:['python','java','go','html','css','javacript'] } }, onLoad() { }, methods: { change(e){ var txtTitle=e.detail.value; this.title=txtTitle } } } </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>
运行后可以演示页面跳转。
5.固定像素px和响应式像素upx
移动端样式中，用upx会自动适应不同屏幕的大小，每个屏幕的宽度都是750upx，对view样式的设定用upx。
但是在使用字体大小和边框宽度时，应该使用固定像素px。
6.在页面里使用{{}}表达式
在index.vue中：
<view class="">{{student.age+1}}</view> <view class="">{{student.age+"1"}}</view> <view class="">{{student.age>=18?'成年':'未成年'}}</view>
7.数据绑定与事件
标签外部的动态数据绑定{{}}
标签内部的动态数据绑定v-bind: 等价于:
改写index.vue中的路由和图片地址：
<template> <view class="content"> <navigator :url="url"> <image class="logo" :src="image"></image> </navigator> <view class="text-area"> <text class="title">{{title}}</text> </view> <view class=""> <input type="text" :value="title" @input="change" /> </view> <view class=""> {{student.age+1}} </view> <view class=""> {{student.age+"1"}} </view> <view class=""> {{student.age>=18?'成年':'未成年'}} </view> <view class=""> {{skill[0]}},{{skill[1]}},{{skill[2]}},{{skill[3]}},{{skill[4]}},{{skill[5]}} </view> </view> </template> <script> export default { data() { return { title: 'Hello World', student:{age:18}, skill:['python','java','go','html','css','javacript'], image:'/static/logo.png', url:'../hello/hello' } }, onLoad() { }, methods: { change(e){ var txtTitle=e.detail.value; this.title=txtTitle } } } </script>
在pages下新建一个页面用来演示事件events，为了方便演示，将pages.json中关于页面events的配置放到pages数组首位。
event.vue：
<template> <view> <input type="text" style="background-color: #8F8F94;height: 100upx;" @input="change" @focus="focus" @blur="blur" @confirm="confirm" @click="click" @tap="tap" @longpress="longpress" /> <!-- @longtap="longtap" --> </view> </template> <script> export default { data() { return { } }, methods: { change(){ console.log('内容改变') }, focus(){ console.log('获得焦点') }, blur(){ console.log('失去焦点') }, confirm(){ console.log('手机端的完成键，相当于pc端的回车键') }, click(){ console.log('组件被单击') }, tap(){ console.log('组件被触摸') }, //click在网页端会被tap覆盖，在手机端都会触发，推荐只使用tap即可。 longpress(){ console.log('长按，按住组件超过350毫秒') }, // longtap(){ // console.log('长按，不推荐使用了') // }, } } </script> <style> </style>
更多事件，查看官方文档。
8.条件渲染
v-if与-v-show
新建vif页面，为了方便展示，在pages.json中，将关于页面vif的配置放到第一位。
vif.vue：
<template> <view> <!-- v-if会在dom中被移除，v-showdisplay:none 更多的使用vif--> <view v-if="isShow"> 可见 </view> <view v-else> 不可见 </view> <view v-show="isShow"> 可见 </view> <!-- 三元运算符 --> <view v-if="sex==1? true : false"> 男1 </view> <view v-else> 女1 </view> <!-- v-else-if --> <view v-if="sex==1"> 男2 </view> <view v-else-if="sex==0"> 女2 </view> <view v-else> 不可知2 </view> </view> </template> <script> export default { data() { return { isShow:false, sex:3 } }, methods: { } } </script> <style> </style>
9.列表渲染
新建页面vfor，并且在pages.json中配置，让vfor做首页
vfor.vue：
<template> <view > <view v-for="(obj,index) in studentArray" :key=index> <view> 姓名：{{obj.name}}年龄：{{obj.age}} <view> 擅长技能： <!-- 换行 --> <!-- <view v-for="sk in obj.skill"> {{sk}}, </view> --> <block v-for="(sk,skindex) in obj.skill" :key="skindex"><!-- 嵌套索引不能使用相同名的key --> {{sk}}, </block> </view> </view> </view> </view> </template> <script> export default { data() { return { studentArray:[ {name:"jack",skill:['python','java','go'],age:18}, {name:"steve",skill:['html','css','javacript'],age:20}, {name:"bob",skill:['java','go','html'],age:19}, {name:"amy",skill:['go','html','css','javacript'],age:22}, {name:"blues",skill:['html','css','javacript'],age:23} ] } }, methods: { } } </script> <style> </style>
10.条件编译
在代码中加入标签，让代码在不同平台下，做不同的编译，参考官方文档。