Vue入门知识点—初识vue

本博客所有内容为博主学习之时自整理，算不上什么干货，如有错误欢迎大家批评指正

Vue介绍

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动
（附上教程链接——Vue.js )

注：在学习Vue之前你最好已经有HTML，CSS，JavaScript等中级前端知识

Vue构造器属性与方法

<div id="app">
    <!--模板渲染{{}}-->
    {{text}}
</div>

<script type="text/javascript" src="vue.js"></script>
<script>
new Vue=({
    el:"#app",//挂载元素
        data:{
            text:'哈哈哈'
        }
})
</script>

实现效果：

Vue-组件

什么是组件？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

注册一个全局组件

组件的注册，分为全局注册，和局部注册,全局注册必须在实例之前

要注册一个全局组件，你可以使用 Vue.component(tagName, options)

Vue.component('my-header',{
        template:'<h1><a href="#">超文本连接{{name}}</a></h1>',
        data:function () {
            return{
                name:'百度'
            }
        }
    })

组件在注册之后，便可以在父实例的模块中以自定义元素 的形式使用。要确保在初始化根实例 之前 注册了组件：

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

注册一个局部组件

var MyFootChild={
        template:'<h1><a href="#">我是底部的子组件</a></h1>'
    }
    var MyFooter={
        template:'<h1><my-footer-child></my-footer-child><a href="#">我是底部的链接</a></h1>',
        components:{
            'my-footer-child':MyFootChild
        }
    }
    new Vue({
        el:"#app",//挂载元素
        data:{

        },
        components:{
            'my-footer':MyFooter
        }
    })

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

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

效果：