vue的学习笔记_vue crud.rowedit-CSDN博客

本文链接：https://blog.csdn.net/IT_lukaifang/article/details/95354638

前端框架–vue的学习

vue的介绍

什么是vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进性框架 （说明）
通俗的来讲，vue就是一个已经搭建好的空屋，与单纯使用jQuery这种库比，可以更好地实现代码复用，减少工作量
在学习中，我们没必要一上来就搞懂Vue的每一个部件和功能，先从核心功能开始学习，逐渐扩展。同时，在使用中，我们也没有必要把全部件能都拿出来，需要什么用什么就是了，而且也可以把Vue很方便的与其它已有项目或框架相结合。

vue.js下载

下载地址：https://vuejs.org/js/vue.js

引入vue.js

创建一个web工程，然后引入下载的工程版的vue.js
在这里插入图片描述
在头部引入此js：

<script type="text/javascript" src="vue.js" ></script>

vue的基础语法

vue的实例、挂载点和模板：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root"><!--挂载点（el属性所对应的dom节点）-->
			hello,world!
			{{msg}}
			<h1>hello {{msg}}</h1>
		</div>
		<script>
			new Vue({//此处创建一个vue的实例
				el:"#root",//参数1
				template:"<h1>hello {{msg}}</h1>",//参数2
				data:{//参数3
					msg:"hey!"
				}
			})
		</script>
	</body>
</html>

上面的代码便是一个vue的实例，当中有三个参数：
参数一：el参数的值表示接管哪个dom元素（绑定），vue只会管理挂载点的内容，挂载点外的内容不管
参数二（模板）：挂载点里面的内容可以放在这个地方，挂载点内部的内容被称为模板内容（模板一般写在挂载点的内部）
参数三：data是用来放数据的，在元素中使用{{xxx}}进行接收
vue的实例里面通过el绑定挂载点，通过模板和数据生成挂载点所需要展示的数据

vue实例中的数据、事件和方法

数据：

vue里的“data”属性就是数据项，在dom中使用下面几种方式接收数据：
①“插值表达式”—{{xxx}} 接收数据
②在模板标签里面使用v-text属性—v-text=“xxx” 接收数据（只接收文字，有标签会被转义为文字）
③在模板标签里面使用v-html属性—v-html=“xxx” 接收数据（接收带标签的文字，有标签会带标签属性输出文字）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" v-text="msg"><!--此时输出<h1>hello</h1>-->
			<!--hello,world!
			{{msg}}
			<h1>hello {{msg}}</h1>-->
		</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					msg:"<h1>hello</h1>"
				}
			})
		</script>
	</body>
</html>

添加事件—模板指令v-on：

可以在dom上面添加事件，使用模板指令v-on属性（可简写为@），当值为click的时候便是点击事件，里面写函数名
再在vue实例中使用methods参数构建点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" v-on:click="handleClick">
			{{msg}}
		</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					msg:"hello"
				},
				methods:{
					handleClick:function(){
						alert(123)
					}
				}
			})
		</script>
	</body>
</html>

此时，点击hello就可以弹出“123”

方法：

函数中this的用法：
当在函数内使用：“this”关键字的时候，指的是调用data内的元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" v-on:click="handleClick">
			{{msg}}
		</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					msg:"hello"
				},
				methods:{
					handleClick:function(){
						this.msg="lkf"//此时，点击时间触发后，挂载点就会变成lkf
					}
				}
			})
		</script>
	</body>
</html>

可见~ Vue的理念从原本的面向dom编程转变为面向数据编程了。

Vue的属性绑定和双向数据绑定

mvvm的开发模式

属性绑定—模板指令v-bind：

当我们需要在标签上添加title的时候，通常：

<div title="zheshige title"> hello，world~ </div>

但是这样只能写死，因此，在Vue里面可以使用模板指令：v-bind（可简写为冒号） 进行属性绑定：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" v-on:click="handleClick" v-bind:title="msg2"><!--这样就实现了数据与属性的绑定-->
			{{msg}}
		</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					msg:"hello",
					msg2:"zhecaishi title!"
				},
				methods:{
					handleClick:function(){
						this.msg="lkf"
					}
				}
			})
		</script>
	</body>
