uikit前端框架教程

呃，我们先打开那个项目，这个是啊，之前那个讲啊 v u e 的那个项目，然后这边有版本更新，我们更新一下这个版本开发工具的版本， 进来的朋友可以给关注， 也可以关注一下。呃，马叔的微信公众号就是马叔， 搜一下，马叔教你录代码，微信公众号或者是视频号都可以搜到。 我们等一下，这个 ctrl 工具的更新 稍微会有点慢，他这边要下载东西， 大家有什么问题也可以就是打到那个公屏上。 今天好像没什么人哎，可能稍微有点晚了， 欢迎新来的朋友。进来的朋友啊，关注一下。马叔， 我们现在是在更新那个开发工具， 要稍微等一下， 稍微有点慢， 感谢新朋友的关注。 我们先看一下啊，先那个开发工具让他更新。我们先看一下今天要讲的内容，呃，我们老样子回顾 录一下之前讲的东西，然后之前是已经讲，呃，把那个 unny a p p 的组件，常用的组件，然后都已经讲了，然后今天的话，呃，讲一下这个路由和页面跳转， 路由和页面跳转完，呃。讲完之后，然后，呃 再讲一下那个嗯， a p i 的东西， 一部分，呃 api 的东西就跳转，跟 api 也是很像的，所以说，呃，我们讲 api 的东西， nobody 啊。今天是没什么了， 今天比较晚吧， 今天我们就直接讲这个 a p i 吧，我看一下这个，哎。 navigator 这个东西啊，可以不用。今天就直接讲 a p i。 今天直接讲 a p i 讲 a p i 的东西， 这个怎么卡在这边了？ 我们不管这个，我们不不管这个，等他更新好了，我们重启一下就好了，然后我们呃今天就直接讲 api 的东西吧， 加 api 的东西， 那我们呃开始我们看一下这个 a p i 啊， a p i 这边是有分基础的，还有网络好，页面跳转、数据缓存和位置，媒体设备、 键盘，然后呃这些界面的，还有界面的一些啊相关的东西，然后这个这些都要一一讲，还有文件穿题 这些都要都要讲，然后绘图的话就稍微带一下，然后广告的话就不讲， 广告是规定要用的东西，这个是如果要接他们的那个广告平台的时候可以用，但可以不用啊。第三方服务要讲一下 unicord， 等 api 都讲完之后再讲。 然后这些，呃其他的有用到的都都稍微带一下，这这下面其他的呃用的稍微比较少一点，主要是这上面的一些 api 的东西， 我们看一下这个更新，更新完成了，然后我们重启一下， 然后我们我们运行还是呃把之前的那个例子运行起来，我们在之前那个例子项目，呃继续讲了，继继续那个在上面去做新的页面， 我们等他那个启动起来，稍等一下， 欢迎新朋友进入直播间啊，新朋友啊，关注一下大叔。 呃这个是之前讲表单的一个页面，然后我们我们就不用这个界面，我们建一个新的页面吧， 我们建一个新页面，新建页面，然后我们叫 api， api 一加 p i， 然后选没了模板，然后他就会创建这个页面，创建完之后他就会啊给你配自动的配一个页面，然后我们这边， 呃哪位 get 把抬头 test 是他的标题，我们给他呃加上一些标题吧， api 相机， 然后我们把那个把它放到第一个，让他能默认展示这个页面， 我们给它剪切到这边， 这边爆错了，我们看一下是哪里爆错了，这个逗号， 逗号，可能中文的逗号， 然后这是 api 详解页面，然后我们看一下这个怎么缩小一下， 这个给他拉开，然后我们看一下这边有哪些东西。先讲这些基础的啊，在 a p i 的东西，首先是那个录制打印， 就 ctrl ctrl 啊，向控制台打印东西啊，他这边有分几个级别， 就是有第八个 log， 然后呃引 for one 警告，然后爱了， 然后呃直接输出是 ctrl 点 log， 然后呃这边就是直接就是 ctrl log， 就是打印，就是调试信息，就是我们呃如果就是啊要调试一些东西的话，就可以在这边使用 ctrl 点 log 去打印出啊一些变量的东西， 我们试一下这个是刚才新建的 a p i 这边，然后这边是一个空界面， 然后呃我们建一个就是 onload， 就是页面加载时的生命手机 onload， 然后在这里面啊空手 log， 然后呃 this is unload， this is in unload， 然后我们看一下这个 onlog 的方法，就是呃生命周期是它页面，呃加载的时候会掉绒，然后我们看一下就是到哪里看这个打印字的信息呢？我们这边打开一下，我们刷新一下， 看到没有，就这边会打印，就是说 this is onload， 就是他会在这个调试面板里面的空手，这边有 element 空手，空手是代表，就是说啊控制台，然后我们在控制台里面 bug 那个啊，这个祝福串的话，它就会在这边显示， 然后比如说我们这边定义一个啊 message， this is message， 那如果我们要打印出，比如说这个 message 到底是什么，我们可以直接就是 打印出来这个 message 这个东西， control dlog 这个 message， 然后啊哦，不是这个 message 是 list 点的，但使用本页面的变量要有加格 list， 然后就可以我们刷一下 就可以把这个变量就是页面的变量给他打印出来，这个都是用来调试用的， 然后调试，还有一个调试，还有一个方法就是打断点， 打断点，呃打断点就是在遇到问题的时候，比如说你遇到问题的时候，遇到爆红或呃就是解析出错的时候， 就是方法是错的时候，然后你就是嫌这个空手点 logo 比较麻烦，或者是定位比较难定位，这个时候呢你就可以用这边的哨子， 比如说我们要定位，就是说 onload 里面的这个 ctrl 点 log 是不是啊？正常的运行，然后你就可以在呃这个 sos 里面去找到我们这个 a p i 文件，这个 sos 下有个英语单 a p p 这边你可以打开，然后它会 把当前加载的那个页面，当前加载的页面他这边会显示在呃目录或文件都会显示在这边啊，我们是那个配置是干 api， 然后打开这边就有个 api 点微粒，然后这个就是我们刚才写的那个文件，然后如果你要看，就是说比如说网络的这一行到底有没有问题， 你就可以在这边呃他这个函数里面去点一下，他就会啊在这边打，打到断点，就当他运行到这个的时候，他就会卡在这边，你就可以看这里面有什么东西。

