vue 3怎么通过数据权限

好，我们来说一下这道题啊， vivo 的双向数据绑定原理，那么这道题呢，是面试当中最高频的一道题了，基本上现在所有前端的面试当中呢，都会问到这个，呃，数据绑定的原理啊， 那我们先来简单说一下，就是他的原理到底是什么呢？相信很多小伙伴已经清楚了，他就是通过数据劫持，数据劫持和发布订阅者，发布订阅者模式 来实现，对吧？同时呢啊，同时利用 object， 哎，这个是点 define property， 第一 five， 嗯， e property p r o p e r t y property 这个方法来劫持各个属性的 setter 和 getter， 劫持各个属性的 setter 和 getter， 好，那么他劫持这个数据干嘛的呢？就是在数据发生，嗯，改变时候发布消 给订阅者，好，给订阅者，然后触发对应的监听回调来渲染视图， 回掉渲染 好，那么也就是说数据和视图呢，是同步的，数据改变，视图也跟着改变，那么视图发生改变呢？数据呢，也会发生改变， 也就是说数据和视图是同步的，数据发生改变，试图跟着 发生改变，那么仕途改变，数据也会发生改变， ok， 这就是他原理的一个基本内容啊，那么他具体是怎么实现的呢？咱们来说一下，比如说第一步，第一步 六，首先呢，我们需要一个 observer 对数据对象进行一个低规变例，包括子属性对象上的属性都要加上 setter 和 get， 对，需要 observer o b s e r v e r 的数据，呃，对象进行干嘛呢？地规便利好，同时呢也 包括子属性对象，嗯，的属性都加上 setter 和 get， ok， 这样的话，嗯，我们就可以给这个对象的某一个值进行复值，对吧？那复值的话就可以触发 center， 这样的话就能够监听到数据的变化， ok， 这是第一步，那么第二步呢， 我们需要一个对模板进行解析的指令，就是 compare c o m p r l e compare 模板模板解析指令什么意 意思呢？也就是说我们要在要把模板中的一些变量给他替换成数据，然后再初始化渲染页面视图， 同时呢，也可以把指令对应的一些节点，他不是都要绑定一些函数吗？对吧？把他们添加到监听数据的订阅者上面，如果说数据有改改变，那么他就这些订阅者呢，就能收到通知来更新仕途。 听明白了吧？就是把模板中的变量替换成数据， 好，然后初始化，呃，初始化渲染事故，同时呢， 把每个指令对应对应的节点绑定上更新更新函数。 嗯，然后就要添加订阅者，如果数据变化，嗯，收到通知 更新视频，这是第二步咱们所需要做的事情。那么第三步呢？第三步呢，就是 watcher 订阅者，对吧？你要有一个订阅者，订阅者是什么呢？就是把 observer 和这个 computer 呢，他们之间的这个通信呢，给他 串通起来，好吧。第三步， watcher w h c h e r watcher 呢？呃，订阅者是 observer 和 company 之间的通信桥梁， ok， 那他主要做的事情是什么呢？作用， 首先第一步他要在自身实力化的时候呢，往属性订阅器里面添加自己，同时呢，自己还要有一个 update 方法来用于更新。同时呢，等待属性变动的时候，我们需要调用自身的这个 up 对的方法触发 compute 呃指令当中绑定的一些回调，这样就可以了。第一步，在自身嗯，实力化的时候往 订阅器内添加自己好，那么第二步呢，就是自身哎，要有一个 upper date 方法 好，那么第三步呢？第三步就是等待属性变动。 十第二，用自身的 upper date 方法触发 compu 中的毁掉， ok， 这是 watcher 订阅者他所做的事情啊。那么最后一步呢？第四步 就是 m v v m vo 的话，它是 m v v 这个 m 这个框架来呃， 指定的对吧？那么他整个是咱们绑定的入口，整合了 observer， compare， water 这三者之间的一个联系，通过 observer 监听自己的数据变化，通过 compare 来解析指令。 最终呢，利用 watcher 连把 observer 和 computer 联系起来，这样的话就能够达到一种 数据变化，试图更新，试图更新数据也跟着变化的一个双向绑定的效果。好吧， mvm 作为数据绑定 绑定的入口，整合了 observer， 呃， counting 和 water 和 water 三角，它是通过 opposerver o b s 因为 oppo server 来监听 自己的数据变化， 通过 camping 的 嗯，解析模板指令， 最后利用 water 干嘛呢？联系把 over server 和 computer 联系， 最终 看到数据更新，试图更新，试图更新数据 更新的效果。那么这些内容呢，就是双向数据绑定的一个原理了，希望大家呢，能好好的消化一下。

