vue2.0自学教程(一):走进vue2.0大观园

李古拉雷 2020-11-12 23:49:43
教程 vue 自学 走进 vue2.0


人狠话不多,咱直入主题吧!

  • 开发软件: Visual Studio Code
  • 支持环境: nodejs+windows
  • 版本: vue2.0

1.初识vue
vue是一个前端框架,使用MVVM(Model-View-ViewModel的简写)模式。看过官网这个介绍的心得就是看不懂。没事我举个通俗可能易懂的例子,你们随意感受一下。
皮影戏很多人都知道。

△吶,这就是皮影戏

我们把看到的皮影对应成V。
在幕后操作皮影的人对应成M。
把手拿皮影的人对应成VM。

当皮影动作改变时,幕后的人动作也在做对应的改变。反过来也一样,当操作人动作改变时,皮影也在做相应的动作。

(1)李古拉雷有一个孙悟空的皮影,他的好基友想玩一下,李古拉雷直接把这个皮影给他就好,至于能玩出什么花样,就看他的能力了。
(2)玩的时间长了,李古拉雷对当前这个孙悟空的颜色有点厌倦,想换个色儿,比如绿色。他拿起笔就给孙悟空的帽子该成了绿色。改过色后的孙悟空耍起金箍棒照样虎虎生威,虽然动作一样,好像更好看了。
(1)(2)用我们行业黑话来讲就是低耦合,皮影和玩皮影的人是相互独立没太大关系,李古拉雷的皮影换个人照样玩,皮影换个颜色加点装饰,孙悟空还照应耍金箍棒,不太会去耍太极(这取决于李古拉雷有没有学会太极的动作)
(3)有一天李古拉雷真的学会了太极的动作,这段皮影舞孙悟空耍的也是有模有样。
(3)这个就是可重用性,李古拉雷想让孙悟空这么动他就得怎么动。
(4)时间一长,孙悟空这个皮影玩够了,李古拉雷就和他的好基友商量,想做一个猪八戒玩,他们分工合作,李古拉雷负责练习动作,基友负责制作皮影,分工明确互不影响。
(4)这个行为就是独立开发。

低耦合、可重用性、独立开发对应着皮影戏是不是更好理解了。

△看完我的通俗讲解有没有这种感觉

2.为什么选择vue2.0?
在这个教程发布之际,vue的最新版本是2.6,2.6相较于2.0并没有特别大的升级,2.x系列都可以向后兼容。同时本系列教程目的是让初识vue的朋友能快速又高效的上手开发,不会被那些官网那些原理话整的蒙圈又懵逼,也因2.0下的组件库已经经过时间和程序员的考验,运行稳定,种类丰富。总而言之vue2.0是个不错的选择,接下来的教程如果不做特殊说明,vue是指vue2.0版本。

3.vue的使用方式有几种?
答:使用方式有两种:
一种是直接引入CDN链接(引入方式同jQuery)或者下载到本地环境,在程序中引入文件,在浏览器中直接运行。
二种是在node.js下运行 ,在命令行工具中用vue-cli命令集进行操做(起个服务、创建项目、打包编译),程序按照vue的模板语法完成代码编写。
注:第二种这种生猛咸湿的开发技能才是我们重点关注的对象。

4.环境搭建
1.下载node并安装
https://nodejs.org/zh-cn/

选择左侧这个点击下载,然后一路点击一路下一步。
2.安装完成后,在E盘新建一个“workspace”的文件夹,进入建好的这个文件夹,按着“shift”键同时点击鼠标右键,选择“在此处打开命令窗口”。(文件夹路径可以建立在任意目录,尽量不要以中文命名)。

输入: node -v,如果成功出现 node 版本号

少年,棒棒哒!,node.js安装成功了。
3.把 npm 改成 cnpm ,因为npm命令安装源不在境内,安装比较慢,而cnpm使用的是淘宝镜像,网速有保障,装起组件来丝丝顺滑,那叫流畅。
切换命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

