Vue初识二

一、Vue实例

const vm=new Vue(options)

①vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新

②vm的构造函数是Vue，按照es6的说法，vm所属的类是Vue

③options是new Vue的参数，一般称为选项或构造选项

二 入门属性

1.el挂载点

①第一种写法，值为index.html中div的值

new Vue({
    el: '#frank',
    render: h => h(demo)
});

②第二种写法:用$mount替代el

new Vue({
    render: h => h(demo)
}).$mount('#frank');

2.data内部数据：支持对象和函数

①对象

new Vue({
    data: {
        n: 0
    },
    ...
})

②函数

new Vue({
    data() {
        return {
            n: 0
        }
    ...
    },
})

3.methods方法

new Vue({
    data(){
       return {
       n:0,
       }
    },
    methods:{
    add(){
        this.n+=1
        }
    }
 })

4.components组件

import 组件名 from './xxx.vue'
new Vue({
  components:{
    xxx
  },
})

5.四个钩子

①created--实例出现在内存中

new Vue({
	created(){
  	console.log('出现在内存中')
  }
})

②mounted--实例出现在内存中

new Vue({
	created(){
  	console.log('出现在页面中')
  }
})

③updated--实例更新

new Vue({
	updated(){
  	console.log('实例更新l')
  }
})

④destroyed--实例更新

props外部属性

1.新建组件

<template>
    <div class="red">
	这里是Demo的内部 {{message}}
    </div>
    <button @click=""fn></button>
</template>

<script>
  export default {
    props : ['message','fn']
  }
</script>

2.在main.js中传递参数

new Vue({
    components:{demo},
  data(){
  	return{
    	n:0;
    }
  },
  methods:{
      add(){}
  }
 template:`
    <demo :message="n"/>  //message加:表示n是一个变量
    <demo :fn="add"/>
	`
}).$mounth("#div")