Vue组件 —— 单文件组件

追溯vue组件问题

        在未讲项目之前,在 这一篇内容当中就讲到了组件引入使用,有内置的组件和动态组件以及封装一个swiper组件,组件也分为全局组件和局部组件,在讲在项目当中去使用组件之前先简单的回顾一下组件的编写:

Vue组件 —— 单文件组件_第1张图片

         在之前讲到 vue 组件的时候,将其封装成组件的时候很方便使用,但是在编写template模板的时候存在很多的问题,下面就将在前面未解决的问题在本篇内容当中来进一步的学习:

1. 组件起名称:js(script)中编写驼峰式,则html需要用连接符 -
2. 组件中编写DOM结构时:没有代码的高亮显示(解决:通过vue单文件组件解决)
3. 组件中编写DOM时用到css:只能写行内样式(解决:通过vue单文件组件解决)
4. template(模板):包含一个根节点(ps:将内容包裹起来)
5. 组件是孤岛,无法(直接)访问外边其他组件的状态或者方式(解决:间接的组件通信)
6. 自定义组件data必须是一个函数
7. 所有的组件写在同一个页面,代码很乱(解决:通过vue单文件组件解决)
 
补充:
    刚接触组件编写template模板中DOM结构会发现没有代码的提示,完全需要自己手敲,虽然用起来好用,但觉得不方便,这个在后面做项目的时候是通过vue单文件组件可以解决的,所以这些问题都在后续有其他的变化;
    使用组件可以进行引入使用,也使得组件像一座孤岛,那么组件与组件之间不能直接访问状态和方法,那么就需要通过组件与组件之间间接通信完成;
    可以回顾以上代码编写下来,script中编写的组件代码(Vue.component)内容还是蛮多的,如果还有其他的,那么这些代码和new Vue()中的代码混合会使整体代码很混乱,虽然解决了代码的耦合,但这些问题都能够得以解决;

        以上的这些问题就是先前我们编写组件的方式存在的问题,那么现在在项目当中,也是本篇目中最重要的内容就是Vue的单文件组件,接下来就是开始对Vue单文件组件内容的学习!

vue单文件组件

        通过简单的回顾了单文件组件的内容已经有了一个大概的了解,使用 Vue.components 来去定义组件,那么 vue单文件组件就是一个vue文件就是一个组件的形式,那么在存放组件的文件夹components中定义一个组件名为SayHello的组件;即 /components/SayHello.vue ;






        在使用的时候,只要将其引入在对应的 .vue 文件当中即可;在App.vue文件当中引入使用;

全局组件编写






局部组件编写




        然后将项目进行运行起来,如是同上一篇来的可使用【npm run start】或【npm start】,如是自己创建的项目未修改则使用【npm run serve】运行;

Vue组件 —— 单文件组件_第2张图片

        在浏览器中中访问地址 http://localhost:8080访问查看:可以看到刚刚编写的SayHello组件也可以正常使用成功了;

Vue组件 —— 单文件组件_第3张图片

         可以知道我们刚在编写这个组件的时候同样是在template标签当中,同时该标签中仅能存在一个div,这个vue单文件组件解决了在之前通过Vue.components(...)中存在的一些问题,如template中代码的编写没有高亮提示,编写起来不方便等的一些问题。


样式冲突 —— scoped

        在之前的内容中还存在什么问题呢?template模板中的组件编写DOM时只能用内联的css样式,现在通过单文件组件可以解决这个问题,那么仍存在这样一个问题,组件的引入使用中CSS样式是否会发生冲突呢?下面来简单的测试一下:

  • 在App.vue文件中去编写按钮样式style :

...

...

        现在来测试运行之后,观察组件中的 <按钮> 是否会与App.vue中的组件样式发生冲突:

Vue组件 —— 单文件组件_第4张图片

         在 标签中的

        现在可以看到的是可以通过选择添加id选择器的方式,那么接下来讲一种关于vue提高的另外一种解决方案;

2)scoped 

        可以不需要添加任何id选择,只需要在style标签种添加这样一个属性 —— scoped即可,添加这个属性后这这style的标签仅作用于当前这个组件;

         以上就是本篇目的全部内容,了解之前组件引入使用中留下问题的解决之法,一个vue单文件就是一个组件,以及单文件组件所带来的样式冲突问题,vue也同样提供了这样一套解决方案,在style标签当中使用scoped属性;本期内容就到此结束,感谢大家的支持!一键三连哦!


单页面 / 多页面

单页面应用【SPA】 多页面应用【MPA】
组成 一个外壳页面和多个页面片段组成 多个完整页面构成
资源(css/js)共用 共用,只需要在外壳部分加载 不共用,每个页面都需要加载
刷新方式 局部刷新或更改 全局刷新
url模式

xxx.com/#/one

xxx.com/#/two

xxx.com/one.html

xxx.com/two.html

用户体验 切换快,用户体验好 切换加载慢,流程度不够,体验差
转场动画 容易实现 无法实现
数据传递 容易 依赖url传参、或cookie/localStorage等
搜索引擎优化(SEO) 需要单独方案,实现较为困难,不利于SEO检索,可利用服务器端渲染(SSR)优化 实现方法简易
试用范围 高要求的体验度、追求界面流程的应用 适用于追求高度支持搜索引擎的应用
开发成本 较高,常需借助专业的框架 较低,但页面重复代码多
维护成本 相对容易 相对复杂

         为下一期关于路由 vue-router 相关的内容做基础!

你可能感兴趣的:(Vue,笔记相关,vue.js,前端,javascript)