vue cli 的基础使用

vue cli的安装教程见官网安装

创建项目：vue init webpack demo（demo为项目名）

查看vue列表：vue

启动项目：npm run dev

其中node_modules文件夹，这里放的就是所有依赖的模块，如何将npm切换至cnpm

文件较大，也比较多，基本都不上传这个文件

App.vue,所有自己写的组件都在这个组件之上运行，router是路由文件夹，决定了页面的跳转规则

实例：

TodoItem组件

<!--TodoItem组件-->
<template>
	<li class="item"  @click="handleDelete">{{content}}</li>
</template>

<script>
export default {
	//接收父组件
	props:['content','index'],
	methods:{
		handleDelete(){
			//向父组件传递，触发事件
			this.$emit('delete',this.index)
		}
	}
}
</script>

//给样式增加了一个作用域，如果不加scope，就会作用于全局
<style scoped>
	.item{
		color:blue
	}
</style>

应用组件（template模板中只允许一个根目录）：

<template>
  <div >
    <div>
		<div>
			<input class="item" 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>
  </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){
			//删除父组件中对应index对应的一行的值
			this.list.splice(index,1)
		}
	}
}
</script>

<style>

</style>