preface

This is a series of notes documenting the process of learning Vue, notes are the basics. This series of notes mainly refer to the notes of the video I bought on Taobao, which also includes my own views. They are all typed by hand. If you need Vue video resources, you can add me to WX: 15732676936. Back to update some Vue often meet test articles, I hope you read a little bit of some reference

What is vue.js

  • Vue.js is one of the main front-end frameworks, along with Angular.js and React.
  • Vue.js is a set of frameworks for building user interfaces, focusing only on the view layer. It is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. (Vue has supporting third-party class libraries, which can be integrated to do large-scale project development)
  • The main work of the front end? Mainly responsible for the V layer of MVC; The main job is to work with the interface

2. Why learn mainstream frameworks

  • Enterprises to improve development efficiency: in enterprises, time is efficiency, and efficiency is money
  • The evolution of development efficiency: native JS-> libraries like JQuery -> front-end template engine -> angular.js/vue.js
  • One of the core ideas in Vue is that the user doesn’t have to manipulate DOM elements, freeing up the user’s hands and allowing programmers to focus more time on the business logic layer
  • Enhance the competitiveness of their employment

The difference between framework and library

  • Framework: a complete set of solutions; It is highly intrusive to the project. If the project needs to change the framework, it needs to rebuild the whole project.
  • Libraries (plug-ins) : Provide a small function that is less intrusive to the project and can be easily switched to another library if one library fails to fulfill a requirement.

The difference between MVC in Node(back end) and MVVM in front end

  • MVC is the concept of hierarchical development at the back end;

    • M – Model layer
    • V- Front view layer
    • C- Business logic layer

  • MVVM is the concept of the front View layer, mainly focusing on the View layer, that is to say :MVVM divides the front View layer into three parts: Model, View and ViewModel

    Model: creates data in the VM instance

    View: is the entire div of #app that is presented to the user

    ViewModel: The entire VM instance created

    Why do you need to know MVVM when you have MVC

How to define the basic Vue code structure

<! DOCTYPE html><html lang="en"><head>    
  <meta charset="UTF-8">    
  <title>Vue basic code</title>    
<! Step 1: Import vue package    
  <script src="Lib/vue - 2.4.0. Js." "></script>
</head>
 <body><! The vue instance that controls new will control the contents of this element.
    <div id="app">    
      <p>{{ msg }}</p>
		</div>
<script>    
   // Step 2: Create a Vue instance
   // After we import the package, the browser has an extra Vue constructor in memory
        var vm = new Vue({        
          el: "#app".// Indicates that the current Vue instance of our new controls the area on the page
          data: {  MSG: "Welcome to Vue" // It is very convenient to render data to the page through the instructions provided by Vue. Programmers do not manually manipulate DOM elements any more}})</script>
</body>
</html>
Copy the code

Code specification:

Large company or large project code specifications use two characters apart and a few four characters apart. I am also used to using 2 characters apart, each editor is not only the same usage, search on their own.