5.1.1 Vue页面介绍

一个Vue页面主要由3块代码构成：

n  布局代码

<template>和</template>之间的代码

n  脚本逻辑代码

<script>和</script>之间的代码

n  样式代码

<style>和</style>之间的代码

下面我们看1个完整的Vue页面代码，效果如图

完整代码如下：

<!--代码块1：布局 开始-->

<template>

<view>

     这里填写布局的代码，类似我们web开发中的html代码

</view>

</template>

<!--代码块1：布局 结束-->

<!--代码块2：脚本逻辑处理 开始-->

<script>

     //script脚本，和我们web开发中的JavaScript处理类似

     //我们vue页面中的使用Vue.js的语法

     export default {

             data() {

                      return {

                      }

             },

             methods: {

             }

     }

</script>

<!--代码块2：脚本逻辑处理 结束-->

<!--代码块3：样式 开始-->

<style>

/*样式的定义，沿用web开发中的CSS语法，在加入了uni-app的自定义语法*/

.neirong{

     padding: 10px; /*内边距*/

     color: #DD524D;

}

</style>

<!--代码块3：样式 结束-->

【uniapp参考资料】

（1）uni-app跨平台开发 入门到实战 

https://ke.qq.com/course/package/26512

（2）uni-app 完整商城界面设计实战  

https://ke.qq.com/course/2381059

（3）基于vue的uniapp商城完整项目源代码 

https://ke.qq.com/course/3064977

（4）毕业设计网

http://www.pc-365.net

（5）小程序编程网

http://www.4317.org

（6）计算机编程网

http://www.05423.com