vue中的 data(){}、components:{}、methods:{}、props:{}的使用方法

• data(){}定义属性 ( 返回一个对象)
• components:{}（组件 要注册的组件）
• methods:{} （事件处理 点击函数所放置的位置）
• props:{} （父传子 数据传递）

应用

App.vue中

    <template>
        <ul>
            <my-li v-for="(item,index) in data"
            :key="index"
            :title="item.name"></my-li>
        </ul>
    </template>
    <script>
        import data from "./data/data.json";
        import myLi from "./components/myli.vue";
        export default{
            data (){  //将接受的数据 变成访问其属性  方便后期的应用
                return {
                    data //  data:data可以简写成data
                }
            },
            components:{  // 注册的组件
                myLi
            }
        }
    </script>
    
myli.vue中

    <template
    @click="clickFn">
        <li>holle word</li>
    </template>
    <script>
        export default{
            methods：{
                clickFn(){
                    alert('hello!')
                }
            },
            props:{//父传子
                title:String  //所传递数据的类型
            }
        }
    </script>
    
data.json中

    [
        {"name":"zhangsan"},
        {"name":"lisi"}
    ]