声明:代码均是在完整版下运行，在index.html下引入完整版代码即可

el

el是数据的挂载点
main.js:

window.Vue.config.productionTip = false;
const Vue = window.Vue;
new Vue({
 el:'#app'
  template:`<div>
    你好
  </div>`
})

当然，也可以用$mount代替

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

new Vue({
  template:`<div>
    你好
  </div>`
}).$mount('#app')

页面会渲染出'你好'这两个字

data——内部数据

该属性支持对象和函数，优先使用函数
对象形式:

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

函数形式

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

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

methods——方法

该方法可以是事件处理函数或者是普通函数

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

new Vue({
  template:`<div>
    {{n}}
    <button @click="add">+1</button>
    <hr/>
    <div>筛选出的偶数为:{{filter()}}</div>
  </div>`,
  data(){
    return{
      n:0,
      array:[1,2,3,4,5,6]
    }
  },
  methods:{
    add(){
      return this.n+=1
    },
    filter(){
      return this.array.filter(i=>i%2===0)
    }
  }
}).$mount('#app')

components

Vue组件,有三种引入方式
第一种,从外部引入
Demo.vue的内容如下:

<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>

main.js

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

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

页面显示的结果:

第二种:
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");

第三种

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");

优先使用第一种方式

四个钩子

created-实例出现在内存中

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//可以测试 页面上并有任何东西
    console.log('出现在内存中，没有出现在页面中')
   },
}).$mount("#app");

注意:此时，实例只是出现在内存中，并未出现在页面中。

mounted-实例出现在页面中

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('出现在内存中，没有出现在页面中')
  },
  mounted(){
    debugger
   console.log('出现在页面中')
  },
}).$mount("#app");

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('出现在内存中，没有出现在页面中')
   },
   mounted(){
    console.log('出现在页面中')
   },
   updated(){
    console.log('数据更新了')
    console.log(this.n)
   }
}).$mount("#app");

destroyed—实例从页面和内存中消亡了

Demo2.vue内容如下:

<template>
<div class="red">
 {{n}}
 <button @click="add">+1</button>
</div>
</template>
<script>
export default {
      data:function(){
    return {
      n: 0,
      array:[1,2,3,4,5,6]
    }
  },
 created(){
  console.log('出现在内存中，没有出现在页面中')
 },
 mounted(){
  console.log('出现在页面中')
 },
 updated(){
  console.log('更新了')
  console.log(this.n)
 },
 destroyed(){
     console.log('已经消亡了')
 },
 methods:{
   add(){
     this.n+=1
   },
 }
}
</script>
<style scoped>

</style>

main.js内容如下:

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");

结果如下:

props

外部属性，通过此属性可以接受外部传过来的数据。
message="'n'" 传入字符串
:message="n"传入this.n数据
:fn="add"传入this.add函数
main.js代码如下:

  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");

Demo3.vue内容如下:

<template>
<div class="red">
    Demo的内部
  {{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>

Vue入门属性

el