首先,进入工程的目录,使用命令启动该工程 npm run start / npm run dev [可以参考工程目录下的 package.json文件]
(其中, x.vue 文件就是一个单文件组件)
下一步,更改单文件组件 x.vue.
注意,Vue语法要求,.vue文件中,<template>标签中,只能包含一个根元素。
首先将template 中的结构写上:
<template>
<div>
<div>
<input />
<button>提交</button>
</div>
<div>
<ul>
</ul>
</div>
</div>
</template>
然后,进行数据绑定:
其中,data 在 vue cli 中,作为一个组件,data 以函数的形式存在,不再像以前,以对象形式存在。函数的返回值,为具体的数据。
<script>
export default{
data () {
return {
inputValue: ''
}
}
}
</script>
数据绑定:
<template>
<div>
<div>
<input v-model='inputValue'/>
<button @click='handleSubmit'>提交</button>
</div>
<div>
<ul>
</ul>
</div>
</div>
</template>
<script>
export default{
data () {
return {
inputValue: '',
list: []
}
},
methods:{
handleSubmit (){
this.list.push(this.inputValue);
this.inputValue = '';
}
}
}
</script>
ul li 组件 拆分
不同与之前,Vue cli 拆分组件: 在 src 目录下 components 下使用 xxx.vue
引用该组件:
<template>
<div>
<div>
<input v-model='inputValue'/>
<button @click='handleSubmit'>提交</button>
</div>
<div>
<ul>
<todo-item></todo-item>
</ul>
</div>
</div>
</template>
<script>
import TodoItem from './components/Todoitem'
export default{
// 局部组件
components:{
'todo-item': TodoItem
},
data () {
return {
inputValue: '',
list: []
}
},
methods:{
handleSubmit (){
this.list.push(this.inputValue);
this.inputValue = '';
}
}
}
</script>
todo-list 向子组件传值
<template>
<div>
<div>
<input v-model='inputValue'/>
<button @click='handleSubmit'>提交</button>
</div>
<div>
<ul>
<todo-item
v-for='(item,index) of list'
:content="item"
></todo-item>
</ul>
</div>
</div>
</template>
<script>
import TodoItem from './components/Todoitem'
export default{
// 局部组件
components:{
'todo-item': TodoItem
},
data () {
return {
inputValue: '',
list: []
}
},
methods:{
handleSubmit (){
this.list.push(this.inputValue);
this.inputValue = '';
}
}
}
</script>
子组件中,申明使用的属性,并使用插值表达式使用:
<template>
<li>{{content}}</li>
</template>
<script>
export default {
props: ['content']
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
删除子组件:
子组件文件:
<template>
<li @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
props: ['content', 'index'],
methods: {
handleDelete () {
this.$emit('delete',this.index);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
父组件文件:
<template>
<div>
<div>
<input v-model='inputValue'/>
<button @click='handleSubmit'>提交</button>
</div>
<div>
<ul>
<todo-item
v-for='(item,index) of list'
:key="item"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
</div>
</template>
<script>
import TodoItem from './components/Todoitem'
export default{
// 局部组件
components:{
'todo-item': TodoItem
},
data () {
return {
inputValue: '',
list: []
}
},
methods:{
handleSubmit (){
this.list.push(this.inputValue);
this.inputValue = '';
},
handleDelete (index){
this.list.splice(index, 1);
}
}
}
</script>