16_尚硅谷_Vue_指令

嗯，刚才这过滤器啊，我觉得就咱这个语法，其实如果用ES6的语法是不是也能写。这个。不用这个，用E6的语法能做这样效果。你别说这。可以吗？这是什么东西？叫行参默认值是吧。那也说我没传的话，是不是就他呀，那传染是不是我那个值是不是这也可以再看起来好像更牛逼一点。是可以啊。啊。下面我们就看下一个叫指令。指令咱其实已经用了很多了，这个指令呢，我们可以把它分为内置指令和什么呢？自定义的指令，先看内置的。

这两个咱用过吧。这个是。给标签是不是指定标签体文本呢？啊，实际上是操作的元素的什么属性呢，它只在看。而这个是个标签，也是指定文本，但是它是指定标签文本是吧，也就是说用的是哪个属性呢？赢了HTM。这个V干if，如果是true，那标签才会什么输出显示在页面上吧，那反过来说，如果的话，它显示么？不显示那一个对应的叫什么LV秀好像跟衣服差不多，但是它是通过控制什么display这个样式来控制显示隐藏的v for。变异数组和对象，最终是不是实现列表显示啊，就咱咱们做过VR。

绑定什么适应监听，当然我们更多的写这个。艾伏是吧，V钢棒。是不是强制绑定解析表达式啊，那这个时候我们其实一般是把V-B的给什么省略，就剩下一个什么冒号。V-model这里面有个概念叫什么呢？双向数据绑定，哎，其实搞到最后就剩下他了。对吧，现在这两个啊。好。把它关了啊，我们来看一下，这里面有两个测试，一个是内置一个外置零啊，先看这里面的这一个。呃，这个地方我们先来看这个啊，看这个来说一点需求，比如说假设了。我这里面有个P标签。对吧，内容就和的微博点com吧，是不是来一个啊好下面有个八。叫提示我这个button想去提示这个P标签内容。

点击塔和尼，塔等于。比如说。就是alert一下出来啊，看看怎么做啊，留一个view，这个不用问啊，都知道。呃，井号。啊，Example可以说吧二。接着我们现在这个先写上啊，先写上，接着有一个method。对吧，有一个方法好，现在我们啊，我们现在要去得到这个P标签的这个内容，先要得到P标签吧。在我们RA里面怎么做了呢？是不是ref，哎，其实跟rap里面的做法很类似，就是要给你要找的这个标签取一个什么标识。

比如说，假设等于。来个名字啊好，问题是我们后面怎么样去通过这个标识得到这个P了，对不对。嗯，OK，这个地方说一下，This，你的VM对象它有一个多了，Re FS为什么是。对，有多个。啊，这个。也就是说这个先说这个属性的值什么类型。我现在是要保存多个数据啊，无非就两种速度对象。对吧，数组通过下边去，对象通过名称去，你说现在是数转离向对啊，看来大家还是觉得挺好啊。啊来得到以后，此时得到的是谁。得到谁P标签嘛，那我不是想得到P标签，是不是得内容这个地方啊，可以用text也是可以的。

懂吗？当然你也可以用HK嘛。一个意思吧，因为他本来现在标签就是个文本完了。可以吧，可以啊，好。是可以啊，可以没问题啊，这是一个啊，还有一个啊，假设我这里面呢，又有一个P标签啊，我这里面有个大号叫message。好，这个里面就应该有个麦呗，啊，就写一个啊三百五啊，随便来一个，这里面我不知道大家有没有注意过一个事情，什么事呢？就是大家如果第一次打开会看到那个在这里面开始看的不是这个。而是这个。有没有大家有没有体验过，就是第一次打开的时候，它有一个闪屏的现象。

就是看到的是那个那个表达式的那个文本。啊，可能很快啊，有时候是快一点，我让它效果明显一点，我让它效果明显没关系啊，我乐一下。哎，这个不这个不行啊，得先打开一个页面，因为现在已经解决好了。对不这样，这样总是不好的是吧。现在其实还很快，因为我的数据是在本地就有是吧，那如果这个数据从后台获取的。那么半天都是看到这个是不是那样就不好了。A是此时应该写什么，不应该对吧，也就是说嗯，这个地方当我没准备好之前千万别显示啊，这个怎么做呢，对吧。啊，这个得说一下啊。来看一下啊，最终呢，它会用到一个用法，用到一个语法叫V-clock。

啊啊，这个是干嘛的，在这说这个之前，我得跟大家去再写一个啊，看到我啊，看到我，比如说我这里来个big text，就写message。我先让大家看一个现象。呃，看一下什么给它打开，大家看着这个P标签，这个P标签的那个指令属性还在吗。是不是不在了呀。这个能不懂啊，不在了，好了，但是啊，最先我是在的吧，是解析完了以后，它是不是不在了，也就是说我们这个模板。啊，模板在解析之前是不是有这个指定属性。解析完了之后呢，没了，诶我要利用这一点，我要利用这一点啊。啊，我并不需要这个，这个也不要看到这里。

