Vue基础学习(一)

介绍

参考:Vue官方文档

什么是Vue?

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,即采用MVVM设计模式,可以参考我的另一篇博文:MVVM与MVP设计模式

兼容性

Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

引入

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
=>或者下载vue.js后引入

当然也可以使用脚手架工具:
#全局安装vue-cli,参考官网:https://cli.vuejs.org/zh/guide/installation.html
$cnpm install webpack -g (建议安装时使用cnpm,成功率高)
$npm install -g @vue/cli-init(如果不加init就无法建立node_moduels文件夹)
#创建一个基于webpack模板的新项目
$ vue init webpack my-project
#安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

var vm=new Vue({
	el:'#app',
	=>el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。
	=>可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
	
	data:{
		message:'I am Vue';
	}
	=>data是Vue实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,
	=>从而让 data 的属性能够响应数据变化
})

生命周期函数

生命周期函数就是Vue实例在某一个时间点会自动执行的函数
(可以查看官方文档的生命周期函数图示)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue生命周期函数</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			var vm=new Vue({
				el:'#app',
				template:"<div>{{test}}</div>",
				data:{
					test:'hello'
				},
				
				=>生命周期函数并不放在methods里
				beforeCreate:function(){
					console.log('beforeCreate');
				},
				created:function(){
					console.log('created');
				},
				=>此时实例的初始化完成
				=>当Vue实例没有模板template时,会把el,即app的div整体当作模板来渲染
				=>没有模板等价于:template:'<div>hello</div>'
				
				beforeMount:function(){
					console.log(this.$el);
					console.log('beforeMount');
				},
				=>beforeMount执行时页面还没有被渲染
				
				mounted:function(){
					console.log(this.$el);
					console.log('mounted');
				},
				=>mounted执行时页面被渲染
				
				beforeDestroy:function(){
					console.log('beforeDestroy');
				},
				=>组件即将被销毁时执行
				
				destroyed:function(){
					console.log('destroyed');
				},
				=>组件被完全销毁时执行
				
				beforeUpdate:function(){
					console.log(this.$el);
					console.log('beforeUpdated');
				},
				=>数据发生改变,没有被渲染之前执行
				
				updated:function(){
					console.log(this.$el);
					console.log('updated');
				}
			})
		</script>
	</body>
</html>

在创建此Vue实例后,在控制台会自动执行这些函数
在这里插入图片描述

模板语法

1. 插值

文本:使用 {{...}}(双大括号)的文本插值

<div>Message: {{ msg }}</div>

html:使用 v-html 指令。下面的例子渲染为<div> <div> <h1>hello</h1> </div> </div>

<div id="app">
    <div v-html="message"></div>
</div>    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>hello</h1>'
  }
})
</script>

HTML 属性中的值应使用 v-bind 指令

<div v-bind:id="dynamicId"></div>

表达式:Vue.js支持JavaScript表达式

<div id="app">{{ ok ? 'YES' : 'NO' }}</div>    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
  }
})
</script>

2. 指令

本人太懒,直接学习了官方文档:Vue模板语法-指令

计算属性和侦听器

1. 计算属性

Eg:

<div id="app">{{fullName}}&nbsp;{{age}}</div>
var vm=new Vue({
		el:'#app',
		data:{
			firstName:"Dell",
			lastName:"Lee",
			age:20
		},
		computed:{
			fullName:function(){
				console.log('执行计算功能');
				=>可以像绑定普通属性一样在模板中绑定计算属性
				return this.firstName+' '+this.lastName;
			}
		}
})

绑定属性:fullName始终依赖于firstName,this.lastName
缓存机制:仅仅修改age不会调用计算属性的function。而如果在methods中定义一个方法执行同样的功能后,即使仅修改age,也会重新执行该方法。
在这里插入图片描述

2. 侦听属性

观察和响应 Vue 实例上的数据变动。与计算属性一样,也存在缓存机制 
			var vm=new Vue({
				el:'#app',
				data:{
					firstName:"Dell",
					lastName:"Lee",
					fullName:'Dell Lee',
					age:20
				},
				=>当firstName和lastName有一个变化时,都要对fullName做出响应
				watch:{
					firstName: function () {
						console.log('执行该方法');
						return this.firstName+' '+this.lastName;
					},
					lastName: function () {
						console.log('执行该方法');
						return this.firstName+' '+this.lastName;
					}

				}
			})

相对来说,侦听器方法实现起来较计算属性复杂,而且自定义方法不存在缓存机制,因此,当某个功能可以用自定义方法、计算属性、侦听器实现时,推荐使用计算属性,既简洁性能又好。

