vue的数据绑定和组件化

组件：就是自定义标签, 也是Vue的实例对象;

组件好处：就像工作分工，函数封装等

组件分为全局组件和局部组件；

全局组件，在Vue身上的组件，所有的vue挂载的元素内都可以使用；正是因为这一点，component的data必须是一个函数，绑定的变量都会去执行data函数，然后找data里的返回的对象的k，如果没有，就继续找computed里的看，

 1 <body>
 2     <div id="app">
 3       <my-component></my-component>
 4     </div>
 5     <div id='app1'>
 6       <my-component></my-component>
 7     </div>
 8 
 9     <script>
10     Vue.component('my-component',{
11         template:`<div>
12                  {{val1}}             //每次都会先找data函数里的值，如果没有找computed里的值
13             </div>`,
14             data:function(){
15                 console.log(111)               //先输出111，证明每个绑定的变量都会导致data执行，return出来一个新的值
16                 return {
17                     val:'hello world'
18                 }
19             },
20             computed:{
21                 val1:function(){
22                     console.log(222)            //再执行输出222，
23                     return '你是我的'
24                 }
25             },
26     })
27     var vm = new Vue({
28         el:'#app',
29     })
30     var vm1 = new Vue({
31         el:"#app1"
32     })
33     </script>