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代码：

　　　　<test-component

v-for=\'item in itemList\'

v-bind:mydata=\'item\'

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

></test-component>

</div>

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

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