Vue-TodoList(组件化改造)

1. Vue组件是什么

  • 组件(Component)是 Vue.js 最强大的功能之一

  • 组件可以扩展 HTML 元素,封装可重用的代码,可以将组件看作自定义的HTML元素

  • 组件系统让我们可以用独立可复用的小组件来构建大型应用

2. 如何使用全局组件

(1)在script标签里注册全局组件
(2) 在html文本里创建组件实例
(3)修改组件的定义,使之能够接受一个 prop
(4)组件实例使用 v-bind 指令,将数据传到循环输出的每个组件中
(5)组件模板用插值表达式进行引用渲染
(html里的组件标签,最终会被定义好的组件里的模板内容替换掉)

<body>
    <div id="todo">
        <input type="text" v-model="inputValue">
        <button v-on:click="handleClickBtn">commitbutton>
        
        
        
        <todo-item v-bind:content="item"
                   v-for="item in list">
        todo-item>
    div>

    <script>
        //1.定义一个全局组件todo-item
         Vue.component('todo-item',{
             props:['content'],
             template:'
  • {{content}}
  • '
    }) // 3. todo-item需要在props里对content进行接收,以便使用父组件传递过来的数据 // 4. 接收数据后,再在模板里用插值表达式进行引用渲染,html里的组件标签,最终会被定义好的组件里的模板内容替换掉 var vm = new Vue({ el:'#todo', data:{ list:[], inputValue:'' }, methods: { handleClickBtn(){ // alert(this.inputValue) this.list.push(this.inputValue) this.inputValue='' } }, })
    script> body>

    3. 如何使用全局组件

    (1)在script标签里定义一个局部组件
    (2) 在vue实例里,通过components对象,注册局部组件(只在父模板可用)
    (3)在html文本里插入组件标签以使用局部组件

    <body>
        <div id="todo">
            <input type="text" v-model="inputValue">
            <button v-on:click="handleClickBtn">commitbutton>
            
             
            <todo-item v-bind:content="item"
                       v-for="item in list">
            todo-item>
        div>
    
        <script>
            // 定义一个局部组件todo-item
            var TodoItem = {
                props:['content'],
                template:'
  • {{content}}
  • '
    } // 在vue实例里,通过components对象,注册todo-item var vm = new Vue({ el:'#todo', components:{ TodoItem:TodoItem }, data:{ list:[], inputValue:'' }, methods: { handleClickBtn(){ // alert(this.inputValue) this.list.push(this.inputValue) this.inputValue='' } }, })
    script> body>

    你可能感兴趣的:(Vue)