上节课我们已经打造成了:
这样的写法,全部用[[ ]] 来替换。
但是发现依然没有「成功」 实现超链接跳转。
感觉就好像,这个[[i.link_url]] 并没有真正的数据进来一样。
其实这就是vue的一个特性,「动态绑定」。不绑定,那么dom的数据变量和bom的标签内属性就没啥关系,当然不会有真实数据。
那么要如何绑定?
很简单,在我们console里,人家已经给你提示了:
让我们给这个 属性href前面加个冒号的意思:
现在刷新页面 再看下:
发现可以「成功」跳转了
那么为什么小小的冒号,会有这么大功能呢?其实它就是 告诉浏览器,这个href属性,跟下面的Vue绑定了,它「罩」了。
而实际上,这个冒号只是一个简写,它的完整写法是:「v-bind:」
现在英文就是绑定的意思了,因为用的太多,所以开发者规定可以简写一个冒号代替。
现在页面成功了。我们来感受下动态绑定吧:
我们通过再控制台console,直接输入命令,来更改bom里面的数据all_links,看看页面上的超链接会不会同步受到影响。
输入这么一句:
这个div 就是我们的:
然后all_links就是说它内部的变量:all_links, pop(0)就是说 删除一个数据。
然后我们回车看看:
可以看到 数据被删除了,而且dom层的循环 也瞬间作出响应,删了一个超链接a标签。
我们现在学会了动态绑定,那么最后再抛出一个观念:「双向绑定」
相比较动态v-bind: 而言 双向绑定就是,如果我们改变dom层,那bom层的数据也会发生变化。
❝我们下节课,会设计一个搜索输入框。当用户输入查询关键字后,我们会用方法来实现筛选all_links的数据。这样页面上的a标签也会响应的作出改变。然后我也会用原始js来实现一次, 让大家看清楚 二种方法对于这个搜索功能的实现复杂度 差距有多大。 ❞