Vue.JS学习笔记

1、

<ul  id="example-1">
　　<li  v-for="item  in  items">
　　　　{{ item.message }}
　　</li>
</ul>

var  example1  =  new  Vue({
　　el: '#example-1',    //el中放 id 名
　　data:{
　　　　items:[
　　　　　　{message: 'Foo' },
　　　　　　{message: 'Bar' }
　　　　]
　　}
});

2、注册一个全局组件：Vue.component(tagName, options)。如：

<div  id="example">
　　<my-component></my-component>
</div>

var  Child = {
　　template:  '<div> A custom component! </div>'
}

//注册
Vue.component('my-component',{      //my-component：自定义元素

　　props:['message'],  //props的声明需要放在template前面   props可以使用实例中的变量赋值

　　//<my-component>将只在父模板可用
　　template:  '<button  v-on:click="counter +=1">{{counter}}</button>',        //模板
　　data:function(){    //data必须是函数
　　　　return {
　　　　　　counter:  0
　　　　}
　　}
});

//创建根实例
new Vue({
　　el:  '#example'
})