同学们大家好，在本套课程里，我将会带领大家使用 view element admin 这款后台前端框架完成全线模块的制作， 其中权限模块涉及的 a p i 都是真实线上的 a p i 可供同学们在课程练习的时候进行调用。所有的 rest for a p i 地址在夏目源码 a p i 目录即可查看。 那在本套课程里，我会带领大家完成以下知识的学习。首先我会带领大家完成 view element admi 这款后台前端框架的一个安装， 那安装好后，我们面临的第一项工作就是实现后台的一个登录认证，那这里我会 带领大家完成基于 g w t 啊全称是 jason web token 的登录认证逻辑。那这里呢？我们先登录输入账号额的密，密码一二一二三，点击 logi。 那登录进来后，我们面临的第二项工作就是啊，或者说在登录的时候，我们面临的第二项工作就是根据用户的角色，那我当前登录的是这个管理员角色， 根据我这样的一个角色来实现左侧菜单的一个动态展示。 那这里我们主要跟同学们讲解如何根据用户角色渲染前端路由菜单，实现前端菜单的一个 动态显示。实际上这边的这个菜单的一个配置，我们就是在这个菜单管理里面进行配置，比如说我们的权限管理，我们点开， 在这里面我们可以去配置哪些角色可以看到啊？比如说用户管理，我们点击编辑，在这里面我们就可以去看一下这个菜单啊，哪些角色可以看到他， 我们就可以进行一个下拉选择啊，这个是学员添加的，我们系统里面会有一个初始化管理员，我们目前登录的这个账号啊，就是初始化管理员， 我们也可以选择啊这个角色，那这样子的话，如果某个用户被分配了这样一个角色的话，他也能够看到用户管， 那最终我们返回给前端的就是一个角色，前端呢根据这样一个角色实现左侧菜单的一个动态渲染。 那以上这两项任务呢，属于后台必须要完成的任务，我们可以理解为是宏观层面的任务，那完成这两项任务后，接下来我们会带领大家完成我们各个页面层的制作，比如说我们的用户管理 啊，我们的用户管理，我们在这边可以进行用户的一个添加啊，编辑删除 以及我们的这个权限管理啊，我们的这个角色管理， 我们可以指定这些角色啊，都拥有哪些这个权限。那实际上这个权限的话，这边呢，我们只是用了 elements ur 这样一个多选的一个组件，在具体分配权限的时候，我们还可以做成啊， 添加角色的时候就是进行角色添加，在分配角色的时候，我们可以来到另外一个页面，因为我们随着具体的一个后台系统的一个制作的话，里面的这样一个权限肯定是非常多的，我们可以按照模块来进行一个划分， 那最终我们可以在这边再加一个按钮，是点击分配权限，然后来到另外一个界面，我们在这个界面里面进行权限的一个分配啊，如果说我们的这个权 线比较少的情况下，我们是可以直接在这个下拉菜单里面进行权限的一个分配的。 那在带领大家完成这些页面的时候，我们会讲解到接口层的分装与调用，不同的页面，我们会讲解到 element ui 组件的使用，如弹出层的使用、塑形菜单的使用，如何实现分页以及多条件搜索。 那同学们有了这些页面制作的经验，那对于你工作中遇到的其他页面，相信也能得心应手。 正所谓授人以渔不如授人以渔，那完成上述工作后，基本上我们就完成了权限模块的制作了，但是对于系统里这个不同类型的错误提示，非常有必要 区别性对待，以提高用户的体验，也就是说我们应该根据不同的错误码进行针对性提示啊。我们举个例子，比如说对于某个接口的权限，我们并没有分配， 但是该接口所在的页面啊，用户是有权查看的。比如说我们的用户管理页面，我们现在是有这个权限查看的，之所以有这个权限，是因为我们在这个菜单管理里面，我们分配了当前的这样一个角色，是可以进行 这个用户管理的一个查看啊，也就是我们的这个初始化管理员这样一个角色是可以查看这样一个页面的，但是呢在用户管理里这个页面里面我们会去调用用户列表接口啊，那这边呢，我们来看一下， 我们试着把这个角色里面的这个用户列表啊，给他这个权限啊，给他删除，然后确定这个时候我们再到用户管理这边看一下。 哎，这个时候呢，我们就根据这种权限的一个缺失，我们做一个针对性的提示，并且呢这个错误提示呢，我们要求用户可以进行一个手动关闭，因为这个提示的话，相对而言需要一定的时间去阅读， 然后呢他可能还需要进行一个截图啊，所以说呢，我们留给用户手动关闭啊，他是一个警告提示，也就是说这样一个提示，他并不是一个致命性错误，只是呢一个警告 性错误啊，说该页面或者操作啊，目前呢是一个页面，那什么叫做操作呢？操作，有可能是啊，你不具备这样的权限，但是呢你可以点相应的一个按钮，那这个按钮一点下去之后，我们的后端呢 会进行一个拦截啊，知道你不具备这样的权限，但是因为某种原因，前端啊显示了这样一个按钮，或者说显示了这样一个操作的一个通道， 或者说用户他是通过这个 postman 啊，或者其他的工具直接进行一个接口请求的，我们在接口返回的时候还是会进行这样一句话的返回啊，所以说是页面或者操作，那当前呢就是我 的一个页面涉及到权限啊， slag， 这是我们权限的一个标识， user 点 index， 那 user 点 index 呢，就是我们这个用户列表的这样一个权限，但是你未获得此权限，可能会造成页面部分功能无法使用或者操作被终止，终止请联系管理员解决。 那这样的一个情况呢？通常啊不会发生，可能是管理员在分配权限的时候啊，遗漏了，比如说我们刚才的这样一个情况，那既然给你看这个用户列用户管理，那肯定会有这个用户列表相关权限的 啊，所以说我们在角色这边把这个权限给他再加回来，我们选择一下这个用户列表， 点击确定啊，这个时候我们再看一下这个用户管理，我们就能够看到这个用户列表了。 好，这个就是我们刚才说的啊，根据不同的错误进行一个针对性的提示，这个只是其中一种错误类型提示 啊。还比如说我们用户长时间为没有这个操作后台，那用户登录已经过期，我们的错误提示呢，就会引导用户重新进行一个登录。 好，那以上呢，就是我们这套课程的一个课程介绍。感谢同学们的收看，我们下节课再见。

