vue-cli的使用

最新推荐文章于 2024-08-16 19:53:07 发布

GastonPeng

最新推荐文章于 2024-08-16 19:53:07 发布

阅读量705

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36421955/article/details/81022365

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

注意文件名要对应起来old1对应old1

npm run start(npm dev)命令在cmd中执行会启动todolist项目

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-cli的简介与使用</title>
  <script src="./Vue.js"></script>
</head>
<body>
<!--
脚手架工具,项目开发
安装和使用官方地址:https://cn.vuejs.org/
学习---教程---安装--命令行工具CLI

--全局安装 vue-cli
npm install --global vue-cli
--创建一个基于webpack模板的新项目
vue init webpack my-project
--安装依赖,走你
cd my-project
npm run dev

widows打开命令行(前提是本机要有npm 安装npm参照我博客教程)

好了如果你按顺序操作了那接下来的学习就到了命令生成的todoList项目中做了
-->
	<div id="root">
      <div>
	    <input v-model="inputValue"/>
		<button @click="clickSubmit">提交</button>
	  </div>
	  <ul>
		<todo-item v-for="(item,index) of list" 
		:key="index" 
		:content="item"
		:index="index"
		@delete="handleDelete"
		>
		</todo-item>
	  </ul>
	</div>
	<script>
      /*  Vue.component('todo-item',{
	      props: ['content'],/*表示组件从外边接收一个数据
		  template: '<li>hello</li>'
		}) */
		var TodoItem={
		  props: ['content','index'],/*表示组件从外边接收一个数据*/
		  template:'<li @click="handleClick">{{content}}</li>',
		  methods:{
		    handleClick:function(){
			  this.$emit('delete',this.index)
			}
		  }
		}

		new Vue({         
		   el: "#root",
		   components:{
		     'todo-item':TodoItem
		   },
		   data:{
		     inputValue:'',
			 list:[]
		   },
		   methods:{
		     clickSubmit:function(){
			   this.list.push(this.inputValue);/*在list里添加数据*/
			   this.inputValue='';
			 },
			 handleDelete:function(index){
			   this.list.splice(index,2)/*从list里删除包括index在内的及以后的两条数据*/
			 }
		   }
		})
	</script>
</body>
</html>

todolist项目：

代码贴上：

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import TodoList from './TodoList'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { TodoList },
  template: '<TodoList/>'
})

TodoList-old1.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
 },
 data (){
   return{
    inputValue:'',
	list:[]
   }
 },
 methods:{
   handleSubmit(){
     this.list.push(this.inputValue)
	 this.inputValue = ''
   },
   handleDelete(index){
     this.list.splice(this.index,1)
   }
 }
}
</script>

<style>
#app {
  
}
</style>

TodoList.vue:

<template>
  <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>
</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>

<style>
#app {
  
}
</style>

TodoItem-old1.vue:

<template>
  <li @click="handleDelete">{{content}}</li>
</template>

<script>
export default {
  props: ['content','index'],
  methods:{
    handleDelete(){
	 this.$emit('delete',this.index)
	}
  }
}
</script>

<style scoped>

</style>

TodoItem.vue:

<template>
  <li class="item" @click="handleDelete">{{content}}</li>
</template>

<script>
export default {
  props: ['content','index'],
  methods:{
    handleDelete(){
	 this.$emit('delete',this.index)
	}
  }
}
</script>
<!--scoped作用域是当前组件 经常加scoped-->
<style scoped>
  .item{
    color:red;
  }
</style>