哈喽，大家好，我是老杜，今天啊，正好呢，有一个同学问了我一个问题啊，他说他要开发微信小程序，有没有什么合适的前端的 ui 框架。那这个呢，正好问到点上了啊，咱们有一个前端的 ui 框架，我给大家推荐一下，叫 vui， 他这个 vy 呢，这个前端空间啊，他是一套什么呢？同微信啊，同微信原生视觉体验一致的基础，像是库，他其实就是一套 cs 库啊，他的样式呢，和这个微信的样式是一样的啊，他是由微信官方团队啊，这个设计的啊，专门为什么设计的呀？哎，为这个微信内部的网页啊， 以及什么微信小程序量身设计的一套 uy 框架啊，大家可以用它，包括你开发这个手机端的应用啊。呃，没有合适的前端 uy 框架的话，我觉得这个 vy 是一个比较好的选择。 那么这个呢，里边有很多的内置的一些样式啊，可以直接用，比如说表单，对吧？哎，表单里边按钮，你看 自带了这么多按钮是吧？哎，包括还有表单放啊，表单，表单，最基本的表单结构，你看表单吗？是不是？哎，填写东西的啊，包括验证码，你看是吧？ 验证码，然后呢，还有什么呢？比如复选框是吧？哎，复选框，你看这种样式的对不对？哎，非常好的一个前端 ui 框架啊，和大家推荐一下。

