Vue学习第四天（vue基础）

总结一下前面的知识点：

vue实例化对象中：

1.先引包  <script type = "text/javascript" src="./node_modules/vue/dist/vue.js"></script>

2.new 一个vue实例对象：el后面对应#app。data函数要返回一个对象，里面的数据单项绑定到模版的插值中。template绑定模版

3.组件的使用要声明然后挂载最后再使用。声明要新建一个组件对象，挂载再components中，这里可以挂载多个组件。使用再vue的template中以<AppName/>这种方式使用。

练习的时候写完代码发现页面没有显示，原因是因为忘记写<div id='app'>没有把div和vue对象绑定上。

挂载多个组件的效果：

 

效果：

 

 

这些是局部组件，全局组建的创建如下：注意是component没有s

Vue.component('name',{template:...})

使用的时候直接插入<name/>就可以，例如插入在头部组件中：

 

 效果：

 

 组件通信问题：目的是为了解决组件之间的传值。

子组件获取父组件的值：子组件中使用props获取。

        Vue.component('Child',{
            template:"\
            <div>\
                <p>>我是一个子组件</p>\
                <input type = 'text' v-model='childData' /> \
            </div>\
            ",
            props:['childData']
        });    

　　这里props中的childData将会显示在text中，childData是从父组件那里传过来：

        Vue.component('Parent',{
            data(){
                return {
                    msg:"父组件中的数据"
                    }
            },  
            template:"<div>\
            <p>我是一个父组件</p>\
            <Child :childData='msg'/>\
            </div>"
        });

　　父组件中通过<组件名:变量名=‘内容’/>这种方式向子组件传递内容。这里有个重要事就是：之前我一直以为template后面用的单引号，写上单引号就报错，所以才写成这样，后来知道不是单引号，是反引号，加入反引号之后就不用每次在行末添加一个\号了。

　　传递消息这里说实话理解的不是很懂，先跳过这里到时候看几个例子再去理解这个地方。

　　slot插槽。slot作为承载分发内容的出口

 

 

效果

 

 因为定义Vbtn的时候有：