啊，然后我们在这里面登录的成功之后呢？我们做这么点事，让他跳转到跟录，跟录像 replace， 直接跳转到我们的根路径就可以了，我们来测试一下他会怎样调整好。我们这边先让他访问捞根印啊，然后我们访问捞根印之后呢？随便说，我有救我的命， 然后一二三，然后登录，然后跳转这个，这个页面什么都没显示，是因为我们没有做任何操作，那他已经成功跳过来，这是没有问题的，说明这个跳转成功了， 我们要做的目的当然不只是跳转，我们应该对当前再一次进入，你比如说我再次强制刷新之后，你比如进入捞根印，他已经当入成功了，你还有必要再去进入捞根印吗？没必要，因为我默认其实是让他后期要跳转到捞根印，对吧？所以我们要给他加一个 路由权限的处理了。打开路由页面，路由页面当中我们穿一个新的文件，就叫啊权限的处理吧。 js， 首先我们这里要操作的话，你必须要引入陆游文件，对吧？所以我们点杠 index， 引入陆游之后呢，我们撸条点被包一尺 勾的函数，里面有三个参数，分别是 to fro 和这个 nice next 是必须的，千万别忘了。然后呢，我们这边做什么判断呢？判断一下你当前的 topen 是否存在？那要想判断韬肯存在，你得引入 stop 吧，因为你操 top can 在 store 里面存着呢，对吧？点杠 stop 里边的印 lex 怎么判断呢？就是 stop 点 state， 点 use ok， 它存在 证明用户已经登录过了，然后不，否则就是不存在，没有登录过怎么办？我们这样，我们取反吧，取反这里就是用户不曾登录，所以这里是未登录。 那未登录有两种情况，第一，页面是否需要登录和页就是页面是否需要登录，这么两个情况，需要或者不需要吧，所以我们这里还得做个 a 服，怎么判断呢？首先吐点嘛，这个 获取到他的长度认识是不是大于零，并且我们的独到的这个 max 的数据萨姆 是可以便利的，当然这面我们应该对他进行我们的习惯。刚上面取法了，这里我们已经取反操作，下面里面去读他的这个结果，这个大家可以在呃 apm 当中找到这个具体的操作啊，就这个项目的便利， 我们读他里面的麦的标签，麦的标签当中我们是不是有一个叫看一下我们的路由文件中啊，是不是有一个叫他的属性啊？这个属性为处的话，是不是就需要登录才能访问这个页面呀？所以这是我们要要说的这个点， ok， 这个样子， 哎，这边我们看一眼啊，应该是在这吧。 f 好，在这里。如果我们既然是取反，这里就不需要登录，那不需要登录。 nice， 继续往下走，否则就有需要登录，那需要登录我们让他进入哪？进入了登录页面呗，就是 nice 的括号，给他一个对象 pass， 直接去哪儿捞个音。需要登录， 这是这样的场景，这没有问题吧？嗯，否则就是用户已经登录了用户，用户已经登录，那他肯定所有页面都能进了，但这里是要到个问题，如， 如果用户已经登录了，如果用户已经登录了，我们需要去处理陆游的访问权限了， 路由的访问权限。 什么权限？就是你当前页面， 当前页面是否需要呈现对应的用户权限的页面，你比如说他是管理员，他会显示所有页面，他是 vip， 他只显示 vip 能看到的部分页面，对吧？所以要做这个操作， 这是很重要的。那这一部分操作我们现在什么都没有呢？所以我们现在也做不了，一会我们去看，现在看一下我们上面这个判断是不是对的。那要想让他生效的话，是不是我们在闷很重要？引用他呀？在这个下面引用 pose， 点盖，找到路由页面， 然后找到他的权限，保存好。现在啊，我们打开页面，把本地这个存储，那给他清掉，清掉之后我们来访问神道，清掉之后我们来访问更页面，你看他直接跳上高跟音了，为什么你没有登录啊？你登录之后他就不跳了，比如说这面登录 好，这面打开我的面就进来了，当然我这边，哎，我不是登录之后，点击之后让他回到这个首页了吧？我们看一眼啊，登录之后回到首页，我们来到登录页面， 回到根页面， 现在是登录页面 啊，这边还有一个问题，就是我们登录来之后啊，他的一个跳转问题，我们再测 试一下啊，现在是登，我们访问，现在是登录，我访问没有问题，因为用户本地数据有，对吧？我们把本地数据删掉， 刷新，他就会进入到捞根印里面，捞根印里面我们输入点击登录好， ok， 这样就存进来，存进来这边其实应该回到首页，对吧？然后不应该是这个问题，那这里面还有一，哎，这个，这个，这个回到首页这个其实没有问题啊，刚刚我们测试过，那应该说我们这边还存在一些问题 啊，我们存储的这个问题啊，这里边我们先别管那么多吧，先给个 nice， 否则要不然这个登录之后他过不来，对吧？我们看啊，正面， 然后登录啊，这样就能过来了。然后刚刚说了，这里其实是用户权限的处理，那我们现在来处理这个部分吧。

