学习 Vue2.0核心知识 这一篇就够了

已于 2022-05-29 14:54:43 修改
阅读量719 收藏
点赞数 2
分类专栏： Vue 文章标签： vue
于 2022-04-27 20:39:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_53947466/article/details/124294849
版权

目录

1.1、Vue简介

中文官网

动态构建用户界面的渐进式 JavaScript 框架

  1. 遵循 MVVM 模式
  2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
  3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

vue周边库

  • vue-cli：vue脚手架
  • vue-resource
  • axios
  • vue-router：路由
  • vuex：状态管理
  • element-ui：基于vue的UI组件库（PC端）

1.2、初识Vue

1、导入依赖

<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
  2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
  3. root容器里的代码被称为【Vue模板】；
  4. Vue实例和容器是一一对应的；
  5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
  6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
  7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
<body>
	<div id="root">
		<h1>Hello {{name}}</h1>
	</div>
	
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
	<script>
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		new Vue({
			el:'#root', 
			data:{ 		
				name:'World',
			}
		})
	</script>
</body>

1.3、模板语法

1、插值语法：

  • 功能：用于解析标签体内容。
  • 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2、指令语法：

  • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
  • 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
  • 备注：Vue中有很多的指令，且形式都是：v-xxx，此处我们只是拿v-bind举个例子。
<body>
	<div id="root">
		<h1>插值语法</h1>
		<h3>你好，{{name}}</h3>

		<h1>指令语法</h1>
		<a v-bind:href="school.url" x="hello">点我去{{school.name}}学习1</a>
		<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
	</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el:'#root',
		data:{
			name:'jack',
			school:{
				name:'bilibili',
				url:'http://www.bilibili.com',
			}
		}
	})
</script>

1.4、数据绑定

1、单向绑定(v-bind)：数据只能从data流向页面。

2、双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

  • 双向绑定一般都应用在表单类元素上（如：input、select等）
  • v-model:value 可以简写为 v-model，因为 v-model 默认收集的就是value值
<body>
	<div id="root">
		单向数据绑定：<input type="text" :value="name"><br/>
		双向数据绑定：<input type="text" v-model:value="name"><br/>
	
		<!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
		<!-- <h2 v-model:x="name">你好啊</h2> -->
	</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
	
	new Vue({
		el:'#root',
		data:{
			name:'Laptoy'
		}
	})
</script>

1.5、el 和 data 的两种写法

1、el有2种写法

  • new Vue时候配置 el 属性。
  • 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。

2、data有2种写法

  • 对象式
  • 函数式
  • 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

3、一个重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

const v = new Vue({
  //el:'#root',  //第一种写法
	data:{
		name:'Laptoy'
	}
})

v.$mount('#root') //第二种写法 

//data的两种写法
new Vue({
	el:'#root',
	//data的第一种写法：对象式
	data:{
		name:'Laptoy'
	}
	
	// data的第二种写法：函数式
	data(){
		console.log('@@@',this) //此处的this是Vue实例对象
		return{
			name:'Laptoy'
		}
	}
})

1.6、MVVM模型

1、MVVM模型

  • M：模型(Model) ：data中的数据
  • V：视图(View) ：模板代码
  • VM：视图模型(ViewModel)：Vue实例

在这里插入图片描述

2、观察发现：

  • data中所有的属性，最后都出现在了vm身上。
  • vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
<body>
	<div id="root">
		<h1>{{name}}</h1>
		<h1>{{address}}</h1>
		<h1>测试一下2：{{$options}}</h1>
		<h1>测试一下3：{{$emit}}</h1>
		<h1>测试一下4：{{_c}}</h1>
	</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	const vm = new Vue({
		el:'#root',
		data:{
			name:'Laptoy',
			address:'广州',
		}
	})
	console.log(vm)
</script>

1.7、数据代理

1、回顾Object.defineproperty方法

<body>
	<script type="text/javascript" >
		let number = 18
		let person = {
			name:'张三',
			sex:'男',
		}
		Object.defineProperty(person,'age',{
			// value:18,
			// enumerable:true, 	// 控制属性是否可以枚举，默认值是false
			// writable:true, 		// 控制属性是否可以被修改，默认值是false
			// configurable:true    // 控制属性是否可以被删除，默认值是false
			// 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
			get(){
				console.log('有人读取age属性了')
				return number
			},
			// 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
			set(value){
				console.log('有人修改了age属性，且值是',value)
				number = value
			}
		})
		// console.log(Object.keys(person))
		console.log(person)
	</script>
