vue 实例(初学笔记)

vue

(题外话,看了一下vue的技术文档,初写了几个例子程序,我竟深深喜欢上了vue)

 ( 用vue语法写好的html,直接拖到浏览器后就可以运行)

一、例程简介:在页面某div上显示自定义的组件信息(这里是思路,详细代码看https://www.cnblogs.com/zhangxj/p/11283918.html)

二、使用过程:

1.注册(定义)组件:(作用:接收传入数据并显示出来,但具体显示的位置在创建vue实例中决定)

      Vue.component({

         \'test-component\', // 组件名,在页面可以通过<test-component></test-component>标签来引用,命名建议:字母全小写且必须包含一个连字符。

          {

              props:[\'mydata\'],

              template:"<li>{{mydata.text}}</li>"

            }

      })

     1). 定义了一个接口props[\'mydata\'],mydata就是传入参数,使用这个组件时,只要给mydata绑定对象后,就可以在组件内部使用了;

     2). 定义template,这里可以显示所传入的参数mydata:<li>{{mydata.text}}</li> .(注:mydata是一个对象,并且这个对象必须包含text属性)。

2.创建vue实例,在某div上显示自定义的组件:

    每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

    var vm =new Vue({

        // 选项

        el:\'#div-id\',  // 某div的id值

        data:{

           // 给页面或组件准备数据

          message:\'Hello\',

          itemList:[

                { id:100 , text :"this is my item1"} ,

                { id:201 , text :"this is my item2"} ,

                { id:300 , text :"this is my item3"} ,

           ]

         }

     })

   3. 写页面html代码:

       <div id=\'div-id\'>

             {{message}}

    <test-component

                 v-for=\'item in itemList\'

                 v-bind:mydata=\'item\'

                 v-bind:key=\'item.id\'

              ></test-component>

       </div>

     OK,这里自定义组件和使用介绍完毕。

     原理:vue实例给组件准备数据并在页面合适的位置传给组件。

以上是 vue 实例(初学笔记) 的全部内容, 来源链接: utcz.com/z/376925.html

回到顶部