</html>

这样，就可以将data里面的数据与属性进行绑定实现可变~

不难发现：模板指令的等号后面跟的内容就不再是普通的字符串了~而是一个js的表达式
既然这个是一个js表达式，也就说明支持字符串与数据的拼接：

<div id="root" v-on:click="handleClick" v-bind:title="'qianzhui' + msg2">
    			{{msg}}
</div>

双向数据绑定—模板指令v-model：

之前的都是单向的数据绑定，即dom的东西来源于数据data。
Vue提供给我们了非常方便的“双向绑定”，即使用模板指令v-model实现双向数据绑定：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" v-on:click="handleClick" v-bind:title="'qianzhui' + msg2">
    			{{msg}}
    			<input v-model="msg3" /><!--在输入框加上v-model跟data中的元素进行绑定，实现双向数据绑定-->
    			<div>{{msg3}}</div>
    		</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					msg:"hello",
					msg2:"zhecaishi title!",
					msg3:"abcd"
				},
				methods:{
					handleClick:function(){
						this.msg="lkf"
					}
				}
			})
		</script>
	</body>
</html>

双向绑定成功后。输入框改变的时候下面的内容也会随之改变：
在这里插入图片描述

计算属性和侦听器

计算属性：
Vue实例中有一个专门用来计算数据的属性：计算属性—computed
此属性用来对data的数据进行计算并将结果返回（返回的结果可以用差值表达式接收）
特征：
当使用computed内的元素时，默认调用上一次的缓存中的值，只有当它所依赖的数据发生变化的时候，它才会重新计算
在这里插入图片描述
例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" >
			姓：<input v-model="firstName" />
			名：<input v-model="lastName" />
			<div>
				{{fullName}}
			</div>
    		</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					firstName:"",
					lastName:""
				},
				computed:{
					fullName:function(){
						return this.firstName+this.lastName
					}
				}
			})
		</script>
	</body>
</html>

侦听器：
当我们需要对数据(data的数据或者计算属性的数据)的改变进行一个侦听的时候，我们就需要使用到侦听器：属性—watch

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" >
			姓：<input v-model="firstName" />
			名：<input v-model="lastName" />
			<div>
				{{fullName}}
			</div>
			<div>
				姓改变次数：{{count2}}<br />
				名改变次数：{{count3}}
			</div>
			<div>
				fullNAme改变次数：{{count1}}
			</div>
    	</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					firstName:"",
					lastName:"",
					count1:0,
					count2:0,
					count3:0
				},
				computed:{
					fullName:function(){
						return this.firstName+this.lastName
					}
				},
				watch:{
					firstName:function(){
						//每次侦听到以后做些什么
						this.count2++
					},
					lastName:function(){
						//每次侦听到以后做些什么
						this.count3++
					},
					fullName:function(){
						//姓名发生改变的时候计数
						this.count1++
					}
				}
			})
		</script>
	</body>
</html>

三个模板指令：v-if，v-show与v-for指令

v-if指令：
在标签内，使用此指令，一般存在于下面两个场景：
1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" >
			<div v-if="xianshi">我显示了！</div>
			<button @click="message">显示/不显示</button>
    	</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					xianshi:true	
				},
				methods:{
					message:function(){
//						if(this.xianshi){
//							this.xianshi=false
//						}else{
//							this.xianshi=true
//						}
						this.xianshi=!this.xianshi//xianshi的值取反！
					}
				}
			})
		</script>
	</body>
</html>

v-show指令：
v-show也可以达到此效果。

相同点：v-if与v-show都可以动态控制dom元素显示隐藏
不同点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css–display:none，dom元素还在。

显示/隐藏频繁的时候用v-show，不频繁的时候用v-if
v-for指令：
当我们需要对数据集进行一个遍历展示的时候，就可以使用此指令！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" >
			<ul>
				<li v-for="item of list">{{item}}</li><!--v-for里面的格式是：“显示的内容 of 循环次数”-->
			</ul>
    	</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					list:[0,1,2,3]
				},
			})
		</script>
	</body>