</body>

2、何为数据代理

<body>
	<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
	<script type="text/javascript">
		let obj = { x: 100 }
		let obj2 = { y: 200 }

		Object.defineProperty(obj2, 'x', {
			get() {
				return obj.x
			},
			set(value) {
				obj.x = value
			}
		})
	</script>
</body>

3、Vue中的数据代理

1、Vue中的数据代理：

通过vm对象来代理data对象中属性的操作（读/写）

2、Vue中数据代理的好处：

更加方便的操作data中的数据

3、基本原理：

  • 通过Object.defineProperty()把data对象中所有属性添加到vm上。
  • 为每一个添加到vm上的属性，都指定一个getter/setter。
  • 在getter/setter内部去操作（读/写）data中对应的属性。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue中的数据代理</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>学校名称：{{_data.name}}</h2>
			<h2>学校地址：{{_data.address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'Laptoy',
				address:'广州'
			}
		})
	</script>
</html>

在这里插入图片描述
在这里插入图片描述

1.8、事件处理

1.8.1、事件的基本使用

  • 使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
  • 事件的回调需要配置在methods对象中，最终会在vm上；
  • methods中配置的函数，不要用箭头函数！否则this就不是vm了；
  • methods中配置的函数，都是被Vue所管理的函数，this的指向是 vm 或 组件实例对象；
  • @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件的基本使用</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- <button v-on:click="showInfo">点我提示信息</button> -->
			<button @click="showInfo1">点我提示信息1</button>
			<button @click="showInfo2($event,66)">点我提示信息2</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>
</html>

1.8.2、事件修饰符

文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>事件修饰符</title>
		<!-- 引入Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: rgb(18, 73, 94);
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
				Vue中的事件修饰符：
						1.prevent：阻止默认事件（常用）；
						2.stop：阻止事件冒泡（常用）；
						3.once：事件只触发一次（常用）；
						4.capture：使用事件的捕获模式；
						5.self：只有event.target是当前操作的元素时才触发事件；
						6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件（常用） -->
			<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>

			<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息</button>

			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- 只有event.target是当前操作的元素时才触发事件； -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>

			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			methods:{
				showInfo(e){
					alert('同学你好！')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
			}
		})
	</script>
</html>