关于侦听器,也可以使用命令式的 vm.$watch API,我的另外一篇博客:Vue之vm.$watch理解

3. getter与setter

计算属性默认只有 getter ,在需要时也可以提供一个 setter 
			computed:{
					fullName: {
						get:function () {
							return this.firstName+' '+this.lastName;
						},
						set:function (value) {
							var ary=value.split(' ');
							this.firstName=ary[0];
							this.lastName=ary[1];
						}
					}
				}

当fullName所依赖的值改变时,都会调用get方法;而fullName自身改变时,会调用get和set方法,使其依赖项也发生变化

已标记关键词 清除标记
<p> <span><span style="color:#337FE5;">【为什么前端都要学习Vue<span style="color:#337FE5;">】</span></span></span> </p> <span> </span> <p style="color:#666666;"> <span style="color:#1A1A1A;">这几年Vue.js成为前端框架中最火的一个。越来越多的网站前端开始采用Vue.js开发。是开源世界华人的骄傲,作者是我国的尤雨溪大神。相对于其他前端框架,<span style="color:#1A1A1A;">Vue 更容易上手!正因为它简单易学,很多前端开发工程师可以很快掌握并且应用到实际开发中。如果说你想用最短的时间来学习一个框架,快速上手项目,Vue是不二之选。</span></span> </p> <p style="color:#666666;"> <span style="color:#1A1A1A;"><span style="color:#1A1A1A;"><br /> </span></span> </p> <p style="color:#666666;"> <span style="color:#337FE5;">【学员收益】</span> </p> <p style="color:#666666;"> <span>1)大部分学员想要学习Vue,但是无奈缺少一个好老师,</span><span>董老师将手把手带领你学习,让你彻底掌握Vue框架。</span> </p> <p style="color:#666666;"> <span>2)课程将会长期维护,<span style="color:#666666;">内容更超值,</span>本课程基于最新的版本进行讲解,并且老师会更新升级</span><span>到3.0稳定版本。</span> </p> <p> <span>3)学完该课程后不仅能学到Vue的设计和开发技能,还能培养市场思维、用户思维、设计思维,并能够利用掌握的技术开发Vue项目,获取额外的收益。<br /> </span><span></span> </p> <p> <span><br /> </span> </p> <p style="color:#666666;"> <span><span style="color:#337FE5;">【课程收获】</span></span> </p> <p> <span><span style="color:#666666;">1、</span>从基础知识到项目实战,内容涵盖Vue各个层面的知识和技巧<br /> <span style="color:#666666;">2、</span>学习曲线平缓,前端新人也可以看得懂<br /> 3、贴近企业项目,按照企业级代码标准和工程开发的流程进行讲解<br /> 4、让你能够独立开发高颜值的项目<br /> </span> </p> <p> <span>5、项目涉及14大功能组件,从基础组件到业务组件,一站式全掌握</span> </p> <p> <span><img src="https://img-bss.csdnimg.cn/202007160700105241.png" alt="" /><br /> </span> </p> <p> <img src="https://img-bss.csdnimg.cn/202007160649295686.png" alt="" /> </p> <p style="color:#666666;"> <span><span style="color:#337FE5;">【项目效果】</span></span> </p> <p> 本课程打造的是高颜值的美团外卖项目。不仅界面美观,而且涉及到了众多页面。多说无益,请大家扫码查看课程效果。<img src="https://img-bss.csdnimg.cn/202007081115567138.png" alt="" /> </p> <p> <img src="https://img-bss.csdnimg.cn/202007161118172782.png" alt="" /> </p> <p> <img src="https://img-bss.csdnimg.cn/202007161118403086.png" alt="" /> </p>
相关推荐
<p> <span style="font-size:16px;color:#009900;"><strong>Vue3.0来了,你还学的动吗?</strong></span> </p> <p> <br /> </p> <p> 2020年9月底,Vue3.0正式版终于发布了。Vue<span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;">在全球拥有 130 多万用户 ,它被应用于各种不同的场景中。而在国内,更是<span>最火热的前端框架,<span>2.0与3.0的开发模式有了很大的改变,所以</span>3.0的全新版本势必会引发新的一波学习潮流。对于前端开发者来说,不管你嘴上如何“学不动”,注定离不开“真相定律”,Vue3.0是你提升自身技术能力,晋升中级工程师一定要掌握的。</span></span> </p> <p>   </p> <p> <span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;">本课程将基于 Vue3.0 正式版,从Vue基础语法入手,全面掌握 Vue3.0 全家桶技术栈,并结合实战项目开发,让你拥有Vue3.0项目开发经验,更好的掌握Vue开发企业项目的流程 。<br /> </span> </p> <p> <br /> </p> <p> <span id="__kindeditor_bookmark_end_43__"></span><span style="color:#009900;font-family:-apple-system, BlinkMacSystemFont, "font-size:16px;background-color:#FFFFFF;"><strong>本课程共包括三个模块</strong></span> </p> <p> <span style="color:#121212;font-family:-apple-system, BlinkMacSystemFont, "font-size:15px;background-color:#FFFFFF;"><br /> </span> </p> <p> <span style="background-color:#FFFFFF;">一、<strong>Vue基础篇</strong></span> </p> <p> <span style="background-color:#FFFFFF;">本模块将讲解Vue3.0基本用法、插值表达式、常用指令等知识点,还会精讲Vue 3.0核心语法,如计算属性、过滤器、监视器、模板、生命周期等内容。</span><span style="background-color:#FFFFFF;color:#121212;">会带你深入理解Vue组件化技术,讲解全局组件和局部组件的定义,组件间数据传递,以及Vue内置组件等知识点。让你掌握模块化的概念,会通过Vue脚本架搭建项目,并掌握使用Axios发送AJAX请求,</span><span style="color:#121212;">让你快速入门Vue3.0。</span><span style="background-color:#FFFFFF;color:#121212;"></span> </p> <p> <span style="background-color:#FFFFFF;color:#121212;"><br /> </span> </p> <p> <span style="background-color:#FFFFFF;">二、<strong>Vue核心篇</strong></span> </p> <p> <span>这个模块会带你讲解Vue3.0全家桶的知识点(Vue Router路由+Vuex状态管理),涉及Vue路由的用法、包括路由嵌套、路由模式、编程式导航、路由守卫等,还会全面讲解Vuex状态管理机制及使用,理解state、mutation、action等核心概念,让你轻松掌握Vue全家桶。</span> </p> <p> <span><br /> </span> </p> <p> <span style="background-color:#FFFFFF;"> </span> </p> <p style="color:#121212;"> 三、<strong>项目实战篇</strong> </p> <span style="color:#121212;"></span> <p> 实战项目会贴近企业流程,按照企业级别代码质量和工程开发流程进行授课,让你理解这套技术在企业中被使用的真实流程,更好的掌握Vue各个基础知识点。项目开发流程包括项目需求分析->环境搭建与配置->搭建远程Git仓库->接口分析->项目开发->打包上线。 </p> <p> <br /> </p> <p> <span style="font-size:16px;color:#009900;"><strong>实战项目涉及内容</strong></span> </p> <p> <img alt="" src="https://img-bss.csdnimg.cn/202010240323559662.png" /> </p> <p> <br /> </p>
<p><strong><span style="color: #999999; font-family: 微软雅黑, 'Open Sans', sans-serif; font-size: 14px; background-color: #ffffff;">Vue 3 是目前最流行的前端开发框架之一,而且它的流行趋势还在上升,在国内,使用 Vue 的公司和程序员越来越多,学习Vue3 将会让你在程序员界有一个更好的竞争能力,本套课程是国内 2021 年最新的 Vu3 教程视频。</span></strong></p> <p>除了讲 vue 3的基础之外,还有讲到 vue 3 的新特性</p> <p style="box-sizing: border-box; margin: 0px 0px 10.5px; line-height: 35px; overflow: hidden; text-overflow: ellipsis; color: #222222; font-family: 微软雅黑, 'Open Sans', sans-serif; font-size: 14px;">Compsition API</p> <p style="box-sizing: border-box; margin: 0px 0px 10.5px; line-height: 35px; overflow: hidden; text-overflow: ellipsis; color: #222222; font-family: 微软雅黑, 'Open Sans', sans-serif; font-size: 14px;">Multiple Root Elements</p> <p style="box-sizing: border-box; margin: 0px 0px 10.5px; line-height: 35px; overflow: hidden; text-overflow: ellipsis; color: #222222; font-family: 微软雅黑, 'Open Sans', sans-serif; font-size: 14px;">Teleport Component</p> <p style="box-sizing: border-box; margin: 0px 0px 10.5px; line-height: 35px; overflow: hidden; text-overflow: ellipsis; color: #222222; font-family: 微软雅黑, 'Open Sans', sans-serif; font-size: 14px;">Suspense Component</p> <p style="box-sizing: border-box; margin: 0px 0px 10.5px; line-height: 35px; overflow: hidden; text-overflow: ellipsis; color: #222222; font-family: 微软雅黑, 'Open Sans', sans-serif; font-size: 14px;">TypeScript Supoort</p>
<p> <span style="font-size:24px;"><img src="https://img-bss.csdn.net/202002111502403886.png" alt="" /><br /> </span> </p> <p> <span style="font-size:24px;"><img src="https://img-bss.csdn.net/202002111502521739.jpg" alt="" /><br /> </span> </p> <p> <span style="font-size:24px;">本课程是Vue的快速入门课程,涉及到的课程知识点:Vue环境的快速搭建, 会使用Vue的生命周期的钩子函数; 会使用vue常见指令;会使用vue计算属性和watch监控;会编写Vue组件;掌握组件间通信,会创建Vue实例,知道Vue的常见属性</span> </p> <br /> <br /> <span style="font-size:24px;">大家都知道涛哥最关心的是找工作,这段时间出去面试的时候会经常会被问及到Vue相关的知识,所以涛哥迫不及待的赶紧出了一版Vue相关的教程,有人问:我们做后台会前台干什么呀?是因为现在的公司老板都想招复合型的人才,招一个Java开发回来恨不得前后台都会,所以我们Java开发人员也要掌握一些前端相关的技能。Java这边现在前端用的比较多的就是VUE,所以大家还是要赶紧学习起来,为了你不被淘汰,为了你能快速适应公司的发展速度,快速找到一份满意的工作,赶紧学起来吧。本课程是Vue的快速入门课程,涉及到的课程知识点:Vue环境的快速搭建,?会使用Vue的生命周期的钩子函数;?会使用vue常见指令;会使用vue计算属性和watch监控;会编写Vue组件;掌握组件间通信;</span><br /> <br /> <span style="font-size:24px;">用2小时看完,就可以快速上手公司里的项目,后期还会有实战项目上线,请大家持续关注。</span><br /> <br /> <span style="font-size:24px;"></span>
<p style="font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;font-size:14px;background-color:#ffffff;"> <span style="font-size:16px;color:#009900;"><span><span></span></span></span> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <strong class="ql-author-51078574"><span style="color:#337FE5;font-size:18px;"><img src="https://img-bss.csdnimg.cn/202012100801272351.png" alt="" /><br /> </span></strong> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <strong class="ql-author-51078574"><span style="color:#337FE5;font-size:18px;"></span></strong> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <strong class="ql-author-51078574"><span style="color:#337FE5;font-size:18px;"><br /> </span></strong> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <br /> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <br /> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <span style="color:#337FE5;font-size:18px;"><strong>前端人年终技术升级</strong></span> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <span style="color:#337FE5;font-size:18px;"><strong>2h极速入门Vue3.0</strong></span> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <br /> </p> <p> <br /> </p> <p> <span> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">年终岁尾,又到了打工人写总结的时候,各位前端工程师,今年你的总结里是否有“Vue3.0”的身影呢?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">9月Vue3.0问世,对前端人来说,这是技术升级的一大步,同样也是一场学习效率的角逐。</span> </p> <p style="font-size:11pt;color:#494949;">   </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>不论你是:</strong></span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">Vue2.x的老用户<strong><span style="color:#337FE5;font-size:18px;">  or  </span></strong>没有接触过Vue的小白;</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">前端工程师  <strong><span style="color:#337FE5;font-size:18px;">or</span></strong>  想从事前端岗位的学生</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">只要你与前端工作有关, Vue3.0的问世都可能是你脱颖而出的好机会!</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">抢先进阶,成为首批Vue3.0开发者,升职、加薪、找工作一路绿灯!</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">你为Vue3.0入门,准备了多少学习时间?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">三天?五天?还是七天?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">完全不需要!<strong>本门课程可以帮您在2小时内极速入门</strong>。</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong><span><span style="color:#337FE5;"><span> </span></span></span></strong></span> </p> <p class="ql-long-51078574 ql-align-center" style="text-align:left;" align="center"> <span style="color:#337FE5;font-size:18px;"><span style="font-size:18px;color:#337FE5;"><strong>即刻学习</strong></span></span> </p> <p class="ql-long-51078574 ql-align-center" style="text-align:left;" align="center"> <span style="color:#337FE5;font-size:18px;"><span style="font-size:18px;color:#337FE5;"><strong>年终完成项目升级</strong></span></span> </p> <p class="ql-long-51078574 ql-align-center" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <br /> </p> <p> <br /> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">Vue在全球拥有超130万用户,在不同场景中均有应用;在国内Vue是最火热的前端框架,迭代后Vue3.0框架<strong>更快捷、精悍,容易维护,同时还添加了新特性</strong>,对于前端工作者来说,这是一次重要的进阶。 </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong><span style="color:#337FE5;">To </span>学生党&求职者:</strong>提升简历丰富度、提高自身价值,增加面试成功的几率</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong> <span style="color:#337FE5;">To </span></strong><strong>前端工程师:</strong>完成现有项目的优化升级,全面适配Vue3.0,年终总结上又可以添上一笔啦!</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><span> </span></span> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <span style="font-size:18px;color:#337FE5;"><strong>精华知识+名师指导</strong></span> </p> <p class="ql-align-center ql-long-51078574" style="text-align:left;font-size:11pt;color:#494949;" align="center"> <span style="font-size:18px;color:#337FE5;"><strong>Vue小白也能快速进阶</strong></span> </p> <p> <br /> </p> <p> <br /> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><span> </span></span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>问:</strong>没有用过Vue2.0,可以直接学习Vue3.0吗?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>答:</strong>没问题,本门课程着重于基础夯实,Vue小白也能轻松掌握。</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>问:</strong>学完本门课程,我可以得到什么?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>答:</strong>你可以建立对Vue知识的认知;</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">      了解Vue的基本使用与调试方法;</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574">      掌握Vue的常用指令。</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>问:</strong>2个小时的课程,知识要点全面吗?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>答:</strong>课程围绕Vue3.0入门开讲,全套知识要点浓缩在2个小时的课程中,学员每一分钟都可以Get满满干货!</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>问:</strong>师资力量有保障吗?</span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><br /> </span> </p> <p class="ql-long-51078574" style="font-size:11pt;color:#494949;"> <span class="ql-author-51078574"><strong>答:</strong>本门课程邀请到了南京大学软件工程硕士汤小洋,作为CSDN学院金牌讲师,汤小洋老师在本站拥有超15万学员。</span> </p> <p style="font-size:11pt;color:#494949;">  <span style="font-size:11pt;">汤小洋老师曾就职于擎天科技、中软国际、华为等上市公司,从事软件开发及软件教育培训多年,具有丰富的实战经验,授课耐心细致,通俗易懂,风趣幽默,善于将复杂问题简单化,曾为多家知名企业进行软件开发实训。</span> </p> <p> <br /> </p> <p style="font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;color:#222226;font-size:14px;background-color:#ffffff;"> <span style="font-family:-apple-system, BlinkMacSystemFont, 'font-size:15px;background-color:#FFFFFF;color:#121212;"><span style="font-family:'PingFang SC', 'Hiragino Sans GB', Arial, 'Microsoft YaHei', Verdana, Roboto, Noto, 'Helvetica Neue', sans-serif;"></span></span> </p>
<span style="color:#666666;font-size:14px;background-color:#FFFFFF;">VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就业的你来说,那么这门课程便是你手中的葵花宝典。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">学习技巧:学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">此vue课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!</span><br /> <br /> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">代码和ppt均可下载!</span><br /> <br /> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">免费提供《企业级完整实战项目接口文档》,绝对可用。</span> </p> <p> <img src="https://img-bss.csdn.net/202001090736032736.png" alt="" /><img src="https://img-bss.csdn.net/202001090736166806.png" alt="" /><img src="https://img-bss.csdn.net/202001090736273968.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p>
<p style="color:#666666;"> <span style="font-size:14px;">本门课程重实战,将基础知识拆解到项目里,让你在项目情境里学知识。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">这样的学习方式能让你保持兴趣、充满动力,时刻知道学的东西能用在哪、能怎么用。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">平时不明白的知识点,放在项目里去理解就恍然大悟了。</span> </p> <p style="color:#666666;"> <span></span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>一、融汇贯通</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本视频采用了前后端分离的开发模式,前端使用Vue.js+Element UI实现了Web页面的呈现,后端使用Python 的Django框架实现了数据访问的接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端的各自承担的工作。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>二、贴近实战</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本系列课程为练手项目实战:学生管理系统v4.0的开发,项目包含了如下几个内容:项目的总体介绍、基本功能的演示、Vuejs的初始化、Element UI的使用、在Django中实现针对数据的增删改查的接口、在Vuejs中实现前端增删改查的调用、实现文件的上传、实现表格的分页、实现导出数据到Excel、实现通过Excel导入数据、实现针对表格的批量化操作等等,所有的功能都通过演示完成、贴近了实战</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>三、课程亮点</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">在本案例中,最大的亮点在于前后端做了分离,真正理解前后端的各自承担的工作。前端如何和后端交互</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>适合人群:</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">1、有Python语言基础、web前端基础,想要深入学习Python Web框架的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">2、有Django基础,但是想学习企业级项目实战的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">3、有MySQL数据库基础的朋友</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><img alt="" src="https://img-bss.csdnimg.cn/202009070752197496.png" /><br /> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><br /> </span> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页