vue學習筆記(三): 啟動說明

来源:https://www.cnblogs.com/zbspace/archive/2019/11/15/11869573.html
-Advertisement-
Play Games

1、啟動頁面:index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>hc ...


1、啟動頁面:index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hcmanage</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

其中 <div id="app"></div> 是用於掛載頁面的

2、啟動js: main.js

import Vue from 'vue' //引入vue.js
import App from './App' //引入App.vue
import router from './router' //引入router下的所有路由
import './plugins/element.js' //引入element-ui

Vue.config.productionTip = false

new Vue({
  el: '#app',//要掛載的元素ID
  router,
  components: { App },//掛載App組件
  template: '<App/>'
})

3、掛載的App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <p>
        If Element is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
      <el-button>el-button</el-button>
    </div>
    <!--下麵JS腳本載入的HelloWorld組件 msg是HelloWorld中要使用的變數-->
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue' //引入HelloWorld.vue

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

4、App.vue引入的HelloWorld.vue

<template>
  <div class="hello">
    <!--用於接收載入頁面傳入的信息-->
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一.備份的原因 運維工作的核心簡單概括就兩件事: 1)第一個是保護公司的數據. 2)第二個是讓網站能7 24小時提供服務(用戶體驗)。 1)備份就是為了恢復。 2)儘量減少數據的丟失(公司的損失) 二.備份的類型 冷備份: 這些備份在用戶不能訪問數據時進行,因此無法讀取或修改數據。這些離線備份會阻止 ...
  • [20191115]oracle實例占用記憶體計算.txt--//以前學習oracle資料庫時,總想瞭解實例占用記憶體多少,我曾經在一些會議底下問過一位高手,對方說計算這個相對很難,許多東西是共用的.--//很難有一個好方法計算,不過當時給了一個命令pmap,可以查看進程的記憶體使用情況,我當時使用命令看 ...
  • 命名規範 1.庫名、表名、欄位名必須使用小寫字母,並採用下劃線分割。 a)MySQL有配置參數lower_case_table_names,不可動態更改,Linux系統預設為 0,即庫表名以實際情況存儲,大小寫敏感。如果是1,以小寫存儲,大小寫不敏感。如果是2,以實際情況存儲,但以小寫比較。 b)如 ...
  • 在聊資料庫與緩存一致性問題之前,先聊聊資料庫主庫與從庫的一致性問題。 問:常見的資料庫集群架構如何? 答:一主多從,主從同步,讀寫分離。 如上圖: (1)一個主庫提供寫服務 (2)多個從庫提供讀服務,可以增加從庫提升讀性能 (3)主從之間同步數據 畫外音:任何方案不要忘了本心,加從庫的本心,是提升讀 ...
  • public class DbOpenHelper extends SQLiteOpenHelper { private static String name = "test.db"; /* 資料庫名稱 */ private static int version = 1; /* 資料庫版本號 */ ... ...
  • 1.如何跑多個apk的monkey? 黑名單:執行除了黑名單中以外的apk; 白名單:只執行在白名單中的apk。 黑名單的設置方法: a.創建一個名稱為blacklist的txt文檔,在文件中輸入應用程式的包名,如mms應用,則在文件中輸入com.android.mms; 如果有多個應用程式不想被執 ...
  • 本文微信公眾號「AndroidTraveler」首發。 背景 昨天(2019 11 14)上去 GitHub 上面一看,結果來了個下麵的提示: 點進去一看: 看來是自動化構建相關的。 那就試一下,選了第一個 Android CI ,當然測試倉庫是我新建的一個 Android 輪子庫。 編譯報錯了。 ...
  • 精靈圖 1. 為什麼需要精靈圖 為了有效的減少伺服器接收和發送請求的次數,提高頁面的載入速度。出現了CSS精靈技術 2. 精靈圖(sprites)的使用 精靈技術主要針對背景圖片。就是把多個小背景圖片整合到一張大圖片中。 這個大圖片也稱為sprites精靈圖或者雪碧圖 移動背景圖片位置,使用back ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...