Declaration: the code is running under the full version, in index.html to introduce the full version of the code

el

El is the mount point of data main.js:

window.Vue.config.productionTip = false; const Vue = window.Vue; New Vue({el:'#app' template: '<div> hello </div>'})Copy the code

Of course, you can use $mount instead

window.Vue.config.productionTip = false;
const Vue = window.Vue;

new Vue({
  template:Hi ` < div > < / div > `
}).$mount('#app')
Copy the code

The page will render the word ‘hello’

Data — Internal data

This property supports both objects and functions, with the function object form being preferred:

new Vue({
  template:`<div>
    {{n}}
  </div>`,
  data:{
    n:0
  }
}).$mount('#app')
Copy the code

Functional form

window.Vue.config.productionTip = false;
const Vue = window.Vue;

new Vue({
  template:`<div>
    {{n}}
  </div>`,
  data(){
    return{
      n:0
    }
  }
}).$mount('#app')
Copy the code

Method the methods –

This method can be an event handler or a normal function

window.Vue.config.productionTip = false; const Vue = window.Vue; New Vue ({template: ` < div > {{n}} < button @ click = "add" > + 1 < / button > < hr / > < div > select the even number is: {{filter ()}} < / div > < / div > `, Data () {return {n: 0, array: [6]}}, the methods: {the add () {return this. N + = 1}, filter(){ return this.array.filter(i=>i%2===0) } } }).$mount('#app')Copy the code

components

There are three ways to import Vue components. The first way is to import demo. Vue from the outside.

<template>
    <div class="red">
       demo
       <hr/>
       {{n}}
       <button @click="add">+1</button>
    </div>
</template>
<script>
export default {
    data(){
       return {
        n:0
       } 
    },
    methods:{
        add(){
            this.n+=1
        }
    }
}
</script>
<style scoped>
  .red{
      color:red;
  }
</style>
Copy the code

main.js

window.Vue.config.productionTip = false;
const Vue = window.Vue;

import Demo from "./components/Demo";
new Vue({
  components: { Demo },
  template: `
   <Demo/>
  `,
}).$mount("#app");
Copy the code

The page displays the following results:



The second:

main.js

window.Vue.config.productionTip = false;
const Vue = window.Vue;

Vue.component("Demo2", {
  template: `<div>I am demo2</div>`,
});
new Vue({
  template: `
<div>
<Demo2/>
</div>
`,
  data() {
    return {
      n: 0,
    };
  },
}).$mount("#app");
Copy the code

The third kind of

window.Vue.config.productionTip = false;
const Vue = window.Vue;


new Vue({
  components: {
    Demo: {
      data() {
        return{
          n: 1,
        }
      },
      template: `<div>{{n}}</div>`,
    },
  },
  template: `
   <div><Demo/></div>
`,
  data() {
    return {
      n: 0,
    };
  },
}).$mount("#app");
Copy the code

The first method is preferred

Four hook

Created – Instances appear in memory

window.Vue.config.productionTip = false; const Vue = window.Vue; new Vue({ template: ` <div>{{n}} <button @click="add">+1</button> </div> `, data() { return { n: 0, }; }, methods: { add() { return (this.n += 1); },}, created(){debugger// can test on the page and have anything console.log(' appears in memory, does not appear in the page ')},}).$mount("#app");Copy the code

Note: At this point, the instance only appears in memory, not on the page.

Mounted – The instance appears in the page

window.Vue.config.productionTip = false; const Vue = window.Vue; new Vue({ template: ` <div>{{n}} <button @click="add">+1</button> </div> `, data() { return { n: 0, }; }, methods: { add() { return (this.n += 1); },}, created(){console.log(' console.log ')}, mounted(){console.log(' console.log ')},}).$mount("#app");Copy the code

Updated – The instance is updated

window.Vue.config.productionTip = false; const Vue = window.Vue; new Vue({ template: ` <div>{{n}} <button @click="add">+1</button> </div> `, data() { return { n: 0, }; }, methods: { add() { return (this.n += 1); },}, created(){console.log(' appears in memory, }, mounted(){console.log(' console.log ')}, Updated () {the console. The log (' data updated) console. The log (this. N)}}) $mount (" # app ");Copy the code

Destroyed – The instance is destroyed from the page and memory

The demo2.vue content is as follows:

<template> <div class="red"> {{n}} <button @click="add">+1</button> </div> </template> <script> export default { data:function(){ return { n: 0, array: [6]}}, created () {the console. The log (' appeared in the memory, }, mounted(){console.log(' console.log ')}, updated(){console.log(' console.log ')}, Destroyed (){console.log(' console.log ')}, methods:{add(){this.n+=1},}} </script> <style scoped> </style>Copy the code

Main.js contains the following contents:

const Vue = window.Vue; window.Vue.config.productionTip = false; import Demo2 from './components/Demo2' new Vue({ components:{Demo2}, data:{ visible:true }, template:` <div> <button @click="toggle">toggle</button> <hr> <Demo2 v-if="visible===true"/> </div> `, methods:{ toggle(){ this.visible=! this.visible } }, }).$mount("#app");Copy the code

The results are as follows:

props

External property through which data can be received from outside. Message =”‘n'” pass string :message=”n” pass this.n data :fn=”add” pass this.add function main.js code as follows:

  window.Vue.config.productionTip = false;
  const Vue = window.Vue;

import Demo3 from './components/Demo3'

new Vue({
 components:{Demo3},
 data:{
  n:0
 },
 template:`
 <div>
   {{n}}
  <Demo3 :message="'0'"/>
  <Demo3 message="0"/>
  <Demo3 :fn="add"/>
 </div>
 `,
 methods:{
   add(){
     this.n+=1
   },
 },
}).$mount("#app");
Copy the code

The demo3. vue content is as follows:

<template> <div class="red"> < {message}} <hr/> <button @click="fn"> Call fn</button> </div> </template> <script> export default { props:['message','fn'] } </script> <style scoped> .red{ color: red; border: 1px solid red; } </style>Copy the code