vue组件讲解(is属性的用法)模板标签替换操作
vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题,譬如ul里面要接上li的标签,引入is的属性后,你完全可以写成这样
<div class="language-html"> <ul> <li is="row"></li> </ul> </div>
这样会保证dom结构在浏览器的正常渲染,尽量避免在不正确的结构中直接使用组件
<script> Vue.component('row', { template: '<li>this is a row</li>' }) </script>
之后就要在index.js中将homedatas.js(拿数据的js)共享出去,使页面能拿到数据,
以下是index.js的代码:
以上就是获取数据的步骤,之后就是在页面中拿到这个获取到的数据:
首当其冲不可少的就是引用,引用vuex和引用组件:
用这个方式在页面中引用组件,然后再自定义标签中将数据传递给组件:
scrolldatas是一个数组,之后便是循环遍历这个数组中的元素,数组中的值就能展示在页面了,页面元素会随着数组元素的改变而改变:
之后就是调用函数,调用函数中传入参数,这个参数现在的值不是最开始var的初始值,而是后来测试函数中因为符合测试函数的条件后来赋给的值(因为window.onload直到页面加载才会执行):
所以经过一会说那个的操作,只要在获取数据的地方修改值,页面效果就会随之改变,不需要再组件中修改任何东西:
以上这篇vue组件讲解(is属性的用法)模板标签替换操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持来客网。