vuejs刻度尺代碼,vue刻度尺組件

本文目錄一覽：

• 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; //入口文件

}

}

轉載於：