メインファイルのディレクトリ：
ファイルのコード：
ルート・インスタンスは、初期化VUE：
<!--index.html，网站入口页面，和main.jsp组成一套.vue文件，包含--><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>todolist</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>// main.js
import Vue from 'vue'
import TodoList from './TodolList' //引用第一个父组件
//import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app', //根节点，挂载点
//router,
components: { TodoList }, //组件
template: '<TodoList/>' //模板就是组件
})
最初.vueテンプレートファイルは、最初の親コンポーネントであります
<!--TodoItem.vue-->
<template>
<div>
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from './components/TodoItem' //引用子组件
export default {
components: {
'todo-item': TodoItem
},
//在vue-cli中data是一个函数
// data: function () {
// return {
// inputValue: '',
// }
// },
//ES6中的简写
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleSubmit() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete(index) {
this.list.splice(index, 1)
}
}
}
</script>
<style>
</style>
第.vueテンプレートファイルには、親コンポーネント下のサブコンポーネントであります
<!--TodoItem-->
<template>
<li class='item' @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 -->
<!--scoped 该样式的作用域只在这个组件中,去掉scoped则为全局样式-->
<style scoped>
.item={
color: red
}
</style>
ページ出力：
あなたは、制御することができます02ムークラスのネットワークで--Vueを「vue.js2.5入門」コンポーネントを 実現todolistの
