学习Vue前所一定要知道的事?怎么学?推荐教程?

一. Vue简介

简单来说,Vue就是一套用于构建用户界面的渐进式JavaScript框架,现在最主流的前端框架之一。


二. 版本

当前,vue共有3个版本,其中:
①2.x版本的vue是目前企业级项目开发中的主流版本(基础)
②3.x版本的vue于2020-09-19发布,生态还不完善,尚未在企业及项目开发中普及和推广 (升级)
③1.x版本的vue几乎被淘汰,不再建议学习与使用


三. 编程环境

建议使用Visual Studio Code开发环境,不会的同学在csdn上随便找一篇下载安装全教程,非常多,懒得找的这里推荐一篇 vscode配置html_vscode安装方法及常用插件


四. 怎么学?

1.建议在学习Vue之前至少要有一点HTML5和JavaScript基础。

2.看视频教程,推荐b站的黑马程序员、尚硅谷等vue2+vue3全套视频教程,直接搜“vue”最热的那几个中就能找到,都有理论和实战的结合,学计算机专业必不可少!
直接放链接:
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖

3.一定要动手敲代码!不要复制粘贴!一定要多练、多练!!


五. 开始学习之路的第一关:Hello Vue!

环境搭建好之后,创建一个.html文件,编写如下代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础title>
head>
<body>
    <div id="app">
        {{ message }}
    div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"Hello Vue!"
            }
        })
    script>
body>
html>

学习vue的第一个程序就写好啦!

附:

HTML小妙招

如果你是有基础的同学,就可以忽略我记录的一些编写html的小妙招

小妙招1:新建好html文件后,在第一行输入英文状态下感叹号 ! +tab键或者 ! +Enter回车键,可以快速的搭建html框架。

小妙招2:利用超高速前端开发工具Emmet快速编写html,推荐一篇快速入门 emmet 语法


如何实现vs code编写代码在浏览器自动刷新显示

1.首先在vs code里安装“live Server”的插件

学习Vue前所一定要知道的事?怎么学?推荐教程?_第1张图片

2.编写好代码点击右键,选择“open with Live Server”运行

学习Vue前所一定要知道的事?怎么学?推荐教程?_第2张图片

3.保存方式可以用手动Ctrl+S 或者 自动保存:点击左上角“文件”->选择“自动保存”即可


结束!
小白写一篇博客太难了呜呜呜,好了,开始沉浸式学vue,后续再记录一些笔记吧。
加油,坚持就是胜利!

你可能感兴趣的