vue选项式api学习整理

一、vue官方文档：cn.vuejs.org/

二、选项式api基本结构：const app={}

const app = {
	data(){
		return {
			title:'hello world',
			count:0
		}
	},
	beforeCreate() {
		console.log('beforecreate');
	},
	created(){
		console.log('create');
	},
	beforeMount() {
		console.log('beforemount');
	},
	mounted(){
		console.log('mount');
	},
	components:{
		ComA,
	},
	methods:{
		click(){
			this.count ++
		}
	},            
}        
const vm = Vue.createApp(app).mount("#app")//定义vm变量，可以console调试
Vue.createApp(app).mount("#app")

三、选项式api两种引入vue的方式

1、常规src引入

<script src="vue.js"></script>
<script src="ComA.js"></script>
<script>
	const app={};
	const vm = Vue.createApp(app).mount("#app")
       
      /*
        如上ComA.js组件内容：
        const app = {***}
      */

</script>

2、es模块化引入

<script type="module">
	import {createApp} from 'vue-esm.js';//引入vue的es模块化版本
	import ComA from './components/ComA.js';//引入组件

	const app={};
	const vm = Vue.createApp(app).mount("#app")
     
     /*
    说明：模块化引入需要用import方式，被引入的js文件最后要以export或者export default的方式暴露给外部，优先采用这种写法。

    如果被引入js文件是以：
    1、export default暴露，则引入的时候写 import *** from ***
    2、export {a,b,c...}暴露，则引入的时候写 import {a,b,c} from ***

    如上ComA.js组件内容：
    const app = {***}
    export default app

    或者写成：
    export default{
            ***
    }
    */

</script>