Vue.js是什么

Vue(发音为/vju/，类似于view)是一个用于构建用户界面的渐进式框架。与其他大框架不同，Vue的设计是从下到上一层一层的应用。Vue的核心库只关注视图层，不仅易用，而且容易与第三方库或现有项目集成。另一方面，当与现代工具链和各种支持类库相结合时，Vue还可以为复杂的单页应用程序提供驱动程序。

如果你想在深入研究Vue之前了解更多，我们制作了一个视频，向你展示它的核心概念和一个示例项目。

如果你是一个有经验的前端开发人员，想知道Vue和其他库/框架的区别，请查看和比较其他框架。

预览(原文章的预览，未展开)

装置

使用NPM安装-保存-图片-预览-扩展

首先，将其引入项目的入口文件，并调用Vue.use进行安装。

从“vue-picture-preview”vue . use(vue picture review)导入vue picture review，将lg-preview组件添加到根组件

！-vue根组件模板-div id=' app ' router-view/router-view LG-preview/LG-preview/div对于所有图片，可以使用v-preview指令绑定它们的预览功能。

img ' v-for='(img，index)in imgs ' v-preview=' img . URL ' : src=' http : img . URL ' : alt=' img . title ' : key=' index ' preview-title-enable=' true ' preview-nav-enable=' true ' p Review-top-title-tnable=' true ' preview-title-extend=' false ' data-title='这里是顶部标题。以上是使用方法。下面我们来谈谈插件的api

原始api:

1.istitleenable:(布尔值，可选)设置preview-title-enable='false '将禁用底部标题。默认值为： true。

2.ishorizontalnavenable :(布尔值，可选)设置preview-nav-enable='false '将禁用水平导航。默认值为： true

扩展版本api:

1.iscurrentadalltitle:(布尔值，可选)设置preview-title-extend=false以关闭底部标题(当前页面/总页面)类型(打开时isTitleEnable)将无效。默认值：true 2。istotitleshow:(布尔值，可选)设置preview-top-title-tnable=false禁用top title，默认值：true 3。toptitle:(字符串，可选)设置数据标题以设置顶部标题文本，无默认值，扩展版本中的新功能(包括修改):

1.添加底部标题类型(原始类型采用alt属性，考虑到alt可能有其他用途或者只是想像index/total一样直接索要当前页面/total页面的底部标题，将不显示设置了alt的底部标题类型)

2.添加顶部标题(通过获取img上的数据标题集生成)

3.添加左右滑动开关图片

4.添加第一个提示和最后一个提示

还有人想说：

1.我本来是想把大家分组的(就是可能有很多组图片大家都想在同一个页面预览，所以插件可能不太满意)。但是因为公司时间紧迫，就没有做。想法是添加一个字段，比如数据组，然后对列表进行分组，然后给出具体的想法。如果有大老板想扩展，我可以无条件提供我现有的扩展代码。

摘要

以上是边肖介绍的Vue.js图片预览插件的使用详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！