应用 & 组件实例
- 主要是总结一下，之前的那些demo, 回顾并加点术语
- 东西还是那东西， 用法还是那用法， 逼格提升篇
1. 创建一个应用实例
- 创建一个应用实例,
Vue.createApp(), 允许链式
<body>
<div id="container">
</div>
</body>
<script type="text/javascript">
const cfg = {
data(){
return {
}
}
}
const app = Vue.createApp(cfg);
app.component('SearchInput', SearchInputComponent);
app.directive('focus', FocusDirective);
app.use(LocalePlugin);
// 允许链式
Vue.createApp(cfg).component('SearchInput', SearchInputComponent).directive('focus',FocusDirective).use(LocalePlugin);
</script>
2. 根组件
- 组件通过html的挂载点,挂到页面上.
- 组件是啥？ 一个个组成的部分，组成的单位。
- 挂载应用时, 作为渲染起点.
- 渲染起点：简答说用html展示数据，选中的（通过类、id... 选择器选中的）html就是渲染起点。
- 挂载：把数据渲染到html就是挂载数据
const RootComponent = {
}
const app = Vue.createApp( RootComponent );
const vm = app.mount('#container'); //根组件实例, vue-model,
- 真实应用都是被组织成一个
嵌套的、可重用的组件树- 理解： 拆分， 然后把能复用的拿出来就用
- 好处： 整体视觉统一，
拆分维护方便,一改都改，减少代码量 - 总之，
组件要拆分的很小
Root Component
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
3. 组件实例property
组件实例 property(property中文翻译: 属性), 就是组件属性- 理解组件实例， 简单的来说， mount了。 就是组件的实例。否则还在加载渲染呢
- 组件实例property： 就是创建的
实例的属性, - 就是 vm 的属性比如， data, methods … 在它身上挂着的属性
const app = Vue.createApp({
data() {
return {
count: 4 }
}
})
const vm = app.mount('#app')
console.log(vm.count) // => 4
组件实例 property(property中文翻译: 属性), 就是组件属性- 组件的属性,通过组件实例进行暴露.
什么暴露？ 就是调用。 只不过这块组件的属性 用实例进行调用！
- 属性(property)有哪些?
- data, methods, props, computed, mounted, inject, setup … 内置属性以 $ 开头, $attrs , $emit …
4. 生命周期钩子
- 生命周期： 在每个组件被创建时经过一系列的初始化过程,
- 过程中也会运行一些叫做生命周期钩子的函数, 给了用户在不同阶段添加自己的代码的机会
- 所谓生命周期钩子，就是
在某个动作触发执行之前、之后，会被系统自行调用执行的函数， 那你在这个会被调用的函数里添加自己的操作，场景触发自然也会自动被调用。 - 那有哪些钩子啊？？
- 所谓生命周期钩子，就是
5. 来理解一下生命周期钩子函数的调用
- 例子， 写个created 钩子使用的demo
created钩子作用： 可以用来在一个实例被创建之后，立即自动执行内部代码
Vue.createApp({
data() {
return {
count: 1}
},
created() {
// `this` 指向 vm 实例
console.log('count is: ' + this.count) // => "count is: 1"
}
})
总结：
- 创建应用实例， 应用也必须有一个根组件进行挂载
- 创建挂载点和挂载， 根组件和其他组件
- 组件实例的属性很多， 组件实例进行的调用
- 组件编写，要服用强，要拆分方便，容易维护。尽量拆解成单个功能块的组件。
- 生命周期钩子，和生命周期钩子函数的使用， 根据时机进行触发。 什么时机？ 生命周期运行的时机。
hello world!
Author: Silvercell
Happy coding everyday!
欢迎关注我的专栏，打赏，请我喝个🍺啥的，
哈哈哈哈哈哈， 点赞👍，评论，关注，素质三连~ 素质白嫖
转载：https://blog.csdn.net/silvercell/article/details/115873342
查看评论