学习vue

一，声明模板的时候需要新建示例

如下代码

<div id="app">
      <my></my>
</div>

 Vue.component("my",{
      template:"<p>name</p>",
 });

这样写没有结果

js代码修改为

 Vue.component("my",{
      template:"<p>name</p>",
  });
 var app=new Vue({
      el:"#app"
  });

这样才行

另外注意，new Vue写在下面

二、定义模板的时候不能使用小写加大写

如，下列代码出错

    Vue.component("myComponent",{
        template:"<p>name</p>",
    });
    var app=new Vue({
        el:"#app"
    });

需要改为 my成component

补充：v-on事件也不能用大写(⊙﹏⊙)b

三、传递数据的时候的正确写法

 var data={name:"meng"};
    Vue.component("my",{
        template:"<p>{{name}}</p>",
        data:function () {
            return data;
        }
    });
    var app=new Vue({
        el:"#app"
    });

如果是局部组件

    var app4Data = {name: "meng"};
    var app4Component = {
        template: "<p>{{name}}</p>",
        data:function () {
            return app4Data
        }
    };
    new Vue({
        el: "#app-4",
        components:{
            'app4-component':app4Component
        }
    });

注意data的位置，不是在new Vue里面。。

如果是绑定的数据

<div id="app-5">
    <input type="text" v-model="msg">
    <app5-component :message="msg"></app5-component>
</div>

    var app5Data={msg:"meng"};
    var app5Component={
        props: ["message"],
        template: "<p>{{message}}</p>"
    };
    new Vue({
        el: "#app-5",
        components:{
            'app5-component':app5Component
        },
        data:function () {
            return app5Data
        }
    });

这里记下鄙见，单说局部组件，单纯的数据显示的时候，只能调用自身的数据，所以数据写在组件的里面。而数据绑定的时候，数据由于是绑定才得到的，绑定到哪了呢？回答当然是新对象里面，所以数据就存放到新对象里面去了(new Vue)

message和v-bind:message(:message)的区别

　　官网这样说到，

我理解呢是这样的，

　　message只是单纯的数据传递，给什么是什么。

　　:message绑定数据可以修改，给什么得看人家怎么处理这个后在接受这个。

四、定义模板的时候只能有一个父组件

错误代码:

var app8Component = {
        props: ['content'],
        template: "<p>name:{{content.name}}</p><span>age:{{content.age}}</span>"
    };

页面只显示name

正确代码：

var app8Component = {
        props: ['content'],
        template: "<div><p>name:{{content.name}}</p><span>age:{{content.age}}</span></div>"
    };