Vue环境搭建与快速入门,真香系列

38 阅读6分钟

最后

你要问前端开发难不难,我就得说计算机领域里常说的一句话,这句话就是『难的不会,会的不难』,对于不熟悉某领域技术的人来说,因为不了解所以产生神秘感,神秘感就会让人感觉很难,也就是『难的不会』;当学会这项技术之后,知道什么什么技术能做到什么做不到,只是做起来花多少时间的问题而已,没啥难的,所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料

前端路线图

vue.js的36个技巧 开源分享:docs.qq.com/doc/DSmRnRG…

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

前端框架三巨头:Vue.js、React.js、AngularJS,vue.js以其轻量易用著称,vue.js和React.js发展速度最快,AngularJS还是老大。

官网:cn.vuejs.org/

参考:cn.vuejs.org/v2/guide/

Git地址:github.com/vuejs

在这里插入图片描述

开发环境搭建

===================================================================

Node和NPM:

NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs都有。为了后面学习方便,我们先安装node及NPM工具。

下载Node.js:

下载地址:nodejs.org/en/,推荐下载LTS版本。

在这里插入图片描述

完成以后,在控制台输入:Node中自带了NPM

node -v

npm -v

看到版本信息:

在这里插入图片描述

npm默认的仓库地址是在国外网站,速度较慢,建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具:nrm

首先安装nrm:npm install nrm -g这里-g代表全局安装。

然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库:

通过nrm use taobao来指定要使用的镜像源

然后通过nrm test npm来测试速度

在这里插入图片描述

安装完成后重启电脑。

快速入门

=================================================================

创建一个新的空工程:

1529596874127.png

在这里插入图片描述

然后新建一个module:

1529597325121.png

选中static web,静态web项目:

在这里插入图片描述

位置信息:

在这里插入图片描述

安装vue:

方法一:官网下载

下载地址:github.com/vuejs/vue,下载解压,得到vue.js文件。

方法二:使用CDN

直接使用公共的CDN服务:

或者:

方法三:npm安装(推荐)

在idea的左下角,有个Terminal按钮,点击打开控制台,进入hello-vue目录,先输入:npm init -y 进行初始化。

在这里插入图片描述

安装Vue,输入命令:npm install vue --save

在这里插入图片描述

然后就会在hello-vue目录发现一个node_modules目录,并且在下面有一个vue目录。

在这里插入图片描述

node_modules是通过npm安装的所有模块的默认位置。

Vue基本使用

====================================================================

创建Vue实例:

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

var vm = new Vue({

// 选项

})

在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:el、data、methods等等

el:每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。我们可以通过el属性来指定,然后创建Vue实例,关联这个div。

这样,Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

数据: 当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。

  • name的变化会影响到input的值

  • input中输入的值,也会导致vm中的name发生改变

方法: Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue实例的作用范围内使用。

{{num}}

vue入门案例


在hello-vue目录新建一个HTML

测试:vue声明式渲染:

首先通过 new Vue()来创建Vue实例, 然后构造函数接收一个对象,对象中有一些属性:

  • el:是element的缩写,通过id选中要渲染的页面元素,本例中是一个div

  • data:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中

  • name:这里我们指定了一个name属性

  • 页面中的h2元素中,我们通过{{name}}的方式,来渲染刚刚定义的name属性。

Title

大家好,我是{{name}}

打开页面查看效果:

在这里插入图片描述

双向绑定与事件处理

最后

编程基础的初级开发者,计算机科学专业的学生,以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念,以优化代码,提高编程技能。这份笔记都是可以作为参考的。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

名不虚传!字节技术官甩出的"保姆级"数据结构与算法笔记太香了