1.8.3、键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>键盘事件</title>
		<!-- 引入Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue中常用的按键别名：
							回车 => enter
							删除 => delete (捕获“删除”和“退格”键)
							退出 => esc
							空格 => space
							换行 => tab (特殊，必须配合keydown去使用)
							上 => up 
							下 => down
							左 => left
							右 => right

				2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

				3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
							(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
							(2).配合keydown使用：正常触发事件。

				4.也可以使用keyCode去指定具体的按键（不推荐）

				5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

1.9、计算属性

1、定义：要用的属性不存在，要通过已有属性计算得来。

2、原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3、get函数什么时候执行？

  • 初次读取时会执行一次。
  • 当依赖的数据发生改变时会被再次调用。

4、优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5、备注：

  • 计算属性最终会出现在vm上，直接读取使用即可。
  • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
<body>
	<div id="root">
		姓：<input type="text" v-model="firstName"> <br/><br/>
		名：<input type="text" v-model="lastName"> <br/><br/>
		全名：<span>{{fullName}}</span> <br/><br/>
	</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

	Vue.config.productionTip = false 
	
	const vm = new Vue({
		el:'#root',
		data:{
			firstName:'张',
			lastName:'三',
		},
		computed:{
			//完整写法
			/* fullName:{
				get(){
					console.log('get被调用了')
					return this.firstName + '-' + this.lastName
				},
				set(value){
					console.log('set',value)
					const arr = value.split('-')
					this.firstName = arr[0]
					this.lastName = arr[1]
				}
			} */
			//简写
			fullName(){
				console.log('get被调用了')
				return this.firstName + '-' + this.lastName
			}
		}
	})
</script>

1.10、监视属性

  • 当被监视的属性变化时，回调函数自动调用，进行相关操作
  • 监视的属性必须存在，才能进行监视
  • 监视有两种写法：
    • 创建Vue时传入watch配置
    • 通过vm.$watch监视
<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "count++" style = "font-size:25px;">点我</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type = "text/javascript">
	var vm = new Vue({
	    el: '#app',
	    data: {
	        count: 1
	    },
	    watch:{
           count:{
                immediate:true, //初始化时让handler调用一下
                // handler什么时候调用？当count发生改变时
                handler(newValue,oldValue){
					 alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
	            }
        	}
        }
	});
	
	vm.$watch('count', function(nval, oval) {
	    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
	});
</script>
Laptoy
关注
专栏目录
vue技术栈--》从vue2.0到vue3.0 ## 篇一 搭建到操作
ztK63LrD的博客
05-05 867
vue技术栈
Vue 3.0/Vue2.0快速学习方法，看我这一篇就够！！！
小北哥哥和北妈
01-12 7434
一 昨天分享了《5分钟看懂，2019年web前端新趋势》 这篇文章。 反响很不错，但我写完翻译完，发完才知道，有其他号也发了，我很佛了。 他们一看就是机翻，而我就不一样了，每段、每个知识点我都写了自己的评语和理解建议，只是部分是翻译，以防大家花费不必要的脑细胞，或许这就是我比较帅的原因吧。 废话不多说，昨天上百条留言，我都一一看完，其中大约占4成留言说的是：我学不动了、这个还没学完，又要学新...
Vue2学习笔记之知识点大总结
Qiuxuntao的博客
05-20 1561
文章目录1、初识Vue2、Vue模版语法3、数据绑定4、el与data的两种写法5、MVVM模型6、Vue的数据代理7、事件处理7.1、事件的基本使用7.2、事件修饰符7.3、键盘事件8、计算属性 1、初识Vue 初识Vue： 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5
01.VUE详细整理（一）--初识VUE--尚硅谷最新课程
a2274001782的博客
11-28 900
01.对vue的 基本认识 01.框架整体评价 是一款渐进式 且自底向上增量开发的设计的JavaScript 框架，用来动态构建用户界面 渐进式：渐进式框架通俗点就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。正经一点就是一开始不需要你完全掌握它的全部功能特性，可以后续逐步增加功能。没有多做职责之外的事情，在不同的阶段，使用vue中不同的功能。 对渐进式框架有趣的解释 作者：寇云 链接：https://www.zhihu.com/question/51907207/answer/136
Vue学习2.0
最新发布
2301_78007646的博客
07-11 312
用console.log(vm)可以查看。
我整理最有效、最全的Vue 2.0 学习路线，各个阶段适用
前端你别闹
07-18 6571
「 Vue很难学吗 」对于我这种从0.x版本就开始体验 vuejs 的人来说，当然不算难，那时候没各种脚手架和复杂搭配，仅仅是一个mvvm的解决方案库而已，解决了jq带来...
VUE2.0学习总结
志在远方
07-18 529
vue项目运行提示Warnings while compiling.警告 关于vue各种import导入 其他导入方式:博主链接 我遇到的问题 关于在学习中方法的框架梳理 1. 配置别名及路径简写操作 首先 找到vue主框架里面的build目录下的webpack.base.conf.js resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js',
【持续更新】Vue2.0基础入门学习教程
qq_41112238的博客
04-15 4100
Vue简介 概念 一套用于构建用户界面（用Vue往html页面中填充数据）的前端框架 特性 一、数据驱动视图（单向数据绑定） 使用了Vue的页面中，Vue会监听数据变化，自动重新渲染页面结构。就是说数据变化后，页面会自动更新。 二、双向数据绑定 在网页中，form表单负责采集数据，Ajax负责提交数据。 填写表单时，双向数据绑定可以在不操作DOM的前提下自动把用户输入的数据填写到数据源中。也就是说，页面上表单采集的数据发生变化时，Vue会自动获取并更新到js中。 MVVM MVVM（Model
vue2.0实现的tab标签切换效果（内容可自定义）示例
10-17
在本篇文章中，我们详细探讨了如何使用Vue 2.0框架来实现具有高度自定义性的Tab标签切换效果。这一实现不仅限于文本内容的...对于正在学习Vue.js或者希望提升前端开发技巧的读者来说，这篇文章无疑是极有价值的资源。
vue2.0开发实践总结之入门篇
09-01
Vue 2.0 开发实践总结之入门篇 Vue 2.0 是一款轻量级的前端框架，以其易学易用、性能高效的特点深受开发者喜爱。本文将围绕Vue 2.0 开发实践的入门知识展开，帮助初学者快速掌握Vue的核心概念和技术栈。 一、Vue ...
VueBasicLearning:Vue 2.0学习笔记
03-16
以上只是Vue 2.0基础知识的一部分，实际开发中，你还需要学习更多高级特性和最佳实践，例如Vuex的状态管理、Vue CLI的使用、Vue Server Side Rendering等。持续学习和实践，你将成为Vue开发的专家。
Vue2.0学习小结与知识梳理（一）
Aero_K的博客
07-31 294
一、vue 主要特点：声明式，数据驱动和组件化。 声明式：注重结果，只需要关注实现的结果，而不关注实现的过程。 数据驱动：响应式的数据，即当数据改变时，vue会自动将其渲染到视图层，开发者不需手动去修改dom结构 组件化：页面是由组件构成，组件又是由数据 + 指令构成。 1、每个Vue应用都是通过Vue函数创建一个实例开始的。创建的方式有两种：全局创建和局部创建 2、实例的生命周期钩子...
Vue 2.0 最全面学习总结，适合新手快速入门
聪哥965
01-26 724
1 Vue.js 安装 2 Vue.js 目录结构 结构如图所示： 3 Vue.js 模板语法 4 生命周期 实例： 5 Vue.js 条件语句 6 Vue.js 循环语句 7 Vue.js 计算属性 8 Vue.js 样式绑定 9 Vue.js 事件处理器 10 Vue.js 表单 11 Vue.js 组件 12 Vue.js 自定义组件 13 Vue.js 路由 ...
Vue的学习（2.0）
qq_48741976的博客
06-23 72
vue初始
vue2.0系统学习
liulang68的博客
12-23 131
npm init 初始化会生成package.json文件。同时npm可以安装live server然后直接输 live server就可以启动。 我们可以多加一个变量模拟出if…else.
Vue 基础 (笔记)
PorkCanteen的博客
10-07 504
vue 简介 1. 什么是 vue 官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。 ① 构建用户界面： 用 vue 往 html 页面中填充数据 ② 框架： 一套现成的解决方案，程序员必须遵循框架的规范去编写业务功能 学习 vue，就是学习 vue 框架中规定的用法 vue 的指令、组件(对 UI 结构的复用)、路由、Vuex 只有把以上内容掌握后才有开发 vue 项目的能力 2. vue 的特性 vue 框架的特性，主要体现在如下两方面： ?
Vue 2.0 学习笔记（一）
weixin_44772326的博客
12-01 9543
前端工程化与Webpack：概括了前端工程化的概念与特点，讲述了webpack的安装配置与使用，并使用插件解决实时打包项目的问题。介绍了webpack加载器。介绍项目如何打包发布。认识Source Map在调试中的作用。
Vue2.0学习之路
baokx的专栏
08-13 349
基于慕课网教程Vue2.5开发去哪儿网App 从零基础入门到实战项目的学习笔记。 一、基础 1.VUE2.0学习记录——hello world 2.VUE2.0学习记录——Todo_List初步 3.VUE2.0学习记录——MVVM模式 4.VUE2.0学习记录——全局组件 5.VUE2.0学习记录——局部组件 6.VUE2.0学习记录——父子组件传值 7.VUE2.0学习记录——...
vue2.0学习入门（webpack）
机智的皮卡丘的博客
01-23 546
脚手架首先上官网进行脚手架工具的搭建vue官网，nodejs的安装可以看下 nodejs安装与配置npm install -g vue-cli vue init webpack my-project (在安装的时候eslint选择no比较安全) cd my-project npm install npm run dev如果选择了yes，你会发现改改代码运行不起来了，看了下错误，希望获取到4个空
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Laptoy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值