Nearly 10000 words Vue detailed basic tutorial

cjh_ code 2021-11-25 15:14:06

Catalog

1.1、 Concept ( be based on vue2)

1.2、vue/cli The scaffold

1.2.1 Create project startup service

1.2.2 Project directory explanation ( Skipping )

1.2.3 Custom configuration

1.2.4 eslint

1.2.5 single vue file

1.3、 Interpolation expression

1.4 、MVVM Design patterns

1.5、Vue Instructions ( a key , Take a little book and remember )

1.5.1 Concept

1.5.2 v-bind

1.5.3 v-on The binding event

1.5.4 v-on Event modifier

1.5.5 v-on Key modifier  

1.5.6 v-model

1.5.7  v-text and v-html

1.5.8 v-show and v-if

1.5.9 v-for


1.1、 Concept ( be based on vue2)

        vue:vue It's a JavaScript The progressive framework of ( Progressive is the gradual use of , Integrate more functions )

What's the difference between a library and a framework ?

         A library is a collection of methods , A framework is a set of syntax with its own rules

1.2、vue/cli The scaffold

Why do you need this scaffold ?

         As the name suggests, scaffolding is like scaffolding for building a house , What are you doing , Easy to build structure ,webpack Configuring your own environment is troublesome , download @vue/cli package , use vue Command to create a scaffolding project .

        @vue/cli yes Vue A global module package officially provided ( obtain vue command ), This package is used to create a scaffold project. The scaffold is a working platform set up to ensure the smooth progress of each construction process

benefits :

  • Open the box , Open a bag to eat
  • 0 To configure webpack Packaging tools (babel Support 、css and less Support 、 Development server support )

Global install command :

  • yarn global add @vue/cli 
  • npm install -g @vue/cli

Sometimes the installation is a little slow , Mirror image is recommended , Almost finished the card, then it's really a card , Let's go again !!!

 1.2.1 Create project startup service

Be careful : Project names cannot contain uppercase letters , Chinese and special symbols

establish vue Project steps :

1、 Create project :vue create vuecli-demo( Terminal operation )

vue and create Is the command , vuecli-demo It's the folder name vue create vue-demo

2、 Select template

  • The up and down arrows control the selection vue edition , Mistaken ctrl+c again
  • Choose how to download all the dependent packages of the scaffold project ( Someone downloaded other terminals , Here we need to choose )

3、 Press enter to wait for the project folder to be generated + file + Download the necessary third-party packages

4、 Enter under the scaffold project , Start the built-in hot update local server

  1. cd vuecil-demo( You will also be prompted after you create it on the terminal )
  2. npm run serve perhaps yarn serve

    Figure 1 above shows the selected version , Figure 2 shows the selection terminal  ;

        Hot update : The simple understanding is to load in real time , The workspace code has changed , The server re renders the page

5、 The terminal hot updates the local server successfully

The port number here is 8888, The default port number is 8080, You can change . 

 1.2.2 Project directory explanation ( Skipping )

 vuecil-demo // Project directory
├── node_modules // Third party packages that the project depends on
├── public // Static file directory
├── favicon.ico// Browser small icon
└── index.html // Single page html file ( Web browsing is it )
├── src // Business folder
├── assets // Static resources
└── logo.png // vue Of logo picture
├── components // Component catalog
└── HelloWorld.vue // The welcome page vue Code file
├── App.vue // The root component of the entire application
└── main.js // entrance js file
├── .gitignore // git Commit ignore configuration
├── babel.config.js // babel To configure
├── package.json // Dependency package list
├── README.md // Project description
└── yarn.lock // Package version locking and cache address 

Important documents :

  • node_modules The following are downloaded third-party packages
  • public/index.html – The web page that the browser runs
  • src/main.js – webpack Packed entry file
  • src/App.vue – vue Project entry page
  • package.json – Dependent package list file

  Project framework operation diagram

 1.2.3 Custom configuration

src Juxtaposition newly build vue.config.js

/* Cover webpack Configuration of */
module.exports = {
devServer: { // Custom service configuration
open: true, // Open browser automatically
port: 3000 // Port number ( It can be changed )
}
}

 1.2.4 eslint

        eslint It is a code checking tool ( It is recommended that novices In the early Or close this thing , Otherwise, there will be a lot of errors , Why? , Your code is correct , It thinks you're not following its norms , Ah, it's just wrong )

close eslint( Optional , Personal needs )

/* Cover webpack Configuration of */
module.exports = {
devServer: { // Custom service configuration
open: true, // Open browser automatically
port: 3000 // Port number ( It can be changed )
},
lintOnSave:false// close exlint Check
}

1.2.5 single vue file

          single vue File benefits , Independent scopes do not affect each other

