初学Vue

在script 中创建Vue的实例 

el: '#app',

el 代表的是 vue 实例负责的区域范围

data 代表的是 数据块  

接受function的是在methods中

 

1、原始写法

<div id="app">
    <input type="text"  v-model="inputValue"/>
    <button v-on:click="handleButtonClick">提交</button>

    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>

<script>

    var app = new Vue({

        el : '#app',

        data : {
            
            list:[],

            inputValue:''

        },

        methods:{

            handleButtonClick:function(){
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        }

    })

2、将这个常用的控件做成组件的形式，其他界面使用直接倒入组件即可，达到复用目的

做成组件的形式  重要的函数是 

 

v-bind   起到的作用是 与子组件进行通讯

Vue.component()   创建全局组件

props   接受来自父组件传递过来的内容

<div id="app">
    <input type="text"  v-model="inputValue"/>
    <button v-on:click="handleButtonClick">提交</button>

    <ul>
        <!-- <li v-for="item in list">{{item}}</li> -->
        <!-- v-bind  与子组件通讯 -->
        <todo-item v-bind:contet="item" v-for="item in list"></todo-item>
    </ul>
</div>

<script>

    //创建全局 组件的
    Vue.component("TodoItem",{
        //props 意思 是 从父组件中接收到内容
        props:['contet'],
        template: "<li>{{contet}}</li>"
    })

    var app = new Vue({

        el : '#app',

        data : {
            
            list:[],

            inputValue:''

        },

        methods:{

            handleButtonClick:function(){
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        }

    })

 

 

实现效果