brief introduction

characteristic ：MVVM frame , Two way binding , Data driven , Single page , Componentization .

difference

Vue and jQuery The difference between ： Do not operate directly DOM, It is Operational data .

Case study ：Hello World => Hello , The world

HTML Code ：

<h1>{{msg}}</h1>

jQuery Realization

$("h1").text(" Hello , The world ");

Vue Realization

this.msg = ' Hello , The world '

Create project

1、CDN

<!-- Development environment version , Contains helpful command-line warnings --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Suitable for the existing non Vue In the project , add to Vue, For page interaction , Just know , With a few .

2、Vue-Cli（ recommend ）

Development of front end and back end separation projects ,

install Node.js（Node.js It's based on Chrome V8 Engine JavaScript Runtime .）

Use NPM（Node Packages Modules,Node Package management tools ） download

download Vue-Cli（ be based on Vue.js A complete system for rapid development ）

Use command line tools cmd 、Git bash、VScode All the terminals can

# Global installation vue-clinpm install -g @vue/cli# Create a new project vue create project-name# start-up cd project-nameyarn server# or# Visual management interface vue ui

The whole project uses Vue Development

Project structure

All the project files that need to be developed are in src Below directory Add ：node_modules： Project dependency package （ adopt npm install install ）

Common commands

1. Installation dependency ：npm install/yarn/cnpm install
2. Start the service ：npm run dev/npm run serve
3. Project package ：npm run build

2-3 Reference resources package.json Of documents script object

Switch source

solve npm Servers are slow in China 、 The problem of packet loss .

• cnpm
• yarn

  development tool

Download Development Tools ：VScode download

Installing a plug-in ：Extensions for VScode

• Vetur
• ESLint

  Debugging tools

Vue-Devtool Plug in installation

• Firefox plugins （ Don't go over the wall ）： Download address
• Blue light （VPN）： Download address
• Google Browser plug-in （ Over the wall ）： Download address
• Usage method ：vue-devtools Official website

  Basic grammar

Reference resources ：Vue.js Chinese official website

v-for / v-key

v-if / v-show

v-bind / :

v-model

v-on:click / @click

Life cycle

Reference resources ：Vue Life cycle , Sketch Map ： picture

• beforeCreate（ Before creation ）
• created（ After creating ）
• beforeMount（ Before mounting ）
• mounted（ After mounting ）
• beforeUpdate（ Before updating ）
• updated（ After the update ）
• beforeDestory（ Before destruction ）
• destroyed（ After destruction ）

  Components

Component development is Vue One of the characteristics of , Component development greatly improves the reusability of code , It's also convenient for the team to work together .

Package components

# /src/components/Button.vue<template> <div> <button>{{ text }}</button> </div></template><script>export default { props: { text: String, },};</script>

Use components

# /src/view/about.vue<template> <div class="about"> <h1>This is an about page</h1> <Button :text="ButtonText"></Button> </div></template><script>import Button from "@/components/Button.vue";export default { components: { Button, }, data: function() { return { ButtonText: " I'm a button ", }; },};</script>

Component parameters

Use props

Third party component library

PC End ：iView、Element、Ant Design

Mobile ：Vant、cube-ui

iView

Official website address ：iView

Download components

npm install view-design --save

Use components globally

// main.jsimport ViewUI from 'view-design';import 'view-design/dist/styles/iview.css';Vue.use(ViewUI);

ivew-admin

iView-admin yes iView One of the members of the ecology , It is a set of development mode with front end and back end separated , be based on Vue The front-end solution of the background management system .iView-admin2.0 Out of the 1.x Version refactoring , Switch to a Webpack4.0 + Vue-cli3.0 As a basic development environment . Built in development background management system commonly used logic function , And out of the box business components , It aims to enable developers to develop background management system with minimum cost , Reduce development .

Address ：iview-admin

Other plug-ins

Vue-router

Routing plug-in

Two modes

• hash / #
• history / Historical record

  Axios

HTTP Request Library

install

npm install axios --save

vue.config.js Configure agent

const URL = 'https://cnodejs.org'; // Requested address module.exports = { outputDir: 'dist', publicPath: process.env.NODE_ENV === 'production' ? './' : '/', devServer: { disableHostCheck: true, port: 8080, open: true, proxy: { '/api': { // /api =》'https://cnodejs.org' target: URL } } }};

Vuex

State management

Pack and go online

After the development of the project , Use npm run build Command to package the project , When the packaging is complete, it will generate dist Folder

When the project goes online , Direct will dist Put the folder on the server

practice

1. v-if and v-show The difference between ？
2. Dynamic binding class Usage of ？
3. Try to package / Use a component ？

From nineties Original article