本文目录一览：
- 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; //入口文件
}
}
转载于：