day05/上午/085-尚硅谷-尚融宝-数据绑定指令

好，第一个例子了解之后呢，我们再来看一下笔记，笔记当中呢，有一个补充，就是呢，上面这块呢，我们写的是data message，然后但是呢，你也可以有另外一种写法，另外一种写法呢，显然比就是前面这种写法呢，要这个麻烦一些，对不对啊，所以这个大家了解一下就可以了，当然后面项目的过程当中呢，可能我们要使用这种写法了，那后面我们项目开发的过程当中再说啊，那现在我们就掌握这个第一种就可以了，好，然后接下来呢，我们来看一下这个啊。第二个例子，第二例子呢，我们来看叫数据绑定指令啊，刚才我们写的也叫数据绑定，但是我们呢啊，使用的并不是指令，使用的是一个差值表达式的语法，叫双双大括号，那接下来呢，我们用另一种方式叫做数据绑定指令来写第二个例子，好，我们先把这个名字复制一下。啊，在这个地方呢，我们新建一个文件叫零二数据绑定指定，当然了整个的这个流程呢，和前面这块是一样的，所以呢，我们还是需要把这个嗯6.gs呢给它引进来，然后接下来呢，我们来script啊，我们来创建一个new VE对吧？啊然后接下来呢，在这个viewe里面呢，我们写一个EL，然后呢是井号APP对吧，这是一个固定的一个模式啊，就是刚开始，然后接下来呢，上面这块我们肯定还要写一个div，然后呢这块写一个ID，然后呢这块等于APP对不对啊，所以这个是一个基本的结构了，相当于那么为了后面这个编程方便的，我把这个数据绑定指令这块啊，给它复制一下，复制成一个叫DEMO吧。啊所以未来我在创建新文件的时候呢，我就直接把这DEMO复制一下，这样的话呢，就省去了前面我们写这些基本。

本结构的这样的一个过程啊好，然后接下来呢，我们来看一下这个数据绑定指令这块吧，那首先呢，我现在有一个需求，什么样的一个需求呢？就是。

我呢想在呃，我们的页面当中呢，写一个A标签。然后A标签里面呢，它是有内容的，比如说这款东写上硅谷，然后这块呢，我写HTTP对吧，呃3W点艾特硅谷点com，好，那现在呢，我其实是想把这个，呃上硅谷的名字，还有上会谷的这网址啊，比如说我有一个企业网页的一个网站，里面有很多企业的信息，那这些企业的信息呢，包括企业的名称啊，企业的网址啊，企业的电话号码呀等等等等，好，我就想把这个东西从数据库里取出来，从数据库里取出来之后呢，那我们到前端渲染了之后呢，就首先第一个步骤，你要把它放在data里面。所以呢，那就说明未来我们的应用程序应该是这样的，应该先从数据库当中把这个数据从从它取出来，然后作为一个后端接口返回，然后前端呢，我们去调用后端接口，调用完后端接口之后呢，我们就可以把这个数据呢放在data里，那刚才我说的这个过程具体怎么去做呢？后面我们再说，现在我们假设数据已经放在贝塔里了啊，那所以呢，这块就有。

哈，然后这块呢，就是上对吧，好，那现在呢，我想把company。Company对吧，对吧，我想把这个company展示到这个位置，那这个比较好办，我们刚才已经学过了。对吧，这样的话呢，我们的这个上硅谷呢，就展示到这儿了，所以呢，我们来看一下啊。第二个例子啊，我们右键看访问一下，大家看是不是上硅谷这个企业的名字已经展示在这了，那接下来呢，我想把这个地址啊，也通过一个动态的数据的形式呢，给它定义出来，所以呢，在这个位置呢，我就写一个site，这是上回谷的网站啊，啊site等于什么呢？S等于这个。

对吧，啊定义在这，那么言外之意呢，就是我想在这个地方展示这个网址，那么大家可能第一想到的就是在这个地方是不是写个双大括号，然后把sat写在这个地方，动态的把它取出来嘛，因为跟它原理一样嘛，那我们来看一下，大家看我把鼠标放在这之后，我一点。是不对呀，啊，这个其实就是。这set这是啥？这个是双大括号的一个URL编码，所以这个其实是大括号，大括号，这是结束大括号，结束大括号，然后呢，我们来看一下它的这个。这个源代码F12，你看一下它渲染出来是什么，把鼠标放在这个地方，点击这个箭头啊，然后呢，让它变成蓝色的，然后把鼠标放在这个地方点一下，好，它又定位过来了，那你会发现这个HF这个属性里面，它实际上这个解析出来的是这么一个地址，也就是说他把他把他把我们刚才啊想要解析出来，想要动态渲染出来的内容呢，当做一个字符串直接给解析出来了，那这样的话是不行的啊，那说明呢啊，像这种差值表达式的方式，只能用在HTML的这种文本的位置，不能用在属性的位置啊，那属性这个地方我们怎么处理呢？我们就要用到数据绑定指令啊，使用数据绑定指令，然后渲染HTML的动态属性，好，什么叫做数据绑定指令呢？

就是在这个位置呢，我们就不能写HF了，前面呢，我们要告诉我们的，呃，浏览器的渲染引擎，这是一个动态的，你要通过数据绑定的形式把它渲染出来，不能直接解析它，那怎么办呢？在前面我们加一个叫做V-band，这个是view给我们提供的一个扩展的指令啊，在原有的HTML属性的基础上，你只要前面加上一个V杠半的，那么这个属性呢，就变成了一个动态属性了，那所以呢，在后面这地方呢，我们其实是不需要写大括号的，直接写S就行了，因为你在这个地方V-B已经告诉HTML渲染引擎它是一个动态的，所以呢，它就会把这个动态的内容从这个地方给你取出来啊，所以大家再来看。

你看这个HF这个后面是不是已经变成动态的我们上硅谷的网址了啊，所以我们再点击一下，这样的话呢，就会做一个这个页面跳转来到我们这个上硅谷的网站当中来，对不对？好然后这块呢，就是我们要了解的这个动态指令了，那接下来呢，我们再对它做一个补充。

就是我们所有的这个动态指令啊，这个V半的呀啊，是可以写在几乎所有的属性前面的，只要你这个属性后面的值，它是想是动态获取就可以啊就可以，然后呢，你要提前呢，把你要动态定义的值呢，放在这个data里，然后接下来呢，我们在页面当中呢，就可以用微班的冒号的形式啊去渲染它，那接下来呢，还有一个需要说的呢，就是有一个简写的形式，尾版的啊，当我们把这个呃属性的前面加上一个冒号的时候，实际上呢，和V半的冒号是相同的意思意思啊，那所以我们在这个地方我再给它。复制一份，那这个地方呢，我这样写好，他们两个完全一样啊，只不过这个没有微啊，只不过后面这个是上面这个的简写形式，这个大家了解好，我们后面用的时候肯定是用后面这个了，就是简写形式，所以大家未来养成一个习惯。

一旦你在某一个HTML属性的前面看到一个冒号的话，那就意味着后面这块又不是一个字符串了，它是一个动态的数据模型的值了。啊好，那这是我们的第二个例子，叫数据绑定指令。