vue组件学习

//组件制作
// 引入vue
//1 制作html静态内容script type=”text/x-template”,填入虚拟数据用template关联
//2 在props中限定虚拟数据
//3 在正式代码中调用组件,输入实际内容
//4 在组件里使用computed来改变输入内容成为自己希望达成的样子
//5 把html静态内容的数据替换为变量

html调用

 <div id = "app">
     <tmain :title="title" :data="data"></tmain>
 </div>

模板

<script type="text/x-template" id="test_main">
  <table>
    <tr>
    <th>{{title}}</th>
    </tr>
    <tr>
    <td v-for="i in data">{{i}}</td>
    </tr>
  </table>
</script>

组件

    Vue.component('tmain',{
        template:"#test_main",
        props:{
            data:Array,//制定类型
            title:null,
        },
    })

内容

    var app = new Vue({
        el:"#app",
        data:{
            title:'这是一个标题',
            data:['1','2'],
        },
    })
赞 (2)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址