菜鸟学Vue【1】

70 阅读3分钟

前话:我是一个刚学Vue的前端小白+菜鸟,想着就在掘金写一个文章记录自己的学习过程和一些自己踩的一些坑......写得不对或者不好的地方欢迎各位大佬、老师、同学严厉批评指正!

正文:

一、Vue的介绍

1、官方介绍

Vue 是一套用来动态构建用户界面渐进式 Javascript 框架
构建用户界面:就是把数据通过各种方法变成用户界面
渐进式:主张最少, 没有多做职责之外的事
“vue可以从底层向上逐层递进,从一个小小的核心库开始,到各种各样的插件,我们一来可以选择它的核心库来进行开发,也可以引入jQuery啊什么的,让我们可以引入第三方库来进行开发,更加的灵活,可以根据业务来选择需要的功能模块和组件,并可以让它们在需要的时候进行加载”

2、vue的特点

从b站尚硅谷的视频老师哪里来的:
借鉴了 angular 的模板和数据绑定技术
借鉴了 react 的组件化和虚拟 DOM 技术

(1)vue采用了MVVM的模型*

简单概括就是:
M--模型:后端传递的数据
V--视图:我们看到的页面
VM--视图模型:是 MVVM 的核心所在,它能够实现数据的双向绑定

将模型转化为视图:后端的数据变为页面,通过数据绑定来实现
将视图转化为模型:页面转化为后端的数据,通过 DOM 事件监听

(2)代码简介、体积小、运行效率高、适合移动/PC端开发

(3)Vue 本身只关注 UI,可以引入其他的第三方库开发项目

(4)采用组件化模式,提高代码复用率、而且更好维护代码

(5)声明式编程*

使用了虚拟DOM
虚拟DOM:是真实DOM的一个映射,它可以描述真实DOM
Vue在工作完,已经由最初的虚拟DOM产生真实的DOM,并挂载到页面后,我们如果添加一些新的东西,Vue会产生一个新的虚拟DOM,并用它来跟旧的虚拟DOM进行一个叫作Diff的算法对比,把新的东西挂载到页面,这样就避免了页面全部更新而多费一些功夫
采用 Diff 算法:产生新的虚拟 DOM 时候,判断是否已经在虚拟 DOM 中重复存在

二、Vue的安装

这里我先不记录Vue的脚手架啦~~~

下面是Vue2的官方文档(我目前想着先把Vue2学完,再进行Vue3的进阶)
vue2官网:v2.cn.vuejs.org/

  1. 进入官网在右边的菜单选择学习-->教程

    image.png
  2. 然后选择安装-->直接用

image.png

3.在页面中引入Vue

image.png

4.此时运行页面会有下面的问题

image.png

5.解决这两个提示:
(1)在浏览器安装vue.js devtools插件

image.png

(2)添加Vue.config.productionTip = false这句代码

image.png

完成了上面的设置后就没有两个提示啦,就这样开始我的Vue学习之路~~~