Vue.js 学习

1.组件

全局组件注册，我把它理解为定义，定义的组件分为全局注册与局部注册，可以理解为静态变量与成员变量。

全局注册

<script>
//Vue.component(tagName,options)
//for example
Vue.compoent('my-component',template:'<button>my component</button>')
</script>

局部注册

<script>

var mycomponent=Vue.extent({template:'<div>my local component!</div>'})
new Vue(
{components:{'my-components':mycomponent}
}
)
</script>

使用data

<script>//使用data只有一个需要注意的地方就是data必须为函数
Vue.component('my-component-containsdata',{tempalte:'<button v-on:click="counter+=1">
{{counter}}</button>',data:function()
{
return counter;0
}})
</script

prop

父组件传递数据给子组件，也就是传递给template中的元素。

<script>
Vue.component('my-com-prop',{template:'<button></button>',props:['message']})
</script>

//for example

<my-com-prop> message="hello"></my-com-prop>

v-bind动态绑定数据

</script>

new Vue({el: '#app1', data: {arrys1: [ 'first',  'second']}})

</script>

<my-com-prop message="arrys1"></my-com-prop>

如果想与字面量分开需要使用v-bind