1. Introduction to Vue

1. MVVM ideas

M: Model, model, including data and some basic operations
V: View, view, page rendering result
VM: View-Model, two-way operation between model and view (without developer intervention)
Before MVVM, developers started from The back-end obtains the required data model, and then renders it to the View through the DOM operation Model. Then when the user manipulates the view, we also need to get the data in the View through the DOM, and then synchronize it to the Model.
What the VM in MVVM has to do is to completely encapsulate the DOM operation, and developers no longer need to care about how Model and VIew affect each other;

2. Vue installation method

① CDN method

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

②NPM method

npm install vue

3. Simple steps to use vue

①Create a vue instance, associate the template of the page, render your own data (data) to the associated template,
-responsive ②Instructions simplify some operations on dom ③Declare
methods to do more complex operations. Methods can be encapsulated in methods.

4. Vue modular development

① Install webpack
npm install webpack -g
globally ② Install vue scaffold globally
npm install -g @vue/cli-init
③ Initialize the vue project
vue init webpack appname: vue scaffold uses the webpack template to initialize an appname project
④ Start the vue project
There are scripts in the package.json of the project, which represents the command we can run
npm start = npm run dev: start Project
⑤ Save step ④, open the file in VsCode,
Insert picture description here
file structure:
build: code related to the packaging tool webpack;
config: configuration information, including port configuration, etc.
node_modules: dependencies of the current project installation, such as those installed by npm install Place them here
src: the folder where the code is written
static: static resource files, image font files, etc.
index.html: home page content
package-lock.json and package.json: some information about npm dependent packages

5. Principles of Project Operation

First, the index.html file of the project is the main entry page of the project.

There is a main.js file in the src directory, which is the main program. It creates a Vue instance and mounts the index.html page #app; the App.vuecomponent is used ;

And the routing rules are defined: /display HelloWorldcomponents when accessing the path ,
Insert picture description here

2. Consistency ElementUI

Element, a set of Vue 2.0-based desktop component libraries for developers, designers and product managers.

1. Installation

1️⃣ npm installation

It is recommended to use npm to install, it can better work with the webpack packaging tool.

npm i element-ui -S

2️⃣ CDN installation

Currently, you can get the latest version of resources through unpkg.com/element-ui, and you can start using them by introducing js and css files on the page.

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

3️⃣ Introduced Element UI

main.jsWrite in the main program file

import ElementUI from 'element-ui';  //导入ElementUI
import 'element-ui/lib/theme-chalk/index.css';  //导入样式

Vue.use(ElementUI);  //使用ElementUI

2. Import a vue component

① Import components: import componentName from "component address"
②Describe the imported components in components

components: {
    
    comp:componentName}

③Use components in templates

<comp></comp>

Vue_study notes