<!-- template must , There can only be one root tag , Affect the label structure rendered to the page -->
<template>
<div> Welcome to use vue</div> <!-- Other labels can only be put in div in -->
</template>
<!-- js relevant -->
<script>
export default {
name: 'App'
}
</script>
<!-- Of the current component style style , Set up scoped, You can ensure that the style is only valid for the current page -->
<style scoped>
</style>

        vue Document matching webpack, Pack them up and insert them into index.html, Then run... In the browser ( When using, remember to clear the unwanted code , That is to say vue Publicity code, etc )

 1.3、 Interpolation expression

         stay dom In the label , Insert content directly , Also called Ming rendering text interpolation .

<template>
<div>
<h1>{
{ msg }}</h1>
<h2>{
{ obj.name }}</h2>
<h3>{
{ obj.age > 17 ? ' adult ' : ' A minor ' }}</h3> // Out-of-service if sentence ,{
{}} There can only be expressions
</div>
</template>
<script>
export default {
data() { // function , Fixed format , Definition vue Where the data is
return { // Need to return an object ,key Equivalent to variable name
msg: " Introduction to Zhang San ",
obj: {
name: " Junior three ",
age: 3
}
}
}
}
</script>
<style></style>

Be careful :dom Interpolation expression assignment in , vue The variable must be in data Statement in ( there data It's a function, not an object , The object returned )

1.4 、MVVM Design patterns

         Be careful : Data driven view change , operation dom What happened , stay vue In the source code

         benefits : Greatly reduced DOM operation , Improve development efficiency

MVVM, A software architecture pattern , Determines the thought and level of writing code

  • M:   model Data model          (data It defines )    
  • V:    view View                   (html page )
  • VM: ViewModel Model view  (vue.js Source code )

 MVVM Two way data binding enables automatic two-way data synchronization   No more action required DOM

  • V( Modify the view ) -> M( Automatic data synchronization )
  • M( Modifying data ) -> V( View Auto sync )

Be careful : 

  1. stay vue in , Direct manual operation is not recommended DOM!!!  
  2. stay vue in , Data driven views , Don't think about how to operate DOM, It's about how to manipulate the data !!( Ideas have to change )

1.5、Vue Instructions ( a key , Take a little book and remember )

1.5.1 Concept

         Set the label property vue The value of a variable is essentially special html Tag attributes , characteristic :  v- start .

         summary : hold vue The value of the variable , Given to dom Attribute , Affect the label display effect .

         Be careful : In the event this representative export default The following component object ( Subordinates have data in return The properties that come out )

 1.5.2 v-bind

grammar :v-bind: Property name ="vue Variable "

Abbreviation :: Property name ="vue Variable "

<!-- vue Instructions -v-bind Property dynamic assignment -->
<a v-bind:href="url"> I am a a label </a>
<!-- or -->
<img :src="imgSrc">
<template>
<div>
<a v-bind:href="hrefUrl"> Baidu </a>
<img :src="imgUrl">
</div>
</template>
<script>
export default {
//data This is followed by a function, not an object
data(){
return {
hrefUrl:'http://www.baidu.com',
imgUrl:'https://webpack.docschina.org/site-logo.1fcab817090e78435061.svg'
}
}
}
</script>
<style>
</style>

1.5.3 v-on The binding event

grammar :

  1. v-on: Event name =" A small amount of code to execute "
  2. v-on: Event name ="methods The function in "
  3. v-on: Event name ="methods The function in ( Actual parameters )" 

Abbreviation :@ Event name ="methods The function in "

<template>
<div>
<p> The number :{
{count}}</p>
<button v-on:click="count=count+1"> increase 1</button>
<button v-on:click="addFn"> increase 1</button>
<button v-on:click="se_addFn(5)"> increase 5</button>
<button @click="count=0"> Zero clearing </button>
</div>
</template>
<script>
export default {
data(){
return {
count:1
}
},
methods: { //methods And data Juxtaposition
addFn(){
this.count++;
},
se_addFn(number){
this.count += number;
}
},
}
</script>
<style>
</style>

         Commonly used @ Event name , to dom Tag binding events

Event object :vue In the event handler , Get the event object

         There is no reference , Receive parameters directly through formal parameters , adopt $event Refers to the event object passed to the event handler

<template>
<div>
<a @click="one" href="http://www.baidu.com"> Stop Baidu </a>
<hr>
<!-- If other formal parameters are passed in , Then the formal parameter of the event object must be $event-->
<a @click="two(10, $event)" href="http://www.baidu.com"> Stop going to Baidu </a>
</div>
</template>
<script>
export default {
methods: {
one(e){
e.preventDefault()
},
two(num, e){
e.preventDefault()
}
}
}
</script>

Here quietly Mimi tells you , In fact, there are abbreviations , Ha ha ha ha !!!

 1.5.4 v-on Event modifier

After the event . Modifier name : Modifiers extend additional functionality to events

grammar :@ Event name . Modifier ="methods Virial function "

Modifier category :

  1. .stop - Stop the event from bubbling
  2. .prevent - Blocking default behavior
  3. .once - Program duration , Trigger the event handler only once
<template>
<div @click="fatherFn">
<!-- vue Set the modifier for the event , After the event . Modifier names can be used for more functions -->
<button @click.stop="btn">.stop Stop the event from bubbling </button>
<a href="http://www.baidu.com" @click.prevent="btn">.prevent Blocking default behavior </a>
<button @click.once="btn">.once Program duration , Trigger the event handler only once </button>
</div>
</template>
<script>
export default {
methods: {
fatherFn(){
console.log("father Be triggered ");
},
btn(){
console.log(1);
}
}
}
</script>

1.5.5 v-on Key modifier  

Give keyboard events , Add a modifier , Enhance ability

grammar :( Not just the following

  1. @keyup.enter  -   Monitor the enter button
  2. @keyup.esc     -   Monitor the return key
<template>
<div>
<input type="text" @keydown.enter="enterFn">
<hr>
<input type="text" @keydown.esc="escFn">
</div>
</template>
<script>
export default {
methods: {
enterFn(){
console.log("enter The enter button ");
},
escFn(){
console.log("esc Press the key ");
}
}
}
</script>

built-in : 

  • .enter
  • .tab
  • .delete( Capture delete and backspace keys )
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

         Some buttons (.esc And all the direction keys ) stay IE9 Different key value , Want to support IE9, These built-in aliases are preferred

  You can also pass the overall situation config.keyCodes Object custom modifier alias :

Vue.config.keyCodes.f1 = 112

New system modifier : 

  • .ctrl
  • .alt
  • .shift
  • .meta

If there are too many, I won't list them one by one , I don't know. Find Du Niang , Ha ha ha ha !!!!

1.5.6 v-model

hold value Properties and vue Data variable , Two way binding together

  • Data changes -> View Auto sync
  • View changes -> Automatic data synchronization

grammar :v-model="vue Data variable "

Modifier Syntax :v-model. Modifier ="vue Data variable "

  • .number With parseFloat Turn to number type
  • .trim Remove leading and trailing whitespace
  • .lazy stay change When triggered instead of inupt when
<template>
<div>
<input type="text" placeholder=" user name " value="" v-model.trim="user" />
<input type="password" placeholder=" password " value="" v-model.number.trim="password" />
<hr>
<textarea name="" cols="30" rows="10" v-model.lazy="motto"></textarea>
</div>
</template>
<script>
export default {
data() {
return {
user:'',
password:'',
motto:""
}
},
};
</script>
<style>
</style>

1.5.7  v-text and v-html

grammar :

  • v-text="vue Data variable "    
  • v-html="vue Data variable "
<template>
<div>
<p v-text="str"></p>
<p v-html="str"></p>
</div>
</template>
<script>
export default {
data() {
return {
str:"<span> Text type </span>"
}
},
}
</script>
<style>
</style>

The operation results are as follows :

 1.5.8 v-show and v-if

grammar :

  • v-show="vue Variable "            
  • v-if="vue Variable " 

principle ( difference )

  • v-show With display:none hide   ( Frequently switch to use )
  • v-if   Directly from DOM Remove... From the tree
<template>
<div>
<p v-show="isOk1"> To rush </p>
<p v-if="isOk2"> To rush </p>
<div>
<p v-if="age>18">ok</p>
<p v-else>no</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isOk1:false,
isOk2:false,
age:19,
}
},
}
</script>
<style>
</style>

