Pictures, etc. ......




The root component , Three parts : Templates 、 Behavior ( Processing logic )、 style ;

Templates :

There can only be one root tag ;


After introducing the organization into the behavior , Use this tag to correlate them ;

Behavior :

import HelloWorld from './components/HelloWorld'

This is another component , Used to associate components , A component can be understood as a functional page , Projects are all done by multiple components ;

export default{


components:{ HelloWorld,Home }


Here is the registration component ; You need to introduce components first , To register again , Then write out the label , To make a real connection ;

4、main.js( important ):

Follow index.html There is a direct connection , When performing the index.html The next thing to do is main.js;

import Vue from 'vue'

introduce vue You can instantiate it below

new Vue({

el:'#app', //el:element,'#app' Namely index.html Medium id=‘app’

template:'<App/>', //'<App/>' The label of the component call

components:{ App } // call App This component


Vue-- Of src More articles about the document

  1. Vue frame -11- Introduce src File flow and root component app+HBuilder To configure

    Vue frame -11- Introduce src File flow and root component app+HBuilder To configure This is a brief introduction to the catalog : About editors , You can use lightweight Sublime Text 3, I'm using HBuilder, but ...

  2. vue Build the project The file import

    1.vue Reference dependent file .  give an example :axios Install first axios. If you install directly  vue-axios Will report a mistake npm install axios npm install --save axios vue ...

  3. front end vue Realization pdf Online preview of documents

    3. front end vue Realization pdf Online preview of documents I'm through <iframe> Labels can satisfy my work needs pdf Preview requirements If <iframe> Unable to meet demand , have access to pdf.js This plugin ...

  4. vue pack dist When you file , Picture not found

    1.vue pack dist When you file , Picture not found , You can't view it as if it were local Problem description : Native code :<div class="icon"><img :src="'../ ...

  5. vue File upload and download in

    Upload files vue There are two steps in file upload : The foreground obtains the file and submits it to the background get files Front desk get file , Mainly using input Box <el-dialog :title="addName&quo ...

  6. VUE Components Separate file encapsulation

    https://www.cnblogs.com/SamWeb/p/6391373.html vuejs Single file component .vue file   vuejs A custom .vue file , You can put html, css, ...

  7. Vue Merging multiple routing files

    Vue Merging multiple routing files 1. It uses ES6 Merging methods of arrays let routes = new Set([...routes1, ...homerouters]);2. Two routing files , What is derived is actually a ...

  8. vue And element-ui Upload files

    vue And element-ui Upload files File upload requirements ​ For file upload , In the actual project, our requirements are generally divided into two kinds : For a single file upload , For example, drag to upload a picture and so on , Or files . Upload with form ( This is generally the case ...

  9. vue Set header file

    vue The header file of is in the index.html Set in file , After all vue Entrance Let's start with the name of the tab : That's the name setting , Every tab has a different name , We need to do the following three steps :1. First , stay index.html file ...

  10. vue Upload files and Download the file

    Vue Upload files , You don't have to use anything element Of uplaod, It doesn't matter npm It's a bag written by the person you're looking for on the Internet , Just use the original Vue Add axios That's it , I don't say much nonsense , Go straight to the code :html: <input type= ...

Random recommendation

  1. java-android push

    Push done before , A lot of consideration , Finally, because of various factors , We chose the aurora .

  2. java ee Environment building

    1. install java(tm)2 platform 2. Download and install Java EE SDK edition :Java Platform,Enterprise Edition 7 SDK (with JDK 7u45) Next ...

  3. shell ***

    shell The assignments and operations in are string processing by default , Write down here shell *** . You can see it later when you use it , ha-ha 1. Examples of wrong methods a) var=1+1 echo $var The output is zero 1+1 ...

  4. shielding ps Networking activation

    shielding ps Networking activation C:\Windows\system32\drivers\etc\host127.0.0.1 lm.licenses.adobe.com127.0.0.1 na1r.services.a ...

  5. ubuntu Next Node.js Environment building

    Node.js It's one that can run on the server side JavaScript Open source . Cross platform JavaScript Running environment .Node.js from Node.js The foundation holds and maintains , And with Linux The foundation has a partnership .Node.j ...

  6. flashfxp v3.7 Registration code

    -------- FlashFXP Registration Data START --------FLASHFXPvwBW1S4QvwAAAAC5W5MNJwXnsl73i3CxcVAAvAyagF ...

  7. table Of td Adaptive matters

    media Of html structure , If you use display:table-cell Realization , table { width: 100%; border-collapse: collapse; border: $bor; ...

  8. Java Detailed explanation of built in thread pool and queue

    Java Thread pool instructions A brief introduction The use of threads in java It plays an extremely important role in , stay jdk1.4 Very much before jdk In the version , The use of thread pools is extremely crude . stay jdk1.5 After that, the situation has changed a lot .Jdk1.5 after ...

  9. sql server Query all locked tables and release them in batch

    I don't say much nonsense , Go straight to the code : -- Query the locked table select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) table ...

  10. ( original )android6.0 System PowerManager In depth analysis ( Very specific )

    summary all the time , Power management is a very important link in electronic product design . It is also one of the most important system modules in any electronic equipment , Excellent power management solution . It can provide lasting endurance , Good user experience . Can enhance the competitiveness of electronic products . Mobile device ...