Self study course of vue2.0 (1): entering the Grand View Garden of vue2.0

Li gulare 2020-11-12 23:49:43
self study course vue2.0 vue

People don't talk too much , Let's get to the point !

  • Development software : Visual Studio Code
  • Support environment : nodejs+windows
  • edition : vue2.0

1. First time to know vue
vue It's a front-end framework , Use MVVM(Model-View-ViewModel Abbreviation ) Pattern . After reading this introduction on the official website, I can't understand . It's OK. I'll give you an example that is easy to understand , Feel free to feel .
Shadow play is known to many people .

△ Na , This is shadow play

We match the shadow we see with V.
The people who operate shadow puppets behind the scenes correspond to M.
People with shadow puppets in their hands correspond to VM.

When the shadow movement changes , The people behind the scenes are also making corresponding changes . And vice versa , When the operator's action changes , Shadow puppets are doing the same thing .

(1) Li gulalei has a shadow puppet of the monkey king , His best friend wants to play , Li gulare just gave him the shadow puppet , As for what kind of tricks can be played , It depends on his ability .
(2) It's been a long time , Li gulare is a little tired of the current color of the monkey king , I want to change colors , Like green . He took up the pen and gave the monkey king a hat that should be green . After the change of color, the monkey king plays the golden cudgel, and the tiger is still powerful , Although the action is the same , It looks better .
(1)(2) In our industry slang, it is low coupling , Shadow puppet and shadow puppet players are independent of each other, it doesn't matter much , Li gulare's shadow puppet for another person to play , Shadow puppet to change color, add some decoration , Sun Wukong also played with the golden cudgel , Not very good at Taiji ( It depends on whether Li gulare has learned the movements of Tai Chi )
(3) One day Li gulalei really learned the movements of Tai Chi , It's also like the monkey dance .
(3) This is reusability , If Li gulalei wants monkey king to move like this, he has to do it .
(4) A long time , Monkey King, this shadow play is enough , Li gulare discussed with his good friends , I want to be a pig , They work together , Li gulare is in charge of the exercises , Jiyou is responsible for making shadow puppets , The division of labor is clear and does not affect each other .
(4) This behavior is independent development .

Low coupling 、 Reusability 、 Independent development Is it better to understand shadow play .

△ Do you have this feeling after reading my popular explanation

2. Why choose vue2.0?
As this tutorial is released ,vue The latest version of is 2.6,2.6 Compare with 2.0 There's no big upgrade ,2.x Series can be backward compatible . At the same time, the purpose of this series of tutorials is to let you know vue Our friends can develop quickly and efficiently , Will not be those official website those principle words entire cover circle and ignorant force , Also cause 2.0 Under the component library has passed the test of time and programmers , Stable operation , variety . To make a long story short vue2.0 It's a good choice , If there is no special explanation for the next tutorial ,vue Refer to vue2.0 edition .

3.vue There are several ways to use ?
answer : There are two ways of using :
One is to introduce directly CDN link ( It is introduced in the same way as jQuery) Or download to the local environment , Introduce files into the program , Run directly in the browser .
Two are in node.js Run under , Use... In command line tools vue-cli The command set performs operations ( Start a service 、 Create project 、 Package compilation ), The procedure follows vue Template syntax to complete the code .
notes : Second, this kind of vigorous and salty development skills is the focus of our attention .

4. Environment building
1. download node And install

Click on the left to download , And then click all the way to the next step .
2. After installation , stay E Create a new “workspace” Folder , Go to the folder you've created , Press “shift” Click the right mouse button at the same time , choice “ Open command window here ”.( The folder path can be created in any directory , Try not to name it in Chinese ).

Input : node -v, If it's successful node Version number

juvenile , awesome !,node.js Installation is successful .
3. hold npm Change to cnpm , because npm The command installation source is not in China , Installation is slow , and cnpm Using Taobao mirror image , Internet speed is guaranteed , The assembly is smooth , It's called fluency .
Switch command :npm install -g cnpm --registry=

△ stay cmd Enter the command in the window ( Or right click the copy command and select paste )

4. Front end development of this series of tutorials IDE Use Visual Studio Code

 notes :IDE It's the integrated development environment , Rich in functions , Combat effectiveness MAX

Download address :

We choose to download stable( Stable version ) Installation , If the software is operated in English
Modify software language pack :
Shortcut keys are :ctrl+shift+p
Search for “configure display language”

Change here to :“zh-CN”

It takes effect after the software is restarted , If it doesn't work , It's still in English , Open the link below , Install Chinese language pack

After installation , Restart the software to take effect .
thus ,node.js、 And development software on the initial installation completed . In the next section, we officially enter vue2.0 Our secret garden .

5. first helloworld!
A thunderstorm and fire , Your first helloworld It's coming out !
Don't be impatient , In your "helloworld" There are still a few steps before it's really out there .

1. Environmental installation
The environment is not installed on it , How to install it ? There's nothing wrong with you , However, the environment installed here is the project running environment . The development environment is installed on it , There are essential differences . After the running environment is installed , It's the exchange of guns and birds , You don't have to create a new directory and .html、.css、.js file , Just run a few commands , The project directory and files will be installed automatically . It's a great feeling . Learned the trick , You're the prettiest guy in the front end .
Find a workspace first ( For example, mine is E disc WorkSpace), Create a new folder “v2.0-tutorial”, Get into “v2.0-tutorial”, meanwhile Hold down “shift”+ Right mouse button , Click on “ Open command window here ”

①: Enter the command :npm install vue-cli -g

In this order , Yes -g, Two other commands are commonly used , Let me expand on :
-g: yes --global Abbreviation , Install to global environment , The final document is placed in node Install under directory ./node_modules in
-D: yes --save-dev Abbreviation , Install to the development environment , The final document is placed in the project ./node_modules
-s: yes --save Abbreviation , Install to live environment
another install It can be used i Instead of .
so, This command can also be entered in this way :npm i vue-cli --global
vue-cli What is it? ?
vue-cli yes vue Command line interface , After the installation is successful, you can use vue Under the command for project initialization and other operations .

△vue-cli After successful installation CMD Interface

vue-cli After the installation is successful , Let's continue with the second command :
②: Enter the command :vue init webpack demo01

△ Press enter all the time and you don't need to type anything

open v2.0-tutorial Folder , See if there is one more "demo01" Folder , This is automatically generated demo project

△ Automatically build the generated project “demo01”
stay Visual Studio Code open demo Folder :

  • demo01/index.html:
  • config: There are some configuration files , Project entry template file
  • src/assets : Some static resources ask price , Such as images logo etc.
  • src/components: Component folder , It's also the most frequently used folder next
  • router: Routing configuration

Come here , The first project is finally completed , It's OK. Run around and have a look .

2. Project start
Get into demo01 , open cmd Command line , Input “npm run dev”

Enter this address in the browser :http://localhost:8080/

Look at this page , It shows that the project is running well , It feels great !
open src/components/HelloWorld.vue file
①. hold <div class="hello"></div> All the labels between them are removed , Not for one .
②. stay data Add a new attribute to ,sayHi

return {
msg: 'Welcome to Your Vue.js App',

③. stay <div class="hello"></div> Call the newly added property sayHi,like this:

<div class="hello">

Open the browser and have a look :

"HelloWorld" Finally came out ~

The source program is as follows :

<div class="hello">
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
<!-- 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;

本文为[Li gulare]所创,转载请带上原文链接,感谢

  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