v-else Use :v-if If the judgment fails, execute v-else

1.5.9 v-for

grammar :

  • v-for="( value , Indexes ) in Target structure "
  • v-for=" value in Target structure "
<template>
<div>
<li v-for="(value, index) in arr" :key="index">
{
{ value }}-------{
{ index }}
</li>
<hr />
<li v-for="(value, index) in tObj" :key="index">
{
{ index }}------{
{ value }}
</li>
<hr />
<li v-for="obj in stuArr" :key="obj.id">
<span>{
{ obj.name }}</span>
<span>{
{ obj.sex }}</span>
<span>{
{ obj.hobby }}</span>
</li>
</div>
</template>
<script>
export default {
data() {
return {
arr: [" Xiao Ming ", " Xiao Huanhuan ", " rhubarb "],
stuArr: [
{
id: 1001,
name: " The Monkey King ",
sex: " male ",
hobby: " Eat peaches ",
},
{
id: 1002,
name: " Pig eight quit ",
sex: " male ",
hobby: " Back daughter-in-law ",
},
],
tObj: {
name: " Little black ",
age: 18,
class: "1 period ",
},
count: 10,
};
},
};
</script>
<style></style>

        v-for There's a fun , Some will update the page , Some won't :

  • Changing the array method will result in v-for to update , And the page is updated ;
  • Array non change method , Return a new array , It won't lead to v-for to update , You can use an overlay array or this.$set()

Changed array method :

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

Non change method :

  • slice()
  • filter()
  • concat() 

The basic instructions are almost , Continue to update later , Bye bye! !!!

Please bring the original link to reprint ,thank
Similar articles

2021-11-25