啊，各位同学大家好，本小节我们继续 unifa 的学习，那么在上小节给大家讲解了微杠袖子的一个指令啊，那么它也是控制元素显示与隐藏的， 那么他跟微艺府的区别是？微艺府，嗯，控制元素显示，运营茶则是啊，创建和销毁元素，而微杠秀则是控制一个元素的 dcplate 属性， 他们两个有本质的区别啊，如果你是频繁切换的场景，我们推荐大家用微秀啊，如果是其他情况，就用微易付啊， 好了，这个是我们的啊，控制元素的显示运差好，这小节给大家讲解另外一个非常重要的指令，叫做什么叫做 model 啊，这个 model 是用来实现双向数据绑定的啊，是用来实现双向数据绑定的 好，他用于什么呢？用于我们的表单元素好。哪些是表单元素呢？所有类型的输入框啊，不管你是普通的输入框也好， 密码框也好啊，然后就是下拉框，多选单选文本域，时间选择这种啊，我们都把它称之为表单元素， 只要你看到了表单元素，那么第一时间要想到我们的微杠波斗这么一个指令啊， 那我有一个模特是怎么用的呢啊？首先我们在我们的 dict 当中去定义一个 w 啊，用来绑定我们 输入框的字啊，比如说我们在这写个音铺的啊，来写个微杠 model 啊， 好，微杠 model 就直接绑定我们的他当中的某一个数据啊， 直接绑定我们对他当中的某一个数据，那么他就可以实现双向数据绑定， ok， 什么叫双向数据绑定呢啊，什么叫双向数据绑定呢？就是好数据改变啊，试图 会改变好，然后试图改变数据也会跟着改变好。这句话说起来有点抽象，那么我们在这给大家做一个实际的案例，给大家看一下， 像我们这有一个巴特啊，然后我们给他叫改变，改变我们的 whello， 然后我们在这艾特克利克，在这写个方法叫 fred value， ok， 来，回到 master 这里面来， 好，我们就直接去改变我们的 w， 等一个一，等一个 a、 b， c 吧， ok， 好，现在我们同时在页面上用叉字表达，是把我们的 w 显示出来 啊，回到我们的页面上来，现在我们的歪了，因为是空的啊，所以说他没有任何内容。 注意这个音铺的框哈，是在 unipa 当中是有默认样式的，是让大家审查元素哈，这种音铺的框就是在这，包括我们把鼠标放上来啊，他也有，只是说你看他有 很多默认的样式啊，比如说百合国奥的没有啊，啊，汉特没有等等等等啊，这个波德也没有，那么为了哈，那个我们看更清楚一点，我们给他个波德吧，波德一 px 啊，给个实现啊，给个红色啊，这样我们就能看得出来了啊。 好了，现在我们开始在页面上的数框当中去输入内容啊，那么这个时候我们的视图就发生改变了啊，说个一一一二二二三三三， 那么我们的 w 啊，会跟着一起改变，这个就是试图改变，而我们的数据会跟着一起改变，而当我们点击这个按钮的时候，我们会去改变我们的这个 value， 在他当中这个 value 的值一点 来，看到没有？好，我们的数据改变啊，是让我们试图也跟着一起改了，这个就叫做双向数据绑定好，这个是非常 好用的啊，那么这个微干窝豆到底是怎么实现的呢啊？虽然他是一个语法糖。什么叫语法糖呢啊？就是啊，内部其实做了很多操作啊，只是我们用下的时候更加方便剪辑了。 好，现在我们要自行实现一个微杠 model 啊，怎么去实现呢？好，我们复制一下这个输入框，就把这个微杠 model 删掉啊。 那么首先第一步我们要给这个输入框动态绑定我们的歪溜直，那么动态绑定歪溜直呢？要不然我们没有动态绑定歪溜直的话，那我们是不可能说我们 数据变了，看我们的视图，就是我们这个输入框的值会跟着一起改变，这是第一点，第二点就是我们需要给他绑定一个音铺的事件，为什么呢？因为我们在输的同时啊，输的同时这个音铺的框 啊的内容一变，我们数据也会跟着改变，实际上就是在他的音库的事件当中去改变，我们这个对话当中词就 ok 了啊，就是我们叫憨豆音库的啊，憨豆音库的啊， ok， 来写， 其实很简单的。好，注意我们的这个，每一个实验当中默认会有这么一个疑问和对象，那么我们怎么在音铺的实验当中拿到这个输入框的值呢？其实很简单，就是把我们的这个 v 六卡在这动态绑定的这个 vr 六啊，等于什么呢？等于我们输入框的值就 ok 了，输入框的值怎么拿呢？叫一点他，给他点 v 六。 ok 啊，现在我们就自行实现了一个啊， 威港 model 啊，这段时间我也刚 model， 总结一下，就是动态绑定 wy 里的值，然后给这个输入框绑定音铺的事件，然后在音铺的事件当中拿到输入框的值，然后付给这个 vi 六就 ok 了啊，就 ok 了啊， 这个就是我们微杠 model 的用法啊，虽然微杠 model 是我们非常重要的一个指令啊，就这三个步骤啊，就被浓缩成了一个 指定的啊，所以说 vivo 还是非常强大的啊，我们用尿不是因为基于 vivo 的语法哈，所以说有这些红利啊。 好了，本小姐姐给大家讲解了 vgmodo 的其中一种用法啊，在下小就会讲其他的用法。好，这小姐姐给大家讲这，谢谢大家。

二零二一前端常用主流幼儿框架，建议点赞收藏哦！