</html>

注意！！！
当使用v-for的时候，需要加上 :key=" "来提升渲染的性能
但是！ key值绝对不能重复！~
此处我们可以用item作为key：

  <li v-for="item of list" :key="item">{{item}}</li>

如果item有重复，我们可以用index作为key值：

<li v-for="(item,index) of list" :key="index">{{item}}</li>

但。。这仍然不是最好的方法~
此处只介绍基础，因此不做更深层次的介绍，有兴趣的可以自己找找~~

vue-resource请求数据

vue中请求数据有好几种方法，vue-resource是官方的一个vue的插件。
使用步骤：
① 安装vue-resource：
cd到项目，然后运行（必须加–save，否则无法写入package.Jason）：

npm install vue-resource --save

②在main.js里面引入vue-resource：

import VueResource from 'vue-resource'

③然后在main.js内，使用：

Vue.use(VueResource );

在这里插入图片描述
④现在，就可以在.vue文件中写请求数据的方法了：

Axios fetchJsonp请求数据

Axios fetchJsonp是第三方的一个vue的插件。
这款插件很强大，可以再vue、node等中使用
使用步骤：
① 安装Axios fetchJsonp：
cd到项目，然后运行（必须加–save，否则无法写入package.Jason）：

npm install axios --save

②哪里用，哪里引入axios：

import Axios from 'axios'

在这里插入图片描述
③然后在.vue内，使用方法进行请求数据：

vue中的组件

todoList功能开发

运用上面的知识，做一个简单的todoList功能：

声明一个list用来存放数据；
在输入框内输入值，与data内的数据进行双向绑定；
给按钮添加点击时间，每一次点击都将输入框键入的值写入list；
将list进行展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" >
			<input v-model="msg" />
			<button @click="clc">添加</button>
			<ul>
				<li v-for="(item,index) of list" :key="index">{{item}}</li>
			</ul>
    	</div>
		<script>
			new Vue({
				el:"#root",
				data:{
					msg:"",
					list:[]
				},
				methods:{
					clc:function(){
						this.list.push(this.msg),
						this.msg=""
					}
				}
			})
		</script>
	</body>
</html>

todoList组件拆分(局部组件和全局组件)

当一个网页写得十分庞大的时候，我们就需要将一个网页拆分成许多组件，这样，一个大型项目就被分成了许多小型组件，小型组件的维护就容易很多了。

作为整个VUE文档中篇幅最大的部分，组件可是相当的添彩
打个比方，我们现在要做一个有一百个页面的项目，其中有三十三个导航栏是A，六十七个导航栏是B，这其中三十三个A导航栏中有一个模块与众不同，可以分为A1,A2,A3,A4……
这个如果用jQuery解决的话，就得自己封装模板插件，且要么写(A,B,A1,A2，An).length个模板，要么模板套模板。
这点上，VUE的模板就简单的多，我们先算好要多少个组件，然后看看组件之间有没有相互嵌套，把所有需要的地方都先挖上坑（写好组件标签），并且在组件标签中写好要传入组件的参数，再分别写好各种组件的实现，简简单单的就写好了，即使是嵌套也只是组件标签中套一个组件标签，更简单的改一个传参能够实现。（此段摘于网络）

如何定义一个组件？
①局部组件：

	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" >
			<ul>
				<todo-item></todo-item><!--此处是自己定义的局部组件名称-->
			</ul>
    	</div>
    	
		<script>
			//定义的局部组件
			var jubuzujian = {
				template: '<li>sdsd</li>'
			}
			
			new Vue({
				el:"#root",
			//如果需要使用这个局部组件,就需要在vue实例中进行声明：
				components:{//此处是
					'todo-item':jubuzujian
				}
			})
		</script>
	</body>
</html>