上节课呢，我们把服务器搞定，这节课呢，我们刚刚说了，我这里边刚刚引入了一些公共的 css， 大家可以看到 css， 大家自己下去看啊，然后呢，他是公共的，所以我在这一个闷点 js 当中已经把他引用进来了，你带个电来个 css 啊，为了看到这边的这样更好看的一个效果呢，我这边也是在捞给你里边增加了一堆这样的杀死的样式，大家拿回来用就可以了，没必要自己写，当然你想要更好看，你可以自己去修改， 这边也不是我自己的样式，是别人的样式，我们也是拿过来用的好，这边登录功能还是在这里，我们刚刚说了，服务区端写完这边我们是不是前段要实现登录啊？那么前段要实现登录的第一步就是实现登录的整个流程， 网络请求我们已经安装了，所以这里首先要做的第一件事是去把我们前台的网络请求的整个部分搭建起来。为了方便我们这里创建新的文件夹角 api， 我们会把所有的网络请求的方法放在这个 api 当中，我们再创建一个新的文件夹叫 uto utos， 在 utos 里边我们会创建一个文件叫 stvp 点 gs， 用它来去封装我们的 axl s， 这个封装的事情我们在之前课程当中就有做过了，大家可以直接拿过来用，都没有问题， 我呢直接拷贝过来用了，大家大家看一下啊，这边我们会设计到一些资源，比如说我们有四道，对吧？啊？这个贝斯贝斯 ui o 我们还没创建，我们在这里呢创建一个贝斯 u l 贝斯亚欧点 gs， 这个贝斯亚欧呢，是我们的跟路径的一个处理，它里面主要包含的就是康斯的一个贝斯 u l 等于一个跟路径，地址也是 ddp 冒号，我们是本地的，就是 logo whose 的。呃，我们是 三三零零，对吧？这是本地地址， xpart 被说的导创的铁服务员 贝斯 u l， 当然这个部分不一定用的到啊，这个主要是针对于你不跨越的时候有用。大家知道现在跨越方案有两种解决方案，一四幺 s， 这个是后台一处理，一种是我们前台的 pose 的代理方案，对吧？我们现在用的就是 第二种方式。代理后台呢，一般我们在公司就这两种选择方案，一般我们推荐使用后台的形式，那前台就不用管跨越的问题了，但是很多成员他可能未必会给你跨越，所以我们在开发阶段呢，这是开发阶段啊，开发阶段 或者要开发环境，环境下，我们可以使用这个 pox 去做一个代理处理，这个大家看之前的课程好，所以这个在这里面是没有什么问题的，当然他也用，也没有未必能用的到啊，我这边也把注视掉了，所以我们是本地跨越，所以 用 party 代理就可以了。呃，这个饮用是没有关系的，我们从爱恋们的饮用这里关于 stol， sdol 里边我们做了一些关于 talking 的存储，对吧？看到了吗？这个一会我们就实现，不用着急，我们一步步来这个网络请求的我们我们可以看一下这面做了一个响应拦截， 然后做了呃，请求拦截和选个拦截。请求拦截中我们只是做了一个 top 的添加，然后选个拦截当中我们只对错误信息做了一个判断，比如四百四零一，四零二四零三等等一些判断信息。然后呢，这边有一个盖子请求和一个 pose 请求，无论是盖的 pose， 我们都做了一层签套用了一个 pope promiss 呢，做一个 深入的判断，然后数据拿到结果的一个处理，所以这并不难啊，大家看一看就能看得懂，所以我们这拿过来用了，不耽误时间。 然后在 api 里边，我们需要在 api 里面创建一个银 dex， 然后把我们刚刚那两个访问路径呢都给他写 成这个 api 的形式。比如我们这边，首先 npot 引入我们的 asios 访问地址，那就点点杠来源于 uq 当中的 hdp， 对吧？然后呢，我们这边呢就可以 x port 来方式引用的，比如我们叫 faich 权限 好，这是一个网络请求，一会我们会设到现在，暂时我们设计不到权限啊，一会我们会用到所有，先把那方法写在那，先扔在那，然后我们主要是还是说绕绕绕口音，绕口音是我们的登录，登录之后我们会有个参数，对吧？ u 字， u 字，你会根据 u 字不同来处理不同的数据结果，对吧？返回一个 a s s 点 get 请求吧，原本其实应该是 pose 的，我们这里写成 gat 叫 a p i， a p i 中有个 log in l 根印，后面跟一个问号，来个 u 字，等于加上一个 u 字就可以了。那有需要这个 u 字哪里来？ 一会你的用户传递过来就可以了，谁谁实现登录谁去传递这个优点啊，就可以了，这样的话我们这网络请求就已经实现了。嗯，在前台就可以引用去实现他。那这里注意一个问题，他是一道 api ling， 对不对？是一道跨越问题。那在我们这平台下怎么解决跨越啊？ 刚刚说了我们用 prcc， 所以我们在这里创建一个新的文件叫 v， 有点可能非常点 gs， 在这个文件当中我们需要导出对 对象，这个对象里我们就实现这个跨越的结构。这个我们在讲网络请求时候给大家说过，所以大家需要做的就是直接用起来就可以了，我这边呢就把它复制过来用了，大家可以看到我跨越的是三三零零，然后呢？ 呃，人去跨域，然后重写 api， 重写地址，地址呢？就是正常该是什么就是什么。首先 api 代表了就是这里跨域嘛， 那大家一定要注意，你修改了配置文件，这边你的服务器端一定要进行重启，否则是不生效的。就我们 npm， 然后去重启一下，否则他不生效，我们这边也不用管他重启。呃，然后因为你这边实现了相关的一些资源啊，大家看啊，这面还有一个问题，就是我们这里边刚刚在这里边 实现了一个关于 style 的引用，对吧？他会有问题的，所以你不使用到他无所谓，但是你要使用到他就会有问题了。所以这边我们为了方便可以先把这个注视一下， 注视一下之后呢，这边就没有关于斯大的引用关系了，大家就不用操心这个问题了，因为我现在还没有创建存储，我们先看一下登录能不能成功，对不对？回到我们的登录页面， 陪着陪着里边找到我们的录音。好，我们看下这位应该已经启动成功了刷新，以免没有任何问题可以访问我们。希望这里别录，我，输入了我的面，然后我们这输入一二三一点登录，可以实现一个登录效果。现在我们试卷是没有做任何操作的，所以没有实现。 好，那我们看下登录这个页面怎么实现。首先你要想实现登录，这边是不是首先需要引入你的那个登录的那个方案呀？比如我们刚刚灯泡的引入不是来源于我们点点杠，找到点点杠，找到上一层，找到 api， api 里边我们不是有一个高跟音吗？对吧？ 所以这面一点击的时候我们就可以登录了，这样我们把这个老观音给他前面加一个呃一步的处理方案，呃 sing， 然后在这里边我们就可以赖他一个别墅叫对他，对他就 就可以啊，为他 logy。 那这里边就可以传一个用户名，用户名来源于什么？来源于我们的 a， 你来源于你上面的用户名的输入，对吧？这面我没有判断密码，因为登录是假的，所以我们只要给个用户名就行了。然后我们可以这样把这一个对他打印出来啊，这个对他注意一个问题啊，你得 like 一个， ok， 对他点对他啊，应该是对他点掏钱，去读取那个掏钱，然后再把掏钱打印出来，或者这样我们先不管掏钱，我们先打印整个对他，大家看一下对他是不是如我们所愿。好吧，来看一下 啊，这边有个贝斯 ufurl 的一个引用关系问题， app 中没找到，我们来看一眼啊， 打开我们刚刚的这里 啊，这边引用的 名字错了啊，点杠 base 要大写的。嗯，好，来看一眼。因为我们之前复制过来，所以他之前是小写的，上线没有任何问题。我们输入一个。嗨，呃，我们输入一个 vip 吧，然后密码不用输入一点登录，大家看淘名叫 vip， 你输入的额的密 一点击掏空掉我的面，你输入别的，只要不是我的面就是 vip， 看到了吗？所以我们现在网络请求登录是没有问题的了。 ok， 那我们这节课呢，先到这里，谢谢大家。

