Vue学习
在对Vue进行学习的时候,通过其官方文档能够精准而又快速的了解Vue框架具有的各种功能及其详细的API,但我也发现官方文档主要是基于HTML、CSS、JS文件直接引入包来进行Vue的使用的,这导致同样的东西在写法上或者目录结构安排上会有一些不一样的地方,因此我补充学习了相关视频,为了快速上手功能开发本文打算都基于.vue单文件的工程开发模式结合官方文档进行学习
指令
Vue指令是带有v-前缀的特殊标签属性。
v-show的底层原理是控制css的display: none标签来控制显示和隐藏,而v-if是根据条件判断控制创建或移除元素。v-show适合频繁切换显示和隐藏的场景,比如购物车略缩窗口,v-if则适合不频繁的。v-else和v-else-if指令则是辅助v-if进行判断渲染,需要紧挨v-if进行使用,
Vue工程化
Vue项目创建完毕后关键文件就三个,main.js、index.html、App.vue。
index.html是模板文件,在传统开发中,我们是直接把相关的模板语法编写在html文件中的,现在则是通过App.vue提供结构渲染。main.js核心作用是导入App.vue根组件,基于App.vue创建结构渲染index.html。
项目启动流程是先在main.js中导入Vue、导入App.vue、再实例化Vue,将App.vue渲染到index.html容器中。
组件化
主要分为头部组件、导航组件、主题组件、底部组件,组件下又会有很多组件,各个组件都在App.vue根组件之中,其是整个应用最上层的组件。
.vue单文件组件包含三个结构——template标签、行为——script标签、样式——stlye标签。
在script标签中export default的作用是导出当前组件的配置项,对应大括号里可以进行和官方文档中一样编写选项对象、生命周期钩子的操作。