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属性的用法)模板标签替换操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持来客网。


相关链接