局部组件示例二:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" >
			<input v-model="msg" />
			<button @click="clc">添加</button>
			<ul>
				<zujianming v-for="(msg, index) of list" :key="index" :neirong="msg"></zujianming>
				<!--此处将neirong和msg进行绑定-->
			</ul>
    	</div>
    	
		<script>	
			
			var zujian = {
				template: '<li @click="dianji">{{neirong}}</li>',
				//此处若是想让内容都写入list,就必须要在下面声明一下:
				props:["neirong","key"],
				//在这个自定义的组件里面使用这个属性来接收这个neirong
				methods: {
					dianji: function(){
						alert("被点击~")
					}
				}
			}
			
			new Vue({
				el:"#root",
				data:{
					msg:"",
					list:[]
				},
				methods:{
					clc:function(){
						this.list.push(this.msg),
						this.msg=""
					}
				},
				components:{
					"zujianming":zujian
				}
			})
		</script>
	</body>
</html>

②全局组件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" >
			<ul>
				<todo-item></todo-item><!--此处是自己定义的全局组件名称-->
			</ul>
    	</div>
    	
    	
		<script>
			//此处是一个全局组件~依旧可以自己命名，且无需在vue实例中进行声明
			Vue.component('todo-item',{
				template: '<li>sdsd</li>'
			})
			
			new Vue({
				el:"#root",
			})
		</script>
	</body>
</html>

但是这样虽然吧组件拆分出来了,却又无法动态得进行传值了,因此,还需要:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" >
			<input v-model="msg" />
			<button @click="clc">添加</button>
			<ul>
				<!--此处将neirong和msg进行绑定-->
				<zujianming v-for="(msg, index) of list" :key="index" :neirong="msg"></zujianming>
			</ul>
    	</div>
    	
		<script>
			
			Vue.component('zujianming',{
				template: '<li>{{neirong}}</li>',//此处若是想让内容都写入list,就必须要在下面声明一下:
				props:["neirong"]//在这个自定义的组件里面使用这个属性来接收这个neirong
			})
			
			new Vue({
				el:"#root",
				data:{
					msg:"",
					list:[]
				},
				methods:{
					clc:function(){
						this.list.push(this.msg),
						this.msg=""
					}
				}
			})
		</script>
	</body>
</html>

组件与实例的关系

一个vue项目是由千千万万个vue的实例组成的~
每一个组件都是一个vue实例~!!
组件与vue的实例在同一层,组件也是实例的一种,举例说明:
在组件里面写方法:

Vue.component('zujianming',{
				template: '<li @click="dianji">{{neirong}}</li>',//给生成的每一个li都加上点击事件
				props:["neirong"],
				methods: {//写一个方法
					dianji: function(){
						alert("被点击~")
					}
				}
			})

在这里插入图片描述
事实证明:组件中也可以写方法~因此组件也是一个vue的实例

实现todoList的删除功能(父子组件的通信)

此处我们要先知道,子组件与父组件之间怎么进行数据的交互:

即:
父组件向子组件传值需要用属性:
父组件使用绑定指令来绑定属性:neirong=“msg”
子组件使用props:[“neirong”]这个属性来进行接收

子组件向父组件传值需要用到"发布订阅模式":
子组件中使用this.$emit(“shanchu”,this.index)来进行发表(前面是自定义事件名,后面的是传值)
恰巧父组件已经订阅了这个自定义的事件:@shanchu=“handledelete”(订阅这个事件,出发后面的函数)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" >
			<input v-model="msg" />
			<button @click="clc">添加</button>
			<ul>
				<!--
					这是父组件
                -->
				<zujianming 
					v-for="(msg, index) of list" 
					:key="index" 
					:neirong="msg" 
					:index = "index"
					@shanchu="handledelete"
				></zujianming>
				<!--此处将neirong和msg进行绑定-->
			</ul>
    	</div>
    	
		<script>	
			//这是子组件
			var zujian = {
				template: '<li @click="dianji">{{neirong}}</li>',
				//此处若是想让内容都写入list,就必须要在下面声明一下:
				props:["neirong","key","index"],
				//在这个自定义的组件里面使用这个属性来接收这个neirong
				methods: {
					dianji: function(){
				//给父组件通知需要将某个节点进行删除,传值:节点index,需要使用到$emit(发表)方法
						this.$emit("shanchu",this.index)
					}
				}
			}
			
			new Vue({
				el:"#root",
				data:{
					msg:"",
					list:[]
				},
				methods:{
					clc:function(){
						this.list.push(this.msg),
						this.msg=""
					},
					handledelete:function(index){//当这个自定义事件触发
						this.list.splice(index,1)//移除下标为index的这个元素
					}
					
				},
				components:{
					"zujianming":zujian
				}
			})
		</script>
	</body>