△在cmd窗口中输入该命令(或者复制命令后右键选择粘贴)

4.本系列教程前端开发IDE使用 Visual Studio Code

注:IDE是集成开发环境,功能丰富,战斗力MAX

下载地址:https://code.visualstudio.com/

我们选择下载 stable(稳定版)进行安装,如果软件是英文界面操作
修改软件语言包:
快捷键是:ctrl+shift+p
搜索“configure display language”

此处改成:“zh-CN”

软件重启后生效,如果没有生效,还是显示英文的话,打开下面这个链接,安装中文语言包
https://marketplace.visualstu...

安装完成后,重启软件生效。
至此,node.js、和开发软件就初步安装完成了。下一节我们正式进入vue2.0的秘密花园。

5.第一个helloworld!
一场天雷动地火,你的第一个helloworld将要面世了!
先稍安勿躁,在你的"helloworld"真正面世之前还有几个步骤。

1.环境安装
上面不是安装过环境了,咋还安装啊?对你没有看错,不过这里安装的环境是项目运行环境。上面安装的是开发环境,有本质的区别。运行环境安装后以后,就是鸟枪换炮,不用再一个一个苦哈哈新建目录和.html、.css、.js文件,只要运行几条命令,项目目录和文件会自动安装完成。这个感觉倍儿爽。学会了这招,你就成为了前端圈最靓的仔。
先找一个工作空间(比如我的是在 E 盘 WorkSpace),新建一个文件夹“v2.0-tutorial”,进入“v2.0-tutorial”,同时 按住 “shift”+鼠标右键 ,点击“在此处打开命令窗口”

①:输入命令:npm install vue-cli -g

在这条命令中,用到了 -g,常用的还用另外两条命令,我展开讲一下:
-g: 是 --global 的缩写,安装到全局环境,最终的文件放在 node安装目录下的 ./node_modules 中
-D:是 --save-dev 的缩写,安装到开发环境,最终的文件放在项目中./node_modules
-s:是 --save 的缩写 ,安装到上线环境
另 install 可以用 i 代替。
so,这条命令还可以这样输入:npm i vue-cli --global
vue-cli 是什么?
vue-cli 是vue的命令行界面,安装成功以后可以使用vue下的命令进行项目初始化等一些操作。

△vue-cli安装成功后的CMD界面

vue-cli安装成功后后,我们继续输入第二条命令:
②:输入命令:vue init webpack demo01

△一直按回车键什么都不需要输入

打开v2.0-tutorial文件夹,看是否多了一个 "demo01"文件夹,这个就是自动生成的demo 项目

△自动搭建生成的项目“demo01”
在Visual Studio Code打开demo文件夹:

  • demo01/index.html:
  • config:里面是一些配置文件,项目入口模板文件
  • src/assets :一些静态资源问价,如图片logo等
  • src/components:组件文件夹,也是接下来使用频率最高的文件夹
  • router:路由配置

到这里,第一个项目总算是搭建完成了,没事跑一下看看。

2.项目启动
进入 demo01 ,打开cmd命令行,输入“npm run dev”

在浏览器输入这个地址:http://localhost:8080/

看这个页面,说明项目运行的不错,感觉好极了!
打开 src/components/HelloWorld.vue 文件
①.把 <div class="hello"></div>之间的标签全部干掉,对一个不留。
②.在data中添加一个新属性,sayHi

data(){
return {
msg: 'Welcome to Your Vue.js App',
sayHi:'HelloWorld!',
}
}

③.在 <div class="hello"></div>调用新添加的属性 sayHi,like this:

<div class="hello">
{
{sayHi}}
</div>

打开浏览器看一下:

"HelloWorld"终于出来了~


源程序如下:

<template>
<div class="hello">
{
{sayHi}}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
sayHi:'HelloWorld!',
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

版权声明
本文为[李古拉雷]所创,转载请带上原文链接,感谢
https://blog.csdn.net/honglei_zh/article/details/88944757

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple