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实例给组件准备数据并在页面合适的位置传给组件。

转载于:https://www.cnblogs.com/zhangxj/p/11285812.html