2023年最新最全uniapp入门学习，零基础入门uniapp到实战项目，unicloud数据后台快速打造uniapp小程序项目

今天开始带着大家一起零基础学习uniapp，在下面的课程中我们就简称uniapp为uni吧。我这里从零基础开始教大家，后面可以带大家简单的做一个实战项目。所以不用担心自己没有基础，跟着石头哥认真学习就行了的。

一，认识uniapp

1-1，uniapp的好处

我们学习uniapp之前先要认识uniapp的好处

看下官网 https://uniapp.dcloud.net.cn

就可以看到，我们用编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

总结起来uniapp有以下几点好处

• 1，同一套代码可以编译运行多端（小程序，安卓，ios，web等）
• 2，节省人力和维护成本
• 3，接近原生，体验效果更好
• 4，开发效率高，开发时间更短
• 5，学习成本比较低（3-15天即可入门）
• 6，社区活跃，版本迭代快，有问题更容易在社区解决

  1-2，为什么要选择uni-app

  uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势

  

  1-3，功能框架图和多平台运行

  从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。其实说白了，就是开发一套uniapp代码，就可以在当前主流的平台上运行。大大的节省了开发成本。

  

  大家看下上图，其实就可以知道，如果没有uniapp，我们想在app，h5，小程序里运行我们的项目，那么我们至少要开发4套不同平台的代码，uni真正的好处就是我们只需要开发一套代码就可以在主流的平台上全平台运行。

  下图可以看到我们一套代码可以在多个平台运行的效果。

  

  1-4，uniapp和vue，小程序的关系

  uniapp是基于vue框架，所以如果你会vue的话，来学uniapp会很简单

  uniapp的开发规范和小程序相似，所以如果你跟着石头哥学过小程序，再来学uniapp就能很快的入门。

  当然了，如果你没有小程序或者vue基础，也没事的，只要跟着石头哥认真学习这门uniapp入门课即可。

  二，开发者工具

  所谓工欲善其事，必先利其器。我们开发uniapp肯定要有一个得心应手的开发者工具。

  

  我们开发uniapp的工具就是HBuilderX

  2-1，下载HBuilderX开发者工具

  HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下面是hbuilder官方的简介

  

  我们可以直接去官网下载HBuilderX开发者工具 官网下载地址

  进去后我们只需要点击下载即可，记得window和mac电脑要下载自己对应的版本。

  

  2-2，安装HBuilderX

  其实HBuilderX的安装很简单，我们上面下载好的安装包，解压好就可以了，解压好以后如下图。当然我这里是window电脑的安装过程，大家如果是mac电脑，可以自行安装。安装过程基本上大差小不差的。

  

  我们在解压好的文件里双击exe文件即可运行。

  

  打开后如下

  

  当然了，如果感觉每次从目录里双击exe文件打开麻烦，可以固定到任务栏或者创建快捷方式，然后把快捷方式放到桌面。

  

  也可以直接发送到桌面快捷方式

  

  一般情况下，我们第一次打开项目关闭的时候，系统会提示我们自动创建一个桌面快捷方式的。

  

  当然我比较喜欢固定到任务栏，因为以后要经常用整个开发者工具，所以怎么样打开方便就怎么来就行了。

  

  三，创建属于自己的第一个uni-app

  当然如果你有学过石头哥的小程序课程，再来学习uni就可以很快的入门的。反过来说，如果你没有小程序或者vue基础，也没事的，只要跟着石头哥认真学习即可。

  3-1,创建一个新的uniapp项目

  在点击工具栏里的文件 -> 新建 -> 项目

  

  然后在弹出的创建页面做以下配置

  

  • 1，项目名称：随便取，可以用汉字，但是尽量用英文或者拼音
  • 2，项目路径：一般保持默认即可，不过我个人比较喜欢放在桌面，这样后面找代码方便些。
  • 3，选择模板：学习期间用默认空白模板即可，后面我们学的差不多了，就可以使用官方提供的模板，进行快速开发了。
  • 4，vue版本：因为我们的uniapp是基于vue开发的，所以这里要选择vue版本，既然我们学习，就建议大家学习最新的，用vue 3这个版本就可以了
  • 5，学习期间，我们不使用uniCloud和gitCode代码托管平台，所以这两个选项不用勾选即可。所有这些设置完，就可以点击创建了。

    关于项目路径，比如我在桌面新建一个demo1空白文件夹，然后在创建项目时点击浏览，选择自己创建的demo1文件夹即可。

    

    这样我们创建的项目就会在demo1文件里，也就是我们的项目源码就存在了demo1里

    

    新创建好的项目如下

    

    可以看到我们的新项目就创建在了demo1里，到这里我们的第一个uniapp项目就创建好了。

    跟着石头哥学过微信小程序开发的同学大概可以看出来，uniapp项目其实和小程序项目很相似的。

    

    一些组件，语法也很相似，因为uniapp就是基于vue框架的，而小程序呢也是借鉴了vue。所以你学过石头哥的小程序课程，再来学uni，肯定学的很快的。当然了，即便没学过小程序，石头哥也会手把手的带着大家零基础入门uni的，只要跟着石头哥认真学习。

    

    3-2，认识uniapp项目目录结构

    我们上面一步创建好了项目，这一节我们就来认识项目。

    一个完整的uni项目的目录结构如下，我们后期随着学习的深入会逐个带大家学习，所以目前阶段，大家只需要大致知道就行，没有必要死记硬背下来。

    

    大家可以先对照着官方给出的目录结构，大致的知道我们创建的第一个项目里每个文件都是什么作用。我在配套视频讲解里，会慢慢的带着大家熟悉的。

    

    我这里先用通俗的话给大家说下我们新建项目的目录结构，方便大家理解

    • pages：所有页面存放的目录，我们目前只有一个index页面，后面再创建别的页面，比如个人中心，列表页，详情页等，都是放在这个pages文件里
    • static：静态资源目录，例如图标，图片，音视频等
    • App.vue：我们的根组件，用来配置App全局样式以及监听，所有页面的切换都是在这里进行的。
    • index.html：就是我们的uniapp使用的vue框架生成的单页面文件，有点类似我们的网页的index页。
    • main.js：项目初始化入口文件，主要用来初始化一些需要的东西
    • manifest.json ：用来指定应用名称、appid、logo、版本等打包信息，后面我们配置微信小程序，支付宝小程序等，可以在这里配置
    • pages.json ：配置页面路由、导航条、选项卡等页面类信息，决定页面文件的路径，窗口样式，导航栏，底部的tabbar等。
    • uni.scss ：这里是uni-app内置的常用样式变量，方便控制应用的整体风格，比如颜色，边框等

      官方文档也有大致的介绍的

      

      3-3，认识开发者工具

      

      我们可以在顶部的工具栏里做一些开发者的配置，比如我这里把主题设置为了酷黑色。

      

      当然了这里大家根据自己的喜好，去做一些简单的设置即可。我们后面的学习中会慢慢的用到工具栏里的东西，在视频里我慢慢的给大家做介绍。

      我们常用的开发者工具的功能还有模拟器，调试器，在下一节的。

      3-4，项目的预览

      我们项目的预览常用的有下面几个方式。为了降低大家的学习成本，我们学习阶段主要运行到内置浏览器，后面会慢慢教大家运行到小程序或者手机上。

      

      运行到浏览器就是运行到我们电脑上的浏览器

      

      运行到手机或者模拟器：就是可以运行到我们的安卓或者苹果手机上

      

      运行到小程序：就是我们开发的项目可以运行到微信，支付宝，百度小程序等。

      

      运行到内置浏览器：这是我们目前学习阶段最常用的方式，所以我们目前运行先使用内置浏览器即可。

      3-5，运行项目到内置浏览器

      

      我们点击运行到内置浏览器，第一次会提示：安装插件，我们点击确定，安装即可。然后耐心等待插件的安装即可。

      

      安装成功

      

      然后再次点击运行到内置浏览器，就可以在内置浏览器上预览我们的项目了

      

      这时候我们也多了一个调试器，调试器主要就是用来打印一些日志信息，来帮助我们调试项目，辅助修复bug。

      

      3-6，运行到微信小程序开发者工具

      我们开发好的项目不仅要运行在浏览器里，还需要运行到小程序里，所以我们这里以微信小程序为例，其他的支付宝，百度小程序等，都是一样的原理。

      如下图所示，直接点击运行–》运行到小程序模拟器–》微信开发者工具

      

      正常我们第一次运行，会弹出以下弹窗。我们要关联下开发者工具。

      

      所以要先去安装小程序开发者工具。点击上图的链接即可。然后去下载对应的版本即可。

      

      然后点击自己电脑对应系统的版本下载即可。至于安装很方便，只需要双击安装包，不停的点下一步即可，安装完成以后的官方开发者工具长这样。

      

      然后找到安装路径，如下所示。当然最好你自己记住自己安装到哪里了，这样也可以的。

      

      然后记住这个路径

      

      记住后点击下图的浏览，一步步找到上面的路径即可。

      

      点击确定，就可以编译运行到我们的小程序开发者工具了。有时候第一次运行会报如下错误。打不开小程序开发者工具。

      

      这个时候就要按照上的提示，配置下了。打开微信开发者工具 -> 设置 -> 安全设置，将服务端口开启。

      

      打开服务端口

      

      然后，先停止运行

      

      然后再重新运行到微信小程序即可。

      

      可以看到在编译启动中

      

      启动后，要在微信开发者工具里点击下信任并运行。

      

      可以看到我的uniapp项目就可以编译成微信小程序，运行起来了。

      并且会编译成微信小程序的代码。这就是uniapp的强大之处。

      我们后面运行到支付宝，抖音小程序等都是一样的流程。

      四，uniapp开发三剑客

      4-1，页面布局，样式，js逻辑

      如果大家学过石头哥的小程序入门课，肯定知道石头哥的小程序开发三剑客。其实uni开发也有自己的三剑客。

      

      其实小程序三剑客的知识点，同样适用于uniapp

      

      4-2，uniapp和小程序，传统web对比

      结构	小程序	传统web	uniapp
      结构布局	Wxml	Html	写在template里
      样式	Wxss	Css	写在style里
      逻辑	JavaScript	JavaScript	写在script里
      配置	Json	无	Json

      和小程序不同的是uniapp的页面布局，样式，逻辑都是写在同一个.vue文件里，所以我们接下来学习uniapp和小程序会有一些差别，但是大体上还是很相近的。所以不管你有没有学过石头哥的小程序课程，都不影响零基础入门uniapp。

      

      五，注释和日志打印的学习

      5-1，一些常用的快捷键

      我们在开发时为了提高代码编写效率，通常会使用一些快捷键。我们开发工具自带的快捷比较多，我这里不一一列举了，我把一些常用的快捷键拿出来给大家大致讲一讲，我这里以window电脑为例，如果你mac电脑，可以自己去看下开发者工具默认的快捷键。多看几遍把常用的记住就行了。

      快捷键组合	描述
      Ctrl+A	全选
      Ctrl+C	复制选中内容
      Ctrl+V	粘贴复制的内容
      Ctrl+D	删除当前这行的代码
      Ctrl+N	新建文件
      Ctrl+W	关闭文件
      Ctrl+Shift+W	关闭全部文件
      Ctrl+S	保存文件
      Ctrl+/	开启/关闭代码注释
      Ctrl+Shift+/	开启/关闭注释已选内容
      Ctrl + Shift +R	复制当前行到下一行
      Ctrl+F	打开搜索离材条，可以查找替换指定内容或者全部内容
      Ctrl+H	打开搜索框，可以搜所指定内容位置
      Ctrl+R	快速打开运行框
      Ctrl+Z	撤销修改，返回上一步
      Ctrl+Shift+Z	返回下一步
      Ctrl+↑	向上移动行代码
      Ctrl+↓	向下移动代码
      Alt+/	激活代码助手

      如果感觉默认的快捷键不喜欢，可以自己重新设置快捷键,这里不太建议自定义快捷键，熟记自带的常用的快捷键就可以了。

      

      有的电脑上快捷键可能会有细微差距，以开发者工具默认自带的快捷键为准。

      5-1，注释的学习

      我们在学习后面课程之前，先来学习下注释。注释是在代码里给予提示使用的，主要是让别人更快的熟悉你的代码，也方便后期自己看自己的代码，快速回忆起来使用的。 注释有快捷键的，正好我们上面一节有讲常用的快捷键。

      • window电脑：Ctrl+/
      • mac电脑：command+/

        可以看到我们常用的三种注释如下，正好和我们前面学的三剑客对应起来。

        • 布局的注释是：
        • js逻辑代码的注释是： //
        • css样式的注释是：/* */

          

          我们这里没有必要记每种注释的写法，只需要记住快捷键，可以快速生成注释即可。这就是快捷键的好处。

          5-3，日志打印的学习

          我们在开发过程中，总会遇到各种各样的问题，学会在控制台看日志，对我们来说可以帮助我们快速的定位问题，解决问题。

          我们开发过程中也会经常用到日志打印。日志打印呢，就是事先打印出来一些东西，用以验证我们的代码输出的结果是否正确。

          5-3-1，内置浏览器打印日志

          日志打印的语法如下

          console.log("我的打印出来的日志内容")
          

          

          可以看出我们在控制台日志里打印出来了我们写的日志，并且后面也告知我们这行代码写在了第16行。这样在日后的开发过程中，都可以快速的方便我们校验代码，定位问题，解决问题。

          5-3-2，外部浏览器里打印日志

          有的同学在上面内置浏览器里无法打印日志，所以这里提供一个备用方案，我们在前面运行项目章节有教大家怎么样运行到电脑浏览器。我们只需要运行项目到自己电脑浏览器即可。

          

          如我这里以运行到chrome浏览器(谷歌浏览器)为例

          

          项目运行到浏览器后，右键然后点击检查。就可以看到控制台了。

          

          我们点击Console就和内置浏览器一样，可以打印日志了。

          

          5-4，日志报错信息

          我们的代码的编写好，就可以点击运行，有时候运行会在控制台的日志报错，一般的报错如下图，基本上都是深颜色的爆红，所以一般情况下，控制台日志里出现爆红，就说明我们的代码有错误，这时候就要根据报错日志，去定位自己的代码错误了。

          我们在后面的实战课程中，会故意写一些错误代码，然后教大家如何识别错误，更改代码。

          

          

          六，小程序常见组件的学习

          uni为开发者提供了一系列的基础组件，这些组件类似于html里的基础标签元素，但是uni与html不同，和小程序更相似，更适合在移动手机端。

          如下图所示，左边是uni项目，右边是小程序项目。可以看到uni和小程序都用了view组件，所以uni和小程序还是更相似些。

          

          官方的组件如下，我们接下来就会把一些常用的组件讲给大家。当然了一些其他不常用的组件，在后面的实战课程里，如果用到也会给大家讲解下的。

          

          6-1，认识view组件

          view组件：相当于一个盒子，可以用来装一些别的组件。它类似于传统html中的div，用于包裹各种元素内容

          官方文档：https://uniapp.dcloud.net.cn/component/view.html

          如果大家有html的web基础，就可以把我们小程序里的view理解为html里的div标签。如果你没学过也无所谓，直接跟着我学习view即可。

          在代码里简单的使用：

          

          6-2，认识text组件

          text组件：主要用来显示文字的。

          

          6-3，认识input组件

          input组件主要用来获取用户输入的信息的，一般在用户填写信息，提交数据，登录注册和提交表单时会用到。

          官方文档：https://uniapp.dcloud.net.cn/component/input.html

          输入框input有很多属性，我这里把一些常用的属性带着大家学习下。其他的大家可以自己去看官方文档详细学习

          

          我们以type属性为例，我们的type属性有下面一些属性值。

          

          比如我们给input的type设置为number属性值，那么我们在输入内容的时候，只可以输入数字。

          

          6-4，认识button组件

          button 组件：是按钮组件，自带默认的按钮效果，我们后面会经常用到。

          官方文档：https://uniapp.dcloud.net.cn/component/button.html

          button按钮有很多属性，我这里把一些常用的属性带着大家学习下。其他的大家可以自己去看官方文档详细学习

          

          如我们设置的一些常用的按钮属性

          

          6-5，认识图片image组件

          image组件：主要用来显示图片，可以是本地图片，也可以是网络图片。

          官方文档：https://uniapp.dcloud.net.cn/component/image.html

          我们的image组件常用的就是src，mode，lazy-load这三个属性，所以接下来会重点给大家讲解下这三个属性。

          

          当我们不给image设置宽高时，image组件的默认宽度是320px，高度240px。

          

          6-5–1，src属性显示网络图片

          我们通过src属性来设置要显示的图片资源，图片资源有两种

          • 本地图片资源
          • 网络图片资源

            由于我们本地的图片会占用小程序软件包的大小，所以这里推荐大家尽量使用网络图片。

            

            我们设置显示图片的语法如下

            如下图，我们显示一个网络图片。

            

            这里给大家一个网络图片地址

            https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg

            如果这个地址过期了，大家可以到网上自己找图片。随便找个图片，然后右键，点击复制图片地址，就可以获取到网络图片了。

            

            

            6-5-2，src属性显示本地图片

            用image显示本地图片，我们需要提前把图片放在static，如下图我们把本地图片放在static目录里

            

            然后在image组件里设置src属性，指向这个本地图片，就可以在uniapp里展示了。

            我把网络图片和本地图片都在小程序里展示，给大家对比着学习下。

            

            6-5-3，通过mode设置图片裁剪、缩放的模式

            image组件另外一个比较重要的属性就是mode了。我们在使用图片时，不能百分之百保证图片的比例正好是我们想要的，这个时候就要用到图片的裁剪和缩放了。

            mode 的常用设置如下

            值	说明
            scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
            aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
            aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
            widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
            heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 2.10.3
            top	裁剪模式，不缩放图片，只显示图片的顶部区域
            bottom	裁剪模式，不缩放图片，只显示图片的底部区域
            center	裁剪模式，不缩放图片，只显示图片的中间区域
            left	裁剪模式，不缩放图片，只显示图片的左边区域
            right	裁剪模式，不缩放图片，只显示图片的右边区域
            top left	裁剪模式，不缩放图片，只显示图片的左上边区域
            top right	裁剪模式，不缩放图片，只显示图片的右上边区域
            bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
            bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

            也可以看官方文档

            

            比如我们有一个原图如下。

            

            设置不同的mode值，可以很明显的看出来区别

            

            后面我们需要对图片做裁剪或者伸缩处理时，就可以设置不同的mode值来实现不同的效果。

            比如我们设置mode属性为center，就可以看到我们只保留图片中间区域

            

            6-5-4，图片懒加载

            image组件是支持图片懒加载的，图片懒加载。只针对page与scroll-view下的image有效，其实就是当我们一个列表页有很多图片时，我们可以使用懒加载，来加快页面加载速度。使用懒加载时，我们只需要给image设置lazy-load就可以了。

            

            七，数据绑定，函数，事件

            7-1，数据绑定

            7-1-2，组件外的数据绑定(文本插值)

            我们在页面布局里写数据，一般情况下可以直接写，比如下面我们可以用10个text里显示10个编程小石头，假设我们有一个这样的需求，需要把编程小石头给为石头哥。如果我们每个都改一遍，是不是要改10遍，这样就导致效率低下了。

            

            所以我们这里可以用数据动态绑定来提升效率。

            数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值，就是用{{}}包裹你的值，然后这个值就可以动态的显示了，比如我用 {{name}} 然后给这个name设置值为：编程小石头，如下，可以看到我们和上面写10遍编程小石头是一样的。

            

            我们想把编程小石头改为石头哥，就只需要改name的值就行了。如下所示。

            

            这样我们就明白用数据绑定的好处，其实我们后面的开发中，除了那种死的不会变的直接写死外，其他的后面可能需要改变的最好都用数据绑定。

            关于数据绑定的语法需要大家记住，一定要多练，因为后面会经常用的。

            就是在页面布局需要显示数据的地方用 {{数据名}}

            然后在js的data里设置数据值，如下：

            

            这里其实使用了vue的数据绑定，而vue官方又叫这种数据绑定为文本插值。其实就是把数据动态的绑定到我们组件外。

            

            7-1-2，组件内的数据绑定(v-bind属性绑定)

            我们上面一节学习的文本插值式的数据绑定，那是把我们的数据动态的绑定到组件外。

            如果我们想动态的绑定组件内的属性数据呢。比如我们的image图片组件的src属性，我们的图片链接不想写死，想动态的去替换。这个时候就可以用v-bind 动态地绑定属性了

            v-bind也可以缩写为‘ : ’，可以用于响应式地更新

            

            可以看到我们使用v-bind或者缩写的 ： 都可以动态的把url数据绑定到image的src属性上。

            这里要注意文本插值和属性绑定是有区别的

            • 文本插值绑定数据，需要用{{}}
            • v-bind属性绑定，不需要{{}}

              

              7-2，绑定数据的读取

              我们上面通过{{}}绑定数据到data里，我们绑定的数据有时候也需要用，而使用绑定的数据，可以通过this.数据名来使用

              

              可以看到我们通过this.name就可以获取name绑定的数据。

              7-3，函数的学习

              函数的两种使用方式如下图：

              

              我们的函数一般是写在js逻辑区域的methods里，比如我们定义一个getname函数，有下面两种写法。

              

              石头哥这里推荐第一种方式定义函数，这也更简单。

              7-4，点击事件的学习

              接下来我们学习事件，我们常用的事件如下，这里我们先重点讲解下@click点击事件和

              @input获取输入值的事件

              

              我们如果想给一个组件定义点击事件，就要用到uni的事件处理，由于uni是基于vue语法的额，所以我们给uni里的组件定义点击事件，就要用到vue的语法。

              我们给一个组件绑定点击事件的语法如下：

              我们可以使用 v-on 指令来监听点击事件，从而执行 JavaScript 代码。

              v-on 指令可以缩写为 @ 符号。

              语法格式：

              v-on:click="methodName"
              或
              @click="methodName"
              

              methodName就是函数名，如下所示

              

              可以看出我们使用v-on和@都可以定义点击事件，我这里推荐大家用@简写的方式

              7-5，获取用户输入信息

              获取input输入框里用户输入的内容有两种方式

              • @input结合函数
              • v-model数据绑定获取输入内容(推荐)

                7-5-1，@input结合函数获取输入内容

                我们获取用户输入会用到@input事件，其实我们在学习input组件时，官方有给出这个属性的。

                

                看官方的文档，可以知道@input主要是为了获取用户的输入内容。

                @input的定义如下图，其中的getname就是我们定义的函数，用来接收用户输入的。

                

                在布局里定义好bindinput事件以后，在js页面再定义一个和事件名一样的函数即可。

                

                然后就可以监听用户输入了

                

                视频里会作详细讲解。如果你有买老师的课程，或者购买老师的年卡，可以获取对应的学习视频。

                7-5-2，v-model双向绑定数据获取输入内容

                • v-model是什么

                  v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

                • 为什么使用v-model

                  v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。

                • v-model的原理简单描述

                  v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化

                  具体的语法如下：

                  

                  这样当我们用户输入内容后，输入的内容就可以绑定到name上，后面直接使用就行了。

                  下面来对比下@input和v-model的代码

                  可以发现v-model比着@input，很明显的节省了一步定义函数getname，所以这里推荐大家使用v-model来获取input输入内容。

                  另外，v-model 还可以用于各种不同类型的输入数据的获取，用于在表单类元素(单选、多选、下拉选择、输入框等)上双向绑定数据，后面学习中用到我会再做具体讲解。

                  八，变量的学习

                  8-1，什么是变量

                  用大白话讲：变量就是一个装东西的盒子

                  再通俗些讲：变量就是用于存放数据的容器，我们通过变量名获取对应的数据。

                  

                  如上图所示，我们的盒子(变量)可以装名字，布尔类型的true，还可以用来装数字。

                  变量的本质：就是在程序的内存中申请一块用来存放数据的空间。

                  8-2，变量的组成

                  变量由变量名和存储的值组成，语法如下

                  var x = 7;
                  var y = 8;
                  var z = x + y; 
                  从上例中，您可知道x,y,z是三个不同的变量名：
                  x 存储值 7
                  y 存储值 8
                  z 存储值 15
                  

                  变量有点类似我们的酒店房间。一个房间就可以看作是一个变量。例如我们的808号房间是情侣间。那么808这个房号就相当于我们的变量名，情侣间就是这个变量存储的值。

                  8-3，变量的使用

                  变量在使用时分两个步骤：

                  • 1，声明变量

                    来看下具体代码

                    //声明变量
                    var age 
                    

                    这段代码的意思是声明一个叫age的变量

                    var是一个JavaScript关键字，用来声明变量，使用该关键字声明变量以后，计算机会自动为变量分配一个内存空间，用来存储数据。

                    age就是我们的变量名，我们要通过变量名来访问到计算机内存里分配的空间。

                    • 2，赋值

                      还是拿我们的酒店房间来举例，声明变量就相当于在前台办理入住，确定要住那个房间，也就是确定房间号(变量名)，然后确定房间号对应的房型，比如单人间，双人间，情侣间。而确定房型就相当于是给变量赋值。

                      //给age赋值
                      age=10
                      

                      这段代码的意思，就是给age变量赋值为10

                      上面的 = 用来把右边的值赋给左边的变量名，也就是把我们的变量名age指向数值10，就可以用age来操作我们的数值了。赋值的目的就是为了后面使用数值。

                      8-4，变量的初始化

                      我们上面变量的使用可以直接写到一行

                      var age=10 
                      

                      声明变量同时给变量赋值，我们称之为变量的初始化。

                      8-5，变量的重新赋值

                      一个变量可以被重新赋值，新的赋值会覆盖掉前面的赋值，变量值将以最后一次赋的值为准。

                      var age=10
                      age=18
                      

                      如上面的代码，我们的变量age先被赋值10，后又被赋值18，那么最后我们的age就是18

                      这就好比，酒店的房间，808屋一开始住的是石头哥，后面石头哥走了，刘德华住进去了，那这个时候你再去808找人，找到的就是刘德华了。

                      8-6.变量的命名规范

                      • 名称可包含字母、数字、下划线和美元符号
                      • 名称必须以字母开头
                      • 名称对大小写敏感（y 和 Y 是不同的变量）
                      • 不能是关键字，保留字（比如 JavaScript 的关键词）
                      • 遵守驼峰命名法，首字母小写，后面的单词的首字母大写。如userName

                        

                        8-7,变量的小案例

                        还记得我们的7-5这节学习了如何获取用户输入的信息吗？我们是不是可以用变量来存储我们获取到的用户输入信息呢。

                        

                        讲解视频里会做详细讲解

                        8-8，全局变量和局部变量

                        局部变量：变量在函数内声明，只能在函数内部访问。

                        全局变量：变量在函数外定义，整个代码都可以调用的变量。

                        

                        下面是我们小程序里的全局变量和局部变量。

                        

                        如上图所示的局部变量和全局变量的定义。

                        九，数据类型

                        9-1，认识数据类型

                        上一节变量的学习，我们知道变量是用来装数据的盒子，可是数据有很多，有各种各样的类型。不同类型的数据占用的计算器内存也不一样。就好比胖子睡大床，瘦子睡小床就行。

                        在计算机中不同的数据占用的存储空间是不同的，为了便于区分，充分利用存储空间，于是就定义了不同的数据类型。

                        简单来说，数据类型就是数据的类别型号，比如“张三”是个人名，18是个数字

                        9-2，常见的数据类型

                        我们的数据类型可以分成下面两大类

                        • 简单数据类型(Number String Boolean Undefined Null)
                        • 复杂数据类型(Object)

                          简单数据类型

                          简单数据类型	描述	默认值
                          Number	数字型，包含整数和小数，如 18，18.8	0
                          String	字符串型，如“小石头”。注意js里字符串都要带引号	“”
                          Boolean	布尔值类型，就true和false两个值，代表正确和错误	false
                          Undefined	Undefined 这个值表示变量不含有值,如var a;声明了变量a，但是没有赋值，就是undefined	undefined
                          Null	空值，如var a=null,声明了变量a为空值	null

                          9-3，数字型Number

                          js数字类型的数据，既可以是整数，也可以是小数(浮点数)

                          var age=21	//整数
                          var PI=3.1415	//小数
                          

                          9-4，字符串String

                          用引号或者双引号包起来的都是字符串类型，如 “编程小石头”，‘石头哥’都是字符串。字符串和羊肉串有点像，羊肉串是用竹签把羊肉一串串的串起来。字符串就是把字符串起来。

                          var name="编程小石头"	//字符串
                          var age1="18"		//字符串
                          var age2=18		//数字型
                          

                          上面代码的age1和age2是有区别的，age1的18被双引号包裹着，所以是字符串，age2就是一个数字18，所以是数字型。这也进一步说明了，只要是被单引号或者双引号包裹着的都是字符串类型。

                          字符串长度

                          字符串是由若干字符组成的，这些字符的数量就是字符串的长度，通过字符串的length属性可以获取整个字符串的长度。

                          还是拿羊肉串来类比，比如你一个羊肉串上串了5块羊肉，那么这个羊肉串的长度就是5。

                          使用的语法如下

                              var name="编程小石头"
                              console.log(name.length)	//这里的输出结果是5
                          

                          字符串的拼接

                          多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串+字符串=拼接之后的新字符串。

                          语法如下：

                              var name="编程小石头"
                              var weixin=2501902696
                              var test=name+weixin
                              console.log(test) //输出结果："编程小石头2501902696"
                              console.log(12+12)//输出结果：24
                              console.log("12"+12)//输出结果：1212
                          

                          上面的12+12=24，“12”+12=“1212” 这就告诉我们字符串加任何类型的数据，拼接后的结果都是字符串。

                          9-5，布尔型Boolean

                          布尔类型有两个值：true和false，其中true表示真，false表示假。

                          var flag=true
                          

                          9-6,Undefined和Null

                          一个声明后没有赋值的变量会有一个默认值 undefined

                          一个声明变量，并且赋值null，就代表这个变量是空值(学习object对象时，我们会继续研究null)

                          null 和 undefined 的值相等，但类型不同，下面的8-7会有代码演示

                          9-7，typeof 操作符

                          typeof 操作符用来检测变量的数据类型

                          typeof "John"                // 返回 string 
                          typeof 3.14                  // 返回 number
                          typeof false                 // 返回 boolean
                          

                          打印null和undefined的数据类型如下

                              var aaa=undefined
                              var bbb=null
                              console.log(aaa==bbb)//输出结果：true
                              console.log(typeof aaa)//输出结果：undefined
                              console.log(typeof bbb)//输出结果：object
                          

                          注意：这里的 == 用来判断值是否相等，后面会讲。

                          上面的代码可以看出：null 和 undefined 的值相等，但类型不同

                          9-8， 数据类型的转换

                          就是把一种数据类型的变量转换成另外一种数据类型，比如把字符串的 “18”转换为数字类型的18

                          常用的数据类型转换

                          • 把其他类型转为字符串型
                          • 把其他类型转为数字型

                            转换为字符串

                            方式	说明	案例
                            toString()	转为字符串	var num=1 num.toString()
                            String()	转为字符串	var num=1 String(num)
                            用加号拼接字符串	转为字符串	var num=1 “”+num

                            转换为数字型（重点）

                            方式	说明	案例
                            Number()	将字符串转换为数字	Number(“3.14”) // 返回 3.14
                            parseFloat()	解析一个字符串并返回一个浮点数	parseFloat(“3.12”) //返回3.12
                            parseInt()	解析一个字符串并返回一个整数	parseInt(“3.12”) //返回3

                            转为数字的几个特殊情况

                            console.log(Number(""))//空字符串转换为 0
                            console.log(Number(true))//true转换为1
                            console.log(Number(false))//false转换为0
                            console.log(Number("编程小石头"))//其他的字符串会转换为 NaN (不是个数字)
                            

                            十，运算符

                            运算符也被称为操作符，是用于实现赋值，比较和运算等功能的符号。

                            10-1，算数运算符

                            运算符	描述	例子	x 运算结果

                            • |加法| x=5+2 |7
                              • |减法| x=5-2 |3
                                • |乘法|x=5*2| 10

                                  / |除法| x=5/2 |2.5

                                  %|取模（余数）| x=5%2| 1

                                  10-2，表达式和返回值

                                  表达式：是由数字，运算符，变量等以能求得结果的有意义的操作组成的式子。

                                  表达式最终都会有一个结果返回给我们，这个返回结果我们称之为返回值

                                  • 如 let x=1+1

                                    这里的1+1就是由数字和加号组成的表达式，然会返回结果2赋值给x，那么x的值就是2。通俗的讲就是先把右边的表达式计算完毕然后把值返回给左边的x。

                                    10-3，比较运算符

                                    比较运算符是两个数据进行比较时所使用的运算符，比较运算以后会返回一个布尔值的结果，就是返回对或者错(true或false)

                                    运算符	描述	案例	结果
                                    =2|false