本文目录一览：

• 1、如何利用Vue.js库中的v-show显示和隐藏元素
• 2、如何利用Vue.js库中的v-if内部指令判断元素显示
• 3、如何利用Vue.js库绑定HTML标签内的class属性值
• 4、.vue文件怎么写js代码
• 5、vuePress里面怎么写vue.js代码

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

步骤：

创建静态页面vshow.html，并修改title内容“Vue.js之v-show指令”，如下图所示：

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

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

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

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

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

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

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

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

如何利用Vue.js库中的v-if内部指令判断元素显示

Vue.js库中带有一些内部指令，有v-if、v-show、v-else、v-on等。其中，v-if是根据表达式的值判断一个元素是生成或移除，如果判断为true，就生成元素；否则，移除元素。下面利用一个实例说明v-if的用法，操作如下：

工具/原料

Vue.js

HBuilder

截图工具

浏览器

方法/步骤

第一步，创建静态页面vif.html，为了表达v-if指令实例，添加title内容，如下图所示：

第二步，引入Vue.js核心js文件

script src="../js/vue.min.js" /script

如下图所示：

第三步，在body元素内部插入一个div和p，并给div一个id值，p元素内添加一个v-if，值为boolean，内部内容为“欢迎使用Vue.js”，如下图所示：

第四步，在script/script中编写Vue.js代码，设置el和data数据，预览页面，如下图所示：

第五步，将data内boolean设置为false，设置完毕，进行查看效果，如下图所示：

第六步，再次预览页面，发现“欢迎使用Vue.js”不显示出来，如下图所示：

如何利用Vue.js库绑定HTML标签内的class属性值

第一步，创建静态页面vtext.html，修改title显示的内容并引入vue.js，

第二步，在body标签元素内插入两个span元素，在第一个span绑定v-text指令，第二个span中插入{{message}}，

第三步，编写JS代码，绑定数据源message，

第四步，预览静态页面vtext.html，发现{{message}}还是一样，未变成赋的值，

第五步，在两个span外层添加一个div，并将第一个span的id赋给div，再在第一个span标签上绑定v-model，

第六步，再次预览发现页面中的{{message}}变为绑定的数据源.

.vue文件怎么写js代码

单个组件里面可以使用 import $ from 'jquery' 引用

当前你得使用npm把jquery 安装了。 把jquery 用export default 导出来(就是在jquery.js的最后一行写上 export default $)， 然后使用import $ from ‘jquery的文件地址’

至于 script标签里面怎么写

import $ from 'jquery'

export default {

  data: function() {

    return {

      testData: 1 // 这个对象里面定义所有的变量 这些变量可以 在html直接和dom绑定

    }

  },

  mounted: function() {

    // 生命周期函数， 有好几个 执行的顺序都不一样，可以根据场景 选择不同的生命周期函数 这块一般是初始化数据的地方

  },

  methods: { // 这里写所有的方法， 这些方法可以在 方法内部使用this.方法名调用，也可以在html 中使用@时间名 = ‘函数名()’调用

    init() {  

      // 实例方法

      // 使用this.变量可以访问data中的变量

      console.log(this.testData)

    }

  }

}

vuePress里面怎么写vue.js代码

2.1 新建文件夹docs

配置package.json，添加下述两行

{

"scripts": {

"docs:dev": "vuepress dev docs",

"docs:build": "vuepress build docs"

}}

进入docs文件夹 创建 README.md文件

此时运行命令

npm run  docs:dev

此时文件夹结构

study

+--docs

+----README.md

+--package.json

运行访问

image.png

结束运行 ，执行命令

npm run docs:build

然后看文件变化 多了个node_modules

docs  多了个 .vuepress文件夹

study+--docs+----.vuepress+------ dist   //打包后的文件夹+----README.md+--package.json+--node_modules

我们在.vuepress 创建

config.js 文件

添加

module.exports = {

title: 'Adroi媒体API 接口文档',  // 设置网站标题

description : 'Adroi',

base : '/v1/adroi-h5/adroiapi/',

themeConfig : {

nav : [

{ text: '接口定义', link: '/apiword' },

{ text: '接口字段定义', link: '/api' },

{ text: '附录：错误码', link: '/error' }

],

sidebar: {

'/' : [

"/", //指的是根目录的md文件 也就是 README.md 里面的内容

"apiword",  根目录创建 apiword.md文件            "api",根目录创建 api.md文件            "error" 根目录创建 error.md文件        ]

},

sidebarDepth : 2

}}

image.png

3）添加静态图片


4)添加指定样式

添加样式 分两种  一种不用预编译处理、一种使用

//不使用预编译处理//直接在md文件底部添上style/style

//使用预编译处理

首先需要安装所需的模块  举例：stylus

npm i stylus stylus-loader -Dstyle lang="stylus"/style

5)vuePress可添加js代码

既然是尤大大的作品 那肯定是支持vue语法的

在MD文件中直接写入js的语法

script

export default{

//...do something

}/script

6)代码发布或上传至服务器

关于发布问题：首先我们知道在打包后的文件都是静态文件之前的MD文件都被打包成html静态文件了,其次在文件config.js中 base至关重要

6-1发布在云盘中如百度云盘 github上可直接通过链接访问

在云盘上创建根目录如vuepress，然后在config中 bese这部分就填写/vuepress,然后进行打包操作，再然后把打包后的文件上传至云盘上的vuepress文件中

6-2 通过服务器发布

在服务器上安装Apache或者nginx 这里拿nginx举例：

至于nginx 安装 以及配置文件的解读使用 我这里就不详述了，不了解的童鞋可以自己查阅相关文件

同样base的填写很重要

//为了简单明了 我们把打包好的文件放入nginx中html文件下  之前的文件可以清空server {

listen  8081;  //监听8081端口

server_name  localhost; //localhost:8081即可指向也可写别名如local.vuepress.com.cn  那我们访问这个端口的别名加端口就可以

location / {

root   /nginx/nginx-1.9.15/html; //至关重要你的入口文件在本机的位置

index  index.html index.htm; //入口文件

}

}

转载于：