vue知识整理

一、vue官方文档：https://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")

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

1、常规src引入

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

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")
</script>

/*
说明：模块化引入需要用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{
	***
}
*/