如何利用Vue.js库中的v-show显示和隐藏元素

步骤：

创建静态页面vshowhtml，并修改title内容“Vuejs之v-show指令”，如下图所示：

引入Vuejs中的JavaScript文件，注意引入js的位置，如下图所示：

在body元素内部插入一个div，div标签内部插入三个p元素，分别加上v-if、v-else和v-show，如下图所示：

在div标签下方插入<script></script>元素，并在里面添加Vuejs代码，如下图所示：

预览该静态页面，这时会发现显示内容，如下图所示：

第六步，将local属性值改为“false”，再次预览该页面，如下图所示：

Vuejs（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vuejs 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

Vuejs 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vuejs 也能完美地驱动复杂的单页应用。

1 首先我们要改变我们要映入的外部js文件，改成以下这个格式。

代码：<pre class="html">function realconsole(){ alert("hellothanks use me"); } export { realconsole } </pre>

2 到我们的寄主那里，我们需要导入仿造的文件，方法是这样的：

代码：<pre class="html">&lt;template&gt; &lt;div class="teslist"&gt; &lt;button @click="methods1"&gt;显示console&lt;/button&gt; &lt;/div&gt; &lt;/template&gt; &lt;script src="//lib/myconsolejs"&gt;&lt;/script&gt; &lt;script&gt; import { realconsole } from '//lib/myconsolejs' export default { methods:{methods1:function(){ realconsole(); } }} &lt;/script&gt; &lt;style&gt; teslist { } &lt;/style&gt;</pre>

注意红色叉的部分，那是我们es5的写法，绿色才是正确的，下面是效果图

首先，引入公共样式时，我们在“mainjs”里使用AMD的方式引入,即

1require('/assets/css/mainless');

require(>

这时，我们会抛出一个错误，是因为我们没有写解析的依赖，webpack不知道怎么解析

这时，我们要填写上依赖，

1require('!style!css!less!/assets/css/mainless');

在很多以前的博客里都是以上写法，这个是Vue 20刚开始的，现在使用会报错；下面是正确写法

1require('!style-loader!css-loader!less-loader!/assets/css/mainless');

在以前配置到这里，就万事大吉了，也可以开始引入css文件了，然后现在到这里还会报错

当出现以上错误时，说明你的项目里缺少依赖；

1npm install style-loader --save

这时你就可以引入css文件了；

目前华为云出品的开源项目OpenTiny其中包含两个组件库项目一个是TinyVue还有一个是TinyNG当然还包含拥有主题配置系统/中后台模板/TinyCLI 命令行等效率提升工具

接着说下TinyVue是如何使用的：其实非常简单。

1 将TinyVue导入您的项目中。您可以通过npm或者手动下载方式将TinyVue导入您的项目中。

2 创建一个Vue实例。您可以在Vue实例中注册TinyVue的组件，以便在您的应用程序中使用这些组件。

3 在Vue实例中使用组件。您可以在Vue模板中使用TinyVue组件，以便在您的应用程序中显示这些组件。 例如，假设您已经将TinyVue导入您的项目中，并已经创建了一个Vue实例，现在您可以按照以下方式在模板中使用TinyVue的Button组件：

以上代码展示了如何在Vue模板中使用TinyVue的Button组件。在模板中，可以像使用普通的HTML元素一样使用TinyVue的组件，同时也可以为它们设置事件监听器，以便在用户与这些组件交互时，对这些事件进行响应。

再说下TinyNG是如何使用的：

1 下载并导入TinyNG组件库的CSS和JS文件到项目中。

2 在HTML文件中引入相关的CSS和JS文件。

3 在页面中使用组件库提供的组件和工具。

例如，使用按钮组件：

当然，除了按钮组件，还有很多其他的组件和工具，可以根据实际需求使用。

其实具体的可以直接进入OpenTiny官网 里面有具体的文档说明并提供了详细的组件和工具的使用说明和示例代码，使用起来也是非常方面。现如今组件库其实非常多，OpenTiny核心优势也是非常明显。所以大家感兴趣也可以去尝试下。

说到Web前端组件库，OpenTiny其实是个非常不错的选择，具体说起来，首先想到的就是组件丰富：主要有70+基础组件，1500+组件API，接口、功能和细节配置都是非常丰富的，同时Table、Tree、Select等高频组件均内置虚拟滚动，在10万大数据场景下保持丝滑体验，性能是非常高的。然后就是TinyVue采用组件与框架分离的设计理念，将组件逻辑抽离成纯函数，实现跨端、跨框架、跨版本，灵活可配，适应未来。同时两个组件库是涵盖 Vue2/Vue3/Angular 多技术栈。并且支持数据驱动的配置式使用方式。最后其实TinyVue和TinyNG两个组件库都可以称得上企业级安全保障，所有接口杜绝 XSS 攻击，100% 安全放心，节省代码看护成本。并且组件库使用也是非常稳定的，经过九年持续打磨，服务于上千个项目，千锤百炼，稳定可靠。

如果你OpenTiny 的开源项目感兴趣，也可以添加小助手微信：opentiny-official，拉你进群，一起交流前端技术，一起玩开源。

您好，这个图标是需要自己设置的。
怎么在我们的Vue项目中设置自定义的网站图标：
首先我们需要先制作个ico图标，大小为3232的，放到static文件夹下，我们把制作好的ico改名为：faviconico（注：必须改名），放到我们项目中的static文件夹下。
分别在webpackprodconfjs和webpackdevconfjs里面配置ico图标路径：添加代码：favicon: pathresolve('static/img/faviconico') // 设置网站图标，即可。

1、新建html文档，然后在head标签中引入vue的js文件，这里以引入cdn文件为例：

2、在body标签中添加一个id为“app”的div标签，然后在这个div标签中再添加一个div标签，在vue中添加一个变量数据，然后用“{{}}”符号将变量引入到div标签中，并且在标签中添加“v-html="变量"v-html="变量"”属性：

3、用浏览器打开html文档，这时可以在页面中看到被v-html指令添加的html元素：

---