啊，V-clock其实就利用了这个思想。他先呢，给它加一个这样的属性，其实属性只可以不写啊，不写就是去好了，接着看到我我后面去写一个样式，看看大家能不能懂啊，Style中括号。拜拜。的play。韦浪。这是一个什么选择性？你不会连这个语法都不懂了吧？这属性选择器对不对样式的属性显示，也就是说他去找有这样一个属性名的。标签吧。找到谁了？是不是找到这个P了，那就会将这个P给了什么隐藏。

那但是我的这个属性在什么时候才有。是不是在我没有对它进行解析之前呢？那解析之后呢，没了没了以后我还能匹配这个P标签吗？不能。那是一个什么样的现象呢？大家看着啊。再打开一个。有显示吗？没有是吧，走你。就出了。哎，其实就利用了这一点啊，指令属性在解析之前是不是在呀，是不是在解析之后呢，没了。对吧，那而我这个写的。也就是说，在解析之前是不是能匹配到一个标签呢？那解析之后呢？诶，匹配不到了啊，一定要先看懂，这是一个属性过滤器，属性检测器的一个一个样式，你把这个忘了。

啊，别的就没什么，其他的咱都用过，我就不再一个一个测试了啊。这说的内置指令啊，大家要别人问你的时候，你要随口能说出七八个来啊，就这里面基本上都要能说出来。这是我们常用的。好，最后给大家讲一下自定义指令。有人可能就说老师。有内置指令还需要，为什么需要自定义指令呢？对吧，你要知道啊，这个内子令毕竟个数有限嘛。那他一定能满足你所有需求吗？不能，那有的时候我们可能需要一个特别的功能啊，用指令，用写成指令啊，它能够复用，复用率特别高啊，实际上是对标签的一个操作的一个复用啊，OK，而指令指令会根据你的实际需求来去做，好了这个地方。

啊，就要讲到啊，指令该如何定义，如何使用。好，而且这里面要说一个是叫全局和局部。前面我们是不是用过，我们其实在一个里面是不是可以六两个V5，甚至六三个六四个是不是，那什么叫全局的，什么叫局部的呢？其实非常简单。如果针对所有的view对象都可以适用，那叫全局。如果只是针对某一个实实例适用，那叫什么呢？局部，等会我们就来演示一下，大家能懂了。来我们现在呢，要去做这样两个功能。定义两个指令。功能呢，类似于vegan times。但是呢，我不是直接将文本显示，而是转换成什么呢？大写显示，你说我要搞一个什么比较合适啊，譬如说V杠，Up text。

可以吧，而这一个可以搞一个V杠。No，杠什么？是不是有这样一个两个指定属性可以做，甚至不觉得只是这个名字比较好而已，对吧？好，还要说一个事情。指令名是什么？指令名并不是这个指令名，是把V杠去掉以后，剩下的部分才叫指令名。哎，就是我们在定义指令的时候，是不是要指定指令名呢。这个名字并不包含什么呢，伟刚。这能理解吧？好，而这里面指令会对应一个处理函数。但首先你得知道指令是用来干嘛的，指令最终是不是写成标签属性去操作标签的。而我们当前这一个不是要去给标签指定一个文本内容吗？

啊，OK，在这里面它会接收两个参数，第一个参数应该好理解。E。哪个？哪个element指令属性所在的不要写在标签上面吗？你写在一个P标签上面，那是不是就P标签，你写在一个div标签上面，是不是就是那个div。这个不好理解，等会我们打印输出一下再去看它是一个什么啊好，我们来看一下。啊，这个里面我们就先把这个模板先写一写啊，把模板先写一写啊，这里面需要有个ID是吧。好，而且我是太一。啊，它是一好，我在这里面写一个P啊，写一个好假设我已经有了。分懂吧，假设我我写一个啊。

OK吧，好，再来个message，只是这一个呢，写的是它。能看到。啊答，现在肯定没法做是吧，我还没写呢，我先写上啊，好，而且吧。来，我搞两个。这个来个test啊，这个message啊message啊，这个角色就叫一吧，没问题吧，那也说我们这里面需要去干嘛。六两个view对不对啊，你两个view EL这个管的是井号TEST1，对吧，它要提供一个date啊，一个对象，接着是我们有一个MESSAGE1是吧。好来我来去写一下啊，主要这这个广告语估计大家都不知道。这个应该基本上快十年前啊，十年前NBA的那个推广语。