有位网友发来这样一个问题，在 view 三中使用 reactive 定义了一个响应式的数组，在网络请求完成后进行复制，但是试图并没有更新。 打开控制台的确可以看到数据，试图也已经进行了渲染，但一片空白。在触发事件时，此种方式不会触发。试图更新，因为地址指向变成一个新的地址，我们可以改用 ref 来进行定义，通过点 value 的方式进行复制， 可以看到数据可以正常显示。还有两种我比较常用的方式，同样使用 reactive， 不过要以对象的形式将数组包裹给对象属性复制也是可以的。还有一种方式，我们 回到最初的代码， 采用 pose 的方式来更新。关于这几种方式的实现原理，相信路过的大佬会在评论区留下答案的。

这节课讲解五由中非常重的一个质量，叫 vgo mode 指令作用啊，是双向数据绑定。什么是双向数据绑定啊？有两个条件，第一个条件，当数据层 m 层发生变化，会影响视图层微层改变。 第二个条件，当视图层微层发生变化，同样会影响数据层啊， m 层改变。通过一个案例啊，来给大家演示一下什么是双向数据绑定。返回代码，在对策中定义 message 数据啊， 然后把 message 数据渲染到 input 文本框中， tab 值为 tax。 旋转之前把慢细致的数据啊先打印出来， 放到 h 一表现中啊，看的更清楚一些。 刷新页面，当前看到的我们就是新的页面零四页面了， message 的数据啊也渲染出来了，文本框也加载进来了。我们的需求是要把 message 的数据渲染到文本框桌，那文本框有一个外流属性， 按照以前所学习的质量，有没有办法把慢细致旋转到我们框中？ 肯定是有的，我们学习过微杠半的属性绑定指令，只要加上了微杠半的，就可以把 mace 的数据 拿进来。 d 特种的数据已经渲染到了湿涂堂， 这属于单相数据绑定，如果修改仕图层里面的文本里面的值能够影响数据层，那这种情况叫双相数据绑定。 现在我们来修改文本框的值啊， 文本框的值当前我已经修改了，变成了哈喽后面这一串一啊。大家说 数据头 mc 值的值有没有修改？还没有修改，因为 h e 这里的哈鲁炫 的就是买鞋子的内容，当前还是还是哈罗，并不是哈罗。后面的一一一 说明，通过微杠半的这一种形式啊，他是没有双向数据绑定功能的。 正确的写法好，正确的写法就应该使用 vgo model， 我们这一节课要学习的质量，直接把刚才的删掉。使用 vgo model， 质量 同样，微杠猫的后面跟着的就是别人的名字。先保存代码， 第一件事情， message 的数据能不能渲染到文本框中， m 层到 v 层数据传递是没有问题的，那这第一层没有问题。好，第二层，那修改文本框的值能不能影响 d 册中的值？尝试一下还是来修改幺幺幺。 这一次大家就看到了，当我修改文本框的值，可以直接来修改 d 中 message message 的值，这就是双向数据绑定。 注意，双向数据绑定啊，只能用在表单元素上，因为页面中只有表单元素才是用户可以去操作的。 那我们上面有一个 h 一标签啊，那 h 一标签用户想修改他也修改不了。这就 是我们这节课的第一个知识点，微杠猫的双向绑定指令啊。这节课的第二个知识点就是微杠猫的，他是可以加修饰服的， 常见的修饰服啊有三个，例如第一个是点 number 表示啊，用户只能输入数字，我们可以在这这个 v 杠猫的后面再加上一层点 number， 有 mb 啊。好，那这种情况的话，我们把 mac 这个值啊，要么为空，要么为数字， 这是第一个修师傅，那第二个修师傅就要点唇膜来过滤首尾的空格啊。好，重点来讲一下累计吧， 内容发生改变并且失去焦点的时候啊，才能够出发。还是把 mace 的内容改成哈喽。 哎，内容发生改变 是上面的哈鲁有没有立马跟着改变，并并没有立马就修改，修改第四中的指，只有当失去焦点的时候注意看，失去了焦点 message 的纸会瞬间修改掉， 这个就是点 理解这个修饰符的作用，我们刚摸到的修饰符啊，我们就讲这三个啊。好的，这一节课我们就讲到这里。