This is the 9th day of my participation in Gwen Challenge

First, build the environment

1. Install Node.js.

2. Set up vUE development environment, install VUE scaffolding tools and official command line tools;

npm install --global vue-cli
Copy the code

3. Note: Node.js must be installed first, otherwise it will not work.

2. Create a project

Here’s how to create a project from the command line:

You must first CD into a corresponding project, and then

Vue init webpack vue-demo01 CD vue-demo01 CNPM install/NPM install NPM run dev // After the creation is successful, CD vuedemo01 and run the projectCopy the code

CNPM: Taobao mirror npm.taobao.org/

NPM install -g CNPM — name =registry.npm.taobao.org

Another way to create a project

3, CNPM install/NPM install 4, NPM run dev 2, NPM run dev 3, NPM run dev 3, NPM run dev 4, NPM run devCopy the code

To uninstall an older version of vue, write in the command:

NPM uninstall VUE -CLI -g or YARN Global remove VUE - CLICopy the code

Another way to create a project

NPM install -g@vue /cli 2. CD vue, vue create vuedemo03Copy the code

Vue CLI3 graphical interface to create projects

1, CD to directory: CD vue;

2, the vue UI;

3. Go to the page to create a project.

6. Run a vue folder that does not have node_modules(various dependencies of the project) in the folder

NPM install -g CNPM — registry.npm.taobao.org

2, CNPM install;

3. NPM run dev

4. If the project does not open automatically, enter the address manually in the browser.

Seven, vUE common instructions

  • V – if instructions

Conditional render instruction, which removes and inserts elements based on whether an expression is true or false

Basic syntax:

v-if="expression"
Copy the code

Expression is an expression that returns a Boolean value. An expression can be a Boolean property or an expression that returns a Boolean.

  • V – show commands

V-show renders HTML regardless of whether the condition is true, whereas V-if renders only if the condition is true

  • V – else instructions

The V-else directive is used in conjunction with v-if or V-show. If the V-if condition is not true, v-else content is displayed

  • V – for instructions

The V-for directive renders a list based on an array, which is similar to JavaScript’s traversal syntax

v-for="item in list"
Copy the code

List is an array, and item is the element of the array currently iterated over

V -for=”(item,index) in list” where index is the index of the current loop, with subscripts starting at 0

  • V – the bind command

V-bind dynamically binds one or more features, usually attributes of HTML elements, such as V-bind: class, followed by a parameter separated by a colon

Class can coexist with v-bind:class, which means that adding v-bind:class does not overwrite the original style class, but instead adds a new class name to it

Available: alternative

v-bind:class="isLogo? "' : 'product' = :" class = "isLogo? '':'product'"Copy the code