整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          在html5頁面中如何使用vue3

          天是2021.7.14,是個好日子.好久沒發布文章了.今天發布下如何在在html頁面中使用vue3.義縣游學電子科技一直以技術文章為主.以下是h5的頁面源碼:

          <html>

          <script src="https://unpkg.com/vue@next"></script>


          <body>

          <div id="vue">

          <div v-html="rhtml"></div>

          <props-demo-simple></props-demo-simple>


          </div>


          </body>

          <script>

          const htmls={

          data(){

          return{

          rhtml:"<h1>html頁面中引用VUE3的演示頁面</h1>",

          }

          }

          }


          const app=Vue.createApp(htmls)


          // 簡單語法注冊或獲取全局組件.注冊還會自動使用給定的 id 設置組件的名稱

          app.component('props-demo-simple', { data() {

          return {

          count: 0

          }

          },

          props: ['size', 'myMessage'],template: `

          <button v-on:click="count++">

          You clicked me {{ count }} times.

          </button>`

          }



          )

          app.mount("#vue")

          </script>

          </html>

          分析下:首先<script src="https://unpkg.com/vue@next"></script>,引入vue3的腳本地址. 然后在body下的<script>中書寫vue3的代碼即可. 下圖是運行的結果效果

          節內容是"VBA信息獲取與處理"教程中第八個專題"VBA與HTML文檔"的第五節。,希望想掌握這方面知識的朋友能參考我的教程學習。

          第五節 HTML文檔的訪問端口DOM (Document Object Model)

          大家好,我們繼續對HTML文檔進行學習,在前幾節中我們認識了網頁文檔上面的各種元素,那么我們又該怎么訪問他們呢,是如何實現呢?其實,HTML文檔,提供了訪問其元素的端口,這就是HTML DOM,其定義了一套標準的針對 HTML 文檔的對象訪問或操作的機制。HTML DOM 定義了所有 HTML 元素的對象和屬性,以及訪問它們的方法。換言之,HTML DOM 是關于如何獲取、修改、添加或刪除 HTML 元素的標準。

          1 HTML DOM (Document Object Model) 對象集合

          每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。Document 對象是 HTML 文檔的根節點。

          特別注意:Document 對象是 Window 對象的一部分,可通過 window.document 屬性對其進行訪問。

          集合 描述

          all[] 提供對文檔中所有 HTML 元素的訪問。

          anchors[] 返回對文檔中所有 Anchor 對象的引用。

          applets 返回對文檔中所有 Applet 對象的引用。

          forms[] 返回對文檔中所有 Form 對象引用。

          images[] 返回對文檔中所有 Image 對象引用。

          links[] 返回對文檔中所有 Area 和 Link 對象引用。


          VBA直接支持調用的對象有限,如下:

          對象 描述

          Document 代表整個 HTML 文檔,可被用來訪問頁面中的所有元素

          Anchors 代表 <a> 元素集合

          Body 代表 <body> 元素

          Forms 代表 <form> 元素集合

          Frames 代表 <frame> 元素或<iframe> 元素集合

          Images 代表 <img> 元素集合

          Links 代表 <link> 元素集合

          Options 代表 <option> 元素集合(select元素里面可以直接使用)

          Cells 代表 <td> 元素集合(table元素里面可以直接使用)

          Rows 代表 <tr> 元素集合(table元素里面可以直接使用)

          All 對象集合,提供對文檔中所有 HTML 元素的訪問。


          上述VBA支持直接調用對象的元素,調用起來就非常方便了,可以用序號調用,例如forms(0),也可以按名稱/ID調用,例如forms("名稱/ID")。其他沒法直接調用對象的元素,可以間接從通用all對象集合中去調用該元素或該元素對應的dom對象。

          2 HTML DOM 文檔的節點及文檔樹

          在HTML DOM中,所有事物都是節點。DOM 是被視為節點樹的 HTML文檔的每一部分都是節點,整個文檔被定義為一個文檔節點,每個標簽是一個元素節點,包含在元素中的文本是文本節點,每一個元素的屬性是一個屬性節點。如下:

          1)整個文檔是一個文檔節點

          2)每個 HTML 元素是元素節點

          3)HTML 元素內的文本是文本節點

          4)每個 HTML 屬性是屬性節點

          5)注釋是注釋節點


          HTML DOM 將 HTML 文檔視作樹結構。這種結構被稱為節點樹,這時一個非常形象的比喻,根節點就是html,主干就是body等,枝干就是body內含的各種元素節點,葉子和花就是元素節點關聯的元素的屬性(屬性節點)或內含文本(文本節點)。


          通過 HTML DOM,樹中的所有節點均可通過 JavaScript 進行訪問。所有 HTML 元素(節點)均可被修改,也可以創建或刪除節點。節點樹中的節點彼此擁有層級關系。父(parent)、子(child)和同胞(sibling)等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞(兄弟或姐妹)。

          網頁文檔,可以說是由元素組合而成的,也可以說是由節點連接而成的樹構造的。節點是文檔樹結構中特有的名詞,元素是節點,但是節點不一定是元素,節點還有文檔節點、文本節點、屬性節點等;元素是元素節點的擴展,元素可以擁有屬性還有文本。初學者不是很必要糾結元素和節點的區別,這個需要甚至數據結構、類和繼承等知識。可大致理解為,同一個html dom對象,提供的兩個不同接口。如下的程序,你會發現,他既有支持node(節點)的相關屬性和方法,也提供了element(元素)的相關屬性和方法。


          Sub MYNZ()

          Dim ie, dmt, bd

          Set ie = CreateObject("InternetExplorer.Application") '創建一個IE對象

          With ie

          .Visible = True '顯示它

          .navigate "http://www.baidu.com" '加載某個頁面

          Do Until .ReadyState = 4 '等待頁面加載完畢

          DoEvents

          Loop

          Set dmt = .document '將IE瀏覽器加載的頁面文檔,賦予dmt變量

          Set bd = dmt.body '將文檔的body賦予bd變量

          End With

          End Sub


          代碼截圖:

          按F8鍵運行截圖:

          3 HTML DOM 文檔的對象屬性

          屬性是節點(HTML 元素)的值,您能夠獲取或設置。所有 HTML 元素被定義為對象,而編程接口則是對象方法和對象屬性。我們看看下面一些常見的屬性:


          1)innerHTML 屬性 對象內部的HTML代碼,是獲取元素內容的最簡單方法。innerHTML 屬性對于獲取或替換 HTML 元素的內容很有用。

          下面的代碼獲取 id="intro" 的 <p> 元素的 innerHTML:

          <script>

          var txt=document.getElementById("intro").innerHTML;

          document.write(txt);


          2)OuterHtml:對象的HTML代碼,包括對象本身的HTML標簽


          3)innerText:對象內部的文本


          4)OuterText:對象的文本,包括對象本身的文本


          5)nodeName 屬性 nodeName 屬性規定節點的名稱。

          nodeName 是只讀的

          元素節點的 nodeName 與標簽名相同

          屬性節點的 nodeName 與屬性名相同

          文本節點的 nodeName 始終是 #text

          文檔節點的 nodeName 始終是 #document


          注釋:nodeName 始終包含 HTML 元素的大寫字母標簽名。


          6)nodeValue 屬性 nodeValue 屬性規定節點的值。

          元素節點的 nodeValue 是 undefined 或 null

          文本節點的 nodeValue 是文本本身

          屬性節點的 nodeValue 是屬性值


          7)nodeType 屬性 nodeType 屬性返回節點的類型。nodeType 是只讀的。

          比較重要的節點類型有:


          元素類型 NodeType

          元素 1

          屬性 2

          文本 3

          注釋 8

          文檔 9


          以上只是給出了屬性值,大家在使用的時候要注意。


          本節知識點回向:


          什么是HTML DOM文檔的屬性,常用的屬性有哪些。


          本節參考文件:008工作表.xlsm

          積木編程的思路內涵:

          在我的系列書籍中一直在強調"搭積木"的編程思路,這也是學習利用VBA的主要方法,特別是職場人員,更是要采用這種方案。其主要的內涵:

          1 代碼不要自己全部的錄入。你要做的是把積木放在合適的位置然后去修正代碼,一定要拷貝,從你的積木庫中去拷貝,然后修正代碼,把時間利用到高效的思考上。

          2 建立自己的"積木庫"。平時在學習過程中,把自己認為有用的代碼放在一起,多積累,在用到的時候,可以隨時拿來。你的積木庫資料越多,你做程序的思路就會越廣。

          VBA的應用界定

          VBA是利用Office實現個人小型辦公自動化的有效手段(工具)。這是我對VBA的應用界定。在取代OFFICE新的辦公軟件沒有到來之前,誰能在數據處理方面做到極致,誰就是王者。其中登峰至極的技能非VBA莫屬!

          我記得20年前自己初學VBA時,那時的資料甚少,只能看源碼自己琢磨,真的很難。20年過去了,為了不讓學習VBA的朋友重復我之前的經歷,我根據自己多年VBA實際利用經驗,推出了六部VBA專門教程:

          第一套:VBA代碼解決方案 是VBA中各個知識點的講解,教程共147講,覆蓋絕大多數的VBA知識點,初學必備;

          第二套:VBA數據庫解決方案 數據庫是數據處理的專業利器,教程中詳細介紹了利用ADO連接ACCDB和EXCEL的方法和實例操作,適合中級人員的學習。

          第三套:VBA數組與字典解決方案 數組和字典是VBA的精華,字典是VBA代碼水平提高的有效手段,值得深入的學習,是初級及中級人員代碼精進的手段。

          第四套:VBA代碼解決方案之視頻 是專門面向初學者的視頻講解,可以快速入門,更快的掌握這門技能。這套教程是第一套教程的視頻講解,聽元音更易接受。

          第五套:VBA中類的解讀和利用 這是一部高級教程,講解類的虛無與肉身的度化,類的利用雖然較少,但仔細的學習可以促進自己VBA理論的提高。這套教程的領會主要是讀者的領悟了,領悟一種佛學的哲理。

          第六套教程:《VBA信息獲取與處理》是一部高級教程,涉及范圍更廣,實用性更強,面向中高級人員。教程共二十個專題,包括:跨應用程序信息獲得、隨機信息的利用、電子郵件的發送、VBA互聯網數據抓取、VBA延時操作,剪切板應用、Split函數擴展、工作表信息與其他應用交互,FSO對象的利用、工作表及文件夾信息的獲取、圖形信息的獲取以及定制工作表信息函數等等內容。

          大家可以根據以上資料1→3→2→6→5或者是4→3→2→6→5的順序逐漸深入的逐漸學習。教程提供講解的同時提供了大量的積木,如需要可以WeChat: NZ9668


          學習VBA是個過程,也需要經歷一種枯燥的感覺

          如太白詩云:眾鳥高飛盡,孤云獨去閑。相看兩不厭,只有敬亭山。學習的過程也是修心的過程,修一個平靜的心。在代碼的世界中,心平靜了,心情好了,身體自然而然就好。心靜則正,內心里沒有那么多邪知邪見,也就沒有那么多妄想。利人就是利己。這些教程也是為幫助大家起航,助上我自己之力,我的上述教程是我多的經驗的傳遞,

          "水善利萬物而不爭",綿綿密密,微則無聲,巨則洶涌。學習亦如此,知道什么是自己所需要的,不要蜷縮在一小塊自認為天堂的世界里,待到暮年時再去做自欺欺人的言論。要努力提高自己,用一顆充滿生機的心靈,把握現在,這才是進取。越是有意義的事情,困難會越多。愿力決定始終,智慧決定成敗。不管遇到什么,都是風景。看淡紛爭,看輕得失。茶,滿也好,少也好,不要計較;濃也好,淡也好,其中自有值得品的味道。去感悟真實的時間,靜下心,多學習,積累福報。而不是天天混日子,也不是天天熬日子。在后疫情更加嚴峻的存量殘殺世界中,為自己的生存進行知識的儲備,特別是新知識的儲備。學習時微而無聲,利用時則巨則洶涌。

          每一分收獲都是成長的記錄,怎無憑,正是這種執著,成就了朝霞的燦爛。最后將一闕詞送給致力于VBA學習的朋友,讓大家感受一下學習過程的枯燥與執著:


          浮云掠過,暗語無聲,

          唯有清風,驚了夢中啼鶯。

          望星,疏移北斗,

          奈將往事雁同行。

          阡陌人,昏燈明暗,

          忍顧長亭。

          多少VBA人,

          暗夜中,悄聲尋夢,盼卻天明。

          怎無憑!


          回向學習利用VBA的歷歷往事,不勝感慨,謹以這些文字給大家,分享我多年工作實際經驗的成果,隨喜這些有用的東西,給確實需要利用VBA的同路人。


          分享成果,隨喜正能量

          碼地址:https://gitee.com/itsoft7/itbi-vue

          一、實現目標

          1. 登錄頁面的實現
          2. 主界面的布局
          3. 導航菜單的實現

          二、了解vue的目錄結構

          淺談一下vue的目錄結構,對vue小白用,大神請繞過。項目建立后,腳手架自動根據模板生成了文件目錄結構,具體文件結構可以在網上可以搜索到,在這里就不再贅述了,我只針對重要的幾個進行說明。

          1. index.html : 是項目的入口,是隨后就被實例中的組件中的模板中的內容所取代,所以我們會看到有那么一瞬間會顯示出index.html中正文的內容。而index.html中的Title部分不會被取代,所以會一直保留。比如可以實現加載Loading...等
          2. main.js:是項目的主程序,在這里很多功能要實現,實例化Vue、初始化及存儲全局變量、項目用的組件引入、樣式文件引入等。
          3. app.vue:是項目的主組件,所有頁面都是在App.vue下進行切換的。也是整個項目的關鍵,app.vue負責構建定義及頁面組件歸集。

          三者之間的聯系是什么?

          從上圖簡單看出三者之間聯系,同時也體現出來vue的單頁面模式,何為單頁面應用(SPA),通俗一點說就是指只有一個主頁面的應用(核心:index.html,main.js,app.vue),瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在app.vue(<router-view/>)。開發的每個模塊都是一個組件,然后在交互的時候由路由程序動態載入,單頁面的頁面跳轉,僅刷新組件資源,就是通常所說的不是全面頁面刷新。單頁面優缺點并存

          單頁面的優點:

          • 用戶體驗好,快,內容的改變不需要重新加載整個頁面,基于這一點spa對服務器壓力較小。
          • 前后端分離。
          • 頁面效果會比較炫酷(比如切換頁面內容時的專場動畫)。

          單頁面缺點:

          • 不利于seo。
          • 導航不可用,如果一定要導航需要自行實現前進、后退。(由于是單頁面不能用瀏覽器的前進后退功能,所以需要自己建立堆棧管理)。
          • 初次加載時耗時多。
          • 頁面復雜度提高很多。

          三、界面實現

          登錄界面

          主界面

          導航菜單

          四、 實現的技術點

          1.樣式表使用了scss : 項目采用的lang="scss",后報錯TypeError: this.getResolve is not a function at由于當前sass的版本太高,webpack編譯時出現了錯誤,這個時候只需要換成低版本的就行,下面說一下修改方法,很簡單,如下,找到package.json和package-lock.json文件,里面的 "sass-loader"的版本更換掉 就行了,換成如下版本"sass-loader": "^7.3.1",

          2.路由模式采用了“history”:這樣去掉了url地址中#號,具體代碼需要修改router文件夾的index .js。

          采用這種模式時,發布部署的時候一定要需要nginx的配合,后面文章會專門講。

          3.圖標使用svg格式:

          第一步:下載 "svg-sprite-loader": "^6.0.7",

          第二步:修改配置文件

          第三步:參照源碼

          4.使用elementUI:這ui使用也比較簡單,具體使用方法可以通過官網了解,同樣先下載依賴,然后在main.js重要初始化加載。

          /*ElementUI*/
          import ElementUI from 'element-ui'
          import 'element-ui/lib/theme-chalk/index.css'
          Vue.use(ElementUI)

          其中element-ui/lib/theme-chalk/index.css 是默認樣式表,可以在官網按照自己喜歡的風格生成樣式表,下載下來后單獨引用即可,在使用過程需要自定義修改樣式的需要單獨自己創建一個樣式文件,在默認樣式表下單獨自定義樣式表,自定義的樣式這樣就可以覆蓋默認的了,不建議直接默認的樣式表上去修改。

          4.Layout:layout是布局容器,可以根據應用場景定義自己的布局,其結構是:

          布局說明

          定義好后layout后如何和視圖頁面進行關聯?在路由文件進行配置

          五、 總結

          該文章不是一個演示文章,代碼也不是為了寫文章而寫,我是想通過實際的項目給大家進行分享,代碼已經完全公開,會不斷的持續更新。

          目前正在研究在vue使用mxgraph畫流程圖,正在研究中......


          主站蜘蛛池模板: 国产一区二区免费在线| 免费av一区二区三区| 国产女人乱人伦精品一区二区| asmr国产一区在线| 波多野结衣AV一区二区三区中文 | 人妻体内射精一区二区三区| 国产乱码精品一区二区三区四川 | 久久精品无码一区二区三区不卡| 国模无码人体一区二区| 激情爆乳一区二区三区| 国产福利日本一区二区三区| 无码国产精品一区二区免费式影视 | 日韩精品一区二区午夜成人版 | 蜜臀Av午夜一区二区三区| 国产精品日本一区二区在线播放| 人妻免费一区二区三区最新| 亚洲男人的天堂一区二区| 日韩一区二区三区在线观看| 日韩高清一区二区三区不卡| 久久蜜桃精品一区二区三区| 精品人妻无码一区二区三区蜜桃一| 亚洲高清日韩精品第一区| 精品国产一区二区三区色欲 | 日韩免费视频一区| 日本免费一区尤物| 无码精品久久一区二区三区 | 一区二区三区日韩| 久久国产精品无码一区二区三区 | 2018高清国产一区二区三区| 精品国产一区二区三区色欲| 亚洲熟女综合色一区二区三区| 一区二区三区无码被窝影院| 日韩精品一区二区三区毛片| 无码人妻AⅤ一区二区三区水密桃| 鲁大师成人一区二区三区| 一区二区不卡久久精品| 亚洲国产精品一区二区久久hs| 亚洲国产高清在线精品一区| 亲子乱av一区区三区40岁| 国产91精品一区| 久久精品国产一区二区三|