vue中的 data(){}、components:{}、methods:{}、props:{}的使用方法
data(){}定义属性( 返回一个对象)components:{}(组件 要注册的组件)methods:{}(事件处理点击函数所放置的位置)props:{}(父传子 数据传递)应用App.vue中<template><ul><my-li v-for="(item,index...
·
- 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"}
]
更多推荐
已为社区贡献6条内容
所有评论(0)