快速学习Vue

首先呢,我们要知道,Vue ——它是一个国产的框架,不是外国的。创建者是:尤雨溪,2014年2月Vue.js正式发布,我们现在主要学习的是新版本2.5

那么问题来了,Vue是什么呢?
用专业术语来说:Vue是一套用于构建用户界面的渐进式框架。 用自己的话理解来说:Vue是一个渐进式框架,帮助开发前端应用。
vue的核心库只关注视图层,不仅易于上手,还方便与第三方库或既有项目整合。

Vue:渐进式 JavaScript框架
渐:声明式渲染——→组件系统——→客户端路由——→集中式状态管理——→项目构建

说了这么久的库与框架,是否清楚库与框架有什么不同捏?
1.如果它是一个库,主要以提供API为主,像Jquery,提供大量API
2.如果它是一个框架,主要以提供一些基础性服务为主,比如说,Vue它底层有虚拟DOM支撑,有双向数据绑定支撑,可以节省实际代码。
用白话简单通俗的说:●库提供解决方案,提供方法解决问题的JS文件
●框架提供一整套完整解决方案

在这里插入图片描述
Vue的优点:
●易用:熟悉HTML、CSS、JavaScript知识后,可快速上手Vue
●灵活:在一个库和一套完整框架之间自如伸缩
●高效:20KB运行大小,超快虚拟DOM

了解到了这么多基本知识后,终于进入主题开始使用Vue啦!
在这里插入图片描述
Vue的基本使用步骤:
1.需要提供标签用于填充数据
2.引入vue.js库文件
3.可以使用Vue的语法做功能
4.把Vue提供的数据填充到标签里

如果这个听不懂也看不明白呢,不要急不要慌,接下来有更加通俗易懂的步骤:
如何使用Vue写代码?
●提供一个标签,让它成为Vue根元素
●引入Vue库文件
●编写Vue来完成需要功能

此时屏幕下的你是不是还是一脸懵逼?不要紧,来写一个案例 Hello Vue
在这里插入图片描述

  如果你还不懂, 那也无话可说了,你懂得

在这里插入图片描述
那就在写一个案例加深,Hello是一定要会的,什么都不重要,Hello很重要,如果不会写,送你一首琅琅,接下来的学习也会凉凉
在这里插入图片描述
Vue模板语法:就是为了做前端渲染,意思也就是说:将数据放到网页中进行展示

要是听不懂,就画个图
在这里插入图片描述

前端渲染方式
●原生JS拼接字符串
1.效率低
2.维护困难【不同程序员开发代码风格差别大】
●使用前端模板引擎
优点:遵循同样代码,代码可读性明显提高,方便后期维护
缺点:没有专门提供事件机制

使用Vue特有的模板语法
●插值表达式
●指令
●事件绑定
●属性绑定
●样式绑定
●分支循环结构

今天就学到这里,明天继续深入学习Vue特有模板语法
可加群:一起了解学习前端知识
q:891822022

Logo

前往低代码交流专区

更多推荐