不知道NBA现在推广语叫什么，估计大家有些人知道，有些人不知道啊。这这些这好久了，现在推广是什么吗？还记得吗？有人有人关注过吗。啊，OK，没有一个人知道啊，天呐，我每天都在学习啊，就每天在学习是吧？行，这也是够厉害的啊，我也我都不知道怎么反驳，哈哈。呃，李宁的广告也叫什么呀？一切皆有可能是吧，那个跟那个好像跟耐克的广播也差不多是吧？啊，OK，那just，好像just do it的是吗？啊，类似的没关系啊。啊，OK，我故意的，有大写有小写，能看到吧，好，没问题啊啊啊me啊。

啊，先给大家打开，那现在呢，肯定是有问题了，对不对，有问题是因为我们当前是不是那个指令都没人去解析啊。能看到吧，它会提示指令没法解析，而且指令名包含被告吗？不包含对吧，没问题，好，下面有个点叫定义全局指令。那定义全局指令的语法啊，这个不用背啊，大家自己看的语法能写就行，与有函数对象有一个方法叫什么directive directive什么意思呢？指令的意思。啊，那来写一下view.direct传的第一个参数啊，就是我们的指令名，假设我准备把它定义成全局的，把它定义成局部的，那就写它呗。没是吧，好接着啊，我们这里面会有一个解析函数，有一个E，有一个东西叫什么呢？它有个名字叫帮，我们不管那么多，我们先把它给他什么呢？输出一下，看看到底是个什么样子。

可以吧，来看一下。来，首先依然是谁提标签，也就是说我的这个指令属性是不是所在的这个P。没问题是吧？好，下面说一个另外一个参数方例，它是一个对象吧。那这个对象里有什么看一下。啊，有name。这是什么？是不是指令？这一个是什么？那个expression me1什么东西是不是我指定属性的值，也就是那个表达式吧，ME1，好，诶这个这就是咱要的。

Value value是不是就是这个表达式的值，我们是不是就需要这个值把它转换成大写，再给它插入到我们的那个元素里面去。那现在你告诉我呀，这个帮是一个什么呢。是不啊，首先这个E很简单，是指令属性所在的什么标签对象，这个很简单，关键是这个班是谁。包含指令相关啊，相关信息的对象对吧？呃，这个相关信息有这么多，而我们现在需要的是谁。Value。能不能懂，那也就是说我在这个里面的干嘛呢，大家看啊，我是不是要去给他指定文本内容叫T的什么。

等于什么呢？帮定点行吗？不行，我要把它转成什么大写点，To Apple case。是不是大写关键另外两个是不是还没人解析啊？好，下面这一个做法类似，但是我会把它写成局部的指令，局部指令呢是通过配置来完成的。在这里写一个什么样的配置呢？叫directive，因为有可能去写多个。啊，首先指定的是我的指令的名称。是不是要这个能看到吧，好接着冒号。右边是解析函数，其实就是这个。

啊，其实跟他一样的啊，所以说跟他也类似，只要我稍微改一点东西就行，改个什么呢，这个。转换小写嘛。有没有看到好这个地方，还有一点缩头这一个，诶我看下请求外怎么加个单引号呢。是不是这属性名吧。是不是应该这么写吗？他不对呀。怎么回事？为什么突问？为什么会这？因为现在有一个特殊字符在这里。你想想看，对象里面的属性名是不是有的时候要用单引号来去给它包围起来，平常我们尽量不用单引号，其实本质上都有单引号或者双引号，因为我们的属性名都字符串嘛。对吧，但是在语言的设计者看来，平常的时候能不写单引号就不写了，对不对，麻烦。

但有的时候你不写还不行，比如说我们现在这种情况，这个杠你要不写那不行，譬如说我这边空格，你觉得不写能行吗。那更不行。它要把它看成两个端子来是不是啊，OK，这个需要去知道啊。好，其实我还可以写成这个样子。挺奇怪的是吧，啊，这以前咱可能不加单引号的是吧，这不ES6的简洁语法吗。能看到吧，好啊OK，那下面啊，下面我们这是一个什么指令，注册什么局部指令啊，局部指令是不是就在当前这一个实令管理的区域内有效，那也就是说只在这个范围内有效。那也就是说他应该可以用。

对吧，但下面这个了。不可用，我们来看一下。哦，是不是写错了呀？看一下lower case，把它text，把它拿过来看C。没错嘛。哪个啊，这个写错了是吗？啊叫不对是吧。看一下。OK吧？是不是都变成小写了，但是最后一个了。他不是还是说找不到这个指令的解析啊，为什么，因为我是局部的嘛。对不局部直例子对谁有效，大家看看子在是不是这一个范围内的有效。能懂吧，在当前啊，VM管理的范围对吧，它是不是有管理范围了。

管理范围内有效。好，这是这样一个事啊，这里面可能哪一点是这个帮你的理解。其他的应该来说啊，并不算特别难。好，这样我们就把它的内子令和自定指令都跟大家说了一下。