</html>

特殊变量$event：
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

——

 // ...
    methods: {
      warn: function (message, event) {
        // 现在我们可以访问原生事件对象
        if (event) event.preventDefault()
        alert(message)
      }
    }

父子组件中通讯的第二种方法（主动获取）：

父组件主动获取子组件的方法和属性:
父组件在调用子组件的时候，写一个 ref=“xxx”（<zizujian ref="xxx"></zizujian>）
再在父组件中通过this.$ref.xxx.属性对子组件中的方法/属性进行获取
子组件主动获取父组件的方法和属性:
在子组件中直接使用this.$parent.xxx进行获取

非父子组件（兄弟组件之间的传值问题）

可以通过父组件，让父组件作为中介，作为传值，但是较为麻烦
因此，一般用下面的方法：
使用“世界广播”的办法：
①新建一个js文件，然后引入vue，实例化vue，最后暴露这个vue
在这里插入图片描述
②在要广播的组件中引入这个js文件中的vue
③通过vueEmit.$emit(“名称”,“数据”)来广播数据

④在需要接收数据的组件，通过下面代码来接收广播的数据

mounted（）{
    vueEmit.$on("名称",function(){
    })
}

在这里插入图片描述

声明钩子（周期）函数

定义
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

上面的这种方法确实能够做到想要的结果
但是
我们会发现，一旦我们点击“刷新”，数据就会不见
因此
我们需要暂时list放入缓存：
①在每次操作完list后都存入缓存
②在与date、methods同级的地方使用一个“声明周期函数”拿出这个list
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="vue.js" ></script>
	</head>
	<body>
		<div id="root" >
			<input v-model="msg" />
			<button @click="clc">添加</button>
			<ul>
				<!--
					这是父组件
                -->
				<zujianming 
					v-for="(msg, index) of list" 
					:key="index" 
					:neirong="msg" 
					:index = "index"
					@shanchu="handledelete"
				></zujianming>
				<!--此处将neirong和msg进行绑定-->
			</ul>
    	</div>
    	
		<script>	
			//这是子组件
			var zujian = {
				template: '<li @click="dianji">{{neirong}}</li>',
				//此处若是想让内容都写入list,就必须要在下面声明一下:
				props:["neirong","key","index"],
				//在这个自定义的组件里面使用这个属性来接收这个neirong
				methods: {
					dianji: function(){
				//给父组件通知需要将某个节点进行删除,传值:节点index,需要使用到$emit(发表)方法
						this.$emit("shanchu",this.index)
					}
				}
			}
			
			new Vue({
				el:"#root",
				data:{
					msg:"",
					list:[]
				},
				methods:{
					clc:function(){
						this.list.push(this.msg),
						this.msg=""
						//暂时存入缓存
						localStorage.setItem('list',JSON.stringify(this.list))
					},
					handledelete:function(index){//当这个自定义事件触发
						this.list.splice(index,1)//移除下标为index的这个元素
						//再存一次
						localStorage.setItem('list',JSON.stringify(this.list))
					}
					
				},
				components:{
					"zujianming":zujian
				},
				//生命周期函数
				mounted(){
					var list = JSON.parse(localStorage.getItem('list'))
					if(list){
						this.list=list
					}
				}
			})
		</script>
	</body>
</html>

小结：

beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

Vue-cli的使用

Vue-cli的简介与使用

在前面我们都是把vue的代码直接写在一个html中,当然到了项目之中就不会这样,而是借助webpack这样的打包工具帮助我们构建大型项目的开发目录,然后在开发完成之后会进行打包的操作,帮助我们完成一个打包生成可运行的最终代码。但是,如果我们要让程序员来配置webpack却是不小的挑战。因此，vue的官方为我们提供了一款脚手架工具—vue-cli
通过vue-cli我们可以快速地构建一个标准的vue项目，同时这个工具也自带了webpack的各种配置
vue-cli的安装
到vue的官网上根据提示进行安装：
https://cli.vuejs.org/
注意！！！（vue-cli踩坑血泪）
官方默认安装的是最新版本的vue-cli，因此，安装后就跟vue-cli不一样了~
详情参考下面安装步骤：
按照安装步骤进行安装：
https://blog.csdn.net/IT_lukaifang/article/details/95635259
完成后，根据提示在浏览器打开默认网页：
在这里插入图片描述
然后将生成的vue-cli项目放入编译工具，我们就得到了其项目目录：

此目录中，
build------中是一些webpack的配置文件（不动）
config------中是一些针对开发环境和线上环境的一些配置文件（不动）
node_modules------指的是我们项目的一些依赖（不动）
src------指的是我们的源代码所放的目录
static------静态资源所放的目录
babelrc-----针对babel的编译（不动）
editoconfig------浏览器的配置（不动）
eslintignore------eslint的检测规则的说明（不动）
index .html------整个页面最外面的html文件，里面有个“app”的挂载点到时候我们vue的根实例就会挂载到这个地方

我们在写工程化的代码时，其实主要还是在编写src里面的代码
src下的main.js文件是我们整个项目的入口文件，在这里我们创建一个vue实例，我们让他的挂载点在index.html的挂载点上。
在这里插入图片描述
可见，在mian.js里面声明的这个vue的实例，el是index.html的挂载点，并且此处声明了一个叫做“app”的局部组件，其模板是一个叫做“app”的模板。

且es6的语法可能会看不懂：
比如：component里面本应该是{“App”:App}，键和值都相同的时候直接写一个就可以了~

下面是引入外面的局部组件的方法：
在这里插入图片描述
我们可以看到，在同级目录下的app.vue（局部组件）文件：

可见，当局部组件写成单独的组件的时候，格式与原来写到同一个html文件中完全不一样了
这是因为，vue-cli这款脚手架工具里面，提供给我们一种新的vue的编码语法，这种语法叫做：“单文件组件”
也就是说，一个.vue文件里面，包含了一个vue组件所应有的所有内容！~
vue-cli这款脚手架工具很好地完成了vue组件封装的任务

使用vue-cli开发TodoLIst

首先我门运行前面下载的vue-cli项目：
使用

npm run dev

然后对main.js（入口文件）文件进行编辑：将引入的局部组件改名：app.vue–>TodoList
对应的，在main.js文件中也要把引入文件名、注册的局部组件、页面显示模板都改为TodoList。
在这里插入图片描述
接下来我门就在TodoList.vue文件中编写代码：
注意：
①在外部局部组件的“模板”template部分，只能有一个大的div才可以！~
②在逻辑部分的（script）部分，原来写data的格式是 date：{}
而现在作为组件却需要用函数的格式：

data(){
	return{//在返回值中写数据	
		数据一：xxx
		数据二：xxx
	}
}

在这里插入图片描述
③如果要在组件中再使用子组件，就需要：
先写一个子组件文件，再进行import，再进行声明：

④父组件向子组件进行传值：
跟之前一样，用属性的方式传值，子组件用props进行接收：

全局样式和局部样式

在这里插入图片描述
scoped标签可以使当前样式的作用域只在此组件
不加的时候就全局生效！~

以上就是vue的核心功能！~
再加上其他的例如vue-roter/axios/webpack等等现成的第三方工具，则可以较为工程化地组织前端开发。
Vue的更高阶的使用请看我后面的博客！~