vue在java项目中的使用——局部组件和全局组件

数据驱动和组件化是vue的两个核心

数据驱动：实现数据的双向绑定，数据改变驱动视图自动更新，操作的是数据而不是dom节点

组件化开发：页面上每个独立的可视/可交互区域视为一个组件，每个组件对应一个工程目录，组件所需要的各种资源在这个目录下的就进维护，页面就成了组件的容器，它由组件来组成

组件分为全局组件和局部组件，他们在定义和使用上都存在着差别

全局组件用到的是 Vue.component(tagName,option)

局部组件用到的是components:{tagName:option},tagname是自定义的组件名称,option是组件构造器

组件的创建和注册：

1、Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器，而不是一个具体的组件实例

2、Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要旋绕的HTML

3、使用Vue.component()注册组件时，需要提供两个参数，第一个是组件的标签名，第二个是组件构造器

4、Vue.component()方法内部会调用组件构造器，创建一个组件实例

5、组件应该挂载到某个Vue实例下，否则不会生效。

全局组件：

全局组件：

<div id="myapp">
       <div>
           <input type="text" v-model="inputValue" >
           <button @click="handleSubmit">提交</button>
       </div>
       <ul>
           <todo-item v-for="(item,index) of list"
                      :key="index"
                      :content="item">
           </todo-item>
       </ul>
   </div>
<script type="text/javascript">
    Vue.component(
        'todo-item',
        {
            props :['content'],
            template: '<li>{{content}}</li>'
        }
    )
    var mvvm=new Vue({
        el: "#myapp",
        data: {
            inputValue: "hello",
            list: []
        },
        methods: {
            handleSubmit: function (){
            this.list.push(this.inputValue),
            this.inputValue=''
            }
        }
    })
</script>