vue的几个基本属性

el挂载点

与$mount有替换关系

data 内部数据

支持对象和函数，优先使用函数

methods 方法

事件处理函数或者是普通函数

components

使用vue组件，组件的意思就是单独.vue文件

四个钩子

• created 实例出现在内存中

• mounted 实例出现在页面中

• updated 实例更新了

• destroyed 实例消亡了

• (用debugger可以理解)

props外部属性

• 两个属性值，message是变量，fn是一个函数

//Demo.vue
<template>
  <div>
    <div class="red">
      {{ message }}
      <button @click="fn">+1</button>
    </div>
  </div>
</template>

<script>
export default {
  props:['message','fn'], //两个属性
  created() {
    console.log(('这玩意儿出现在内存中'));
  },
  mounted() {
    console.log(('出现在页面中'));
  },
  updated() {
    console.log(('更新了'));
    console.log(this.n);
  },
  destroyed() {
    console.log(('已经消亡了'));
  },
}
</script>

<style scoped>
  .red{
    color: red;
  }
</style>

• 在template里面用到组件的两个变量,Demo的message等于n，fn接受一个add函数，所以props的作用就是组件中引出属性，可以是函数，然后在外部文件中调用

//main.js
import Vue from "vue/dist/vue.common";

Vue.config.productionTip = false;

import Demo from './Demo.vue'

const vm = new Vue({
    components: {Demo},
    data:{
    n:0
    },
    template: `
      <div>
      {{n}}
        <Demo :message="n" :fn="add"/>
      </div>
    `,
    methods:{
        add(){
            this.n+=1
        },
        toggle(){
            this.visible = !this.visible
        }
    }
    // render: h => h(Demo) 跟使用components加template效果一样，这里是为了演示
}).$mount("#app1");