使用Vue.js創建您的第一個應用

如果您從未創建過Vue.js應用程序,那麼我將指導您完成創建一個應用程序並了解其工作方式的任務。我們將要構建的應用程序已經完成,這是Vue CLI的默認應用程序


如果您從未創建過Vue.js應用程序,那麼我將指導您完成創建一個應用程序並了解其工作方式的任務。

第一個例子

首先,我將使用使用Vue的最基本示例。

您創建一個HTML文件,其中包含

<html>
  <body>
    <div id="example">
      <p>{{ hello }}</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: '#example',
            data: { hello: 'Hello World!' }
        })
    </script>
  </body>
</html>

然後在瀏覽器中將其打開。這是您的第一個Vue應用!該頁面應顯示“ Hello World!”。信息。

我將腳本標籤放在正文的末尾,以便在加載DOM之後按順序執行它們。

該代碼的作用是,我們實例化了一個新的Vue應用程序,該應用程序鏈接到#example元素作為其模板(通常使用CSS選擇器定義,但您也可以傳入HTMLElement)。

然後,將該模板與data目的。這是一個特殊的對象,用於承載我們要Vue渲染的數據。

在模板中,特殊{{ }}標籤表示這是動態模板的一部分,應在Vue應用程序數據中查找其內容。

在Codepen上查看

您可以在Codepen上看到以下示例:https://codepen.io/flaviocopes/pen/YLoLOp

Codepen

Codepen與使用純HTML文件有點不同,您需要對其進行配置以指向Pen設置中的Vue庫位置:

Pen settings

第二個示例:Vue CLI默認應用

讓我們稍微升級一下游戲。我們要構建的下一個應用程序已經完成,並且Vue CLI默認應用程序

什麼是Vue CLI?它是一個命令行實用程序,可通過在適當位置安裝示例應用程序來為您架設一個應用程序框架來幫助加快開發速度。

有兩種方法可以獲取此應用程序。

在本地使用Vue CLI

首先是安裝Vue CLI在您的計算機上,然後運行命令

vue create <enter the app name>

使用CodeSandbox

無需安裝任何東西的一種更簡單的方法是轉到https://codesandbox.io/s/vue

CodeSandbox是一個很酷的代碼編輯器,它使您可以在雲中構建應用程序,從而可以使用任何npm軟件包,還可以輕鬆地與Zeit Now集成以實現輕鬆部署,並通過GitHub來管理版本控制。

我上面放置的鏈接打開了Vue CLI默認應用程序。

無論您選擇在本地使用Vue CLI還是通過CodeSandbox使用,我們都將詳細檢查該Vue應用程序。

文件結構

package.json,其中包含配置,這些是初始項目結構中包含的文件:

  • index.html
  • src/App.vue
  • src/main.js
  • src/assets/logo.png
  • src/components/HelloWorld.vue

index.html

index.html文件是主應用程序文件。

在主體中,它僅包含一個簡單元素:<div id="app"></div>。這是Vue應用程序將用於附加到DOM的元素。

<!DOCTYPE html>
<html>

<head> <meta charset=“utf-8”> <meta name=“viewport” content=“width=device-width,initial-scale=1.0”> <title>CodeSandbox Vue</title> </head>

<body> <div id=“app”></div> <!-- built files will be auto injected --> </body>

</html>

src/main.js

這是驅動我們應用程序的主要JavaScript文件。

我們首先從中導入Vue庫和App組件App.vue

我們將productionTip設置為false,只是為了避免Vue輸出“您處於開發模式控制台中的提示。

接下來,我們通過將Vue實例分配給由標識的DOM元素來創建該實例#app,我們在index.html,然後告訴它使用App組件。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */ new Vue({ el: ‘#app’, components: { App }, template: ‘<App/>’ })

src/App.vue

App.vue是單個文件組件。它包含3個代碼塊:HTML,CSS和JavaScript。

乍一看這很奇怪,但是“單個文件組件”是創建自包含組件的好方法,這些組件可以在單個文件中包含所有需要的組件。

我們具有標記,將要與之交互的JavaScript以及應用於該標記的樣式,無論該樣式是否為作用域。在這種情況下,它沒有作用域,只是輸出了像常規CSS一樣應用到頁面的CSS。

有趣的部分在於script標籤。

我們導入一個成分來自components/HelloWorld.vue文件,我們將在後面介紹。

該組件將在我們的組件中引用。這是一個依賴關係。我們將輸出以下代碼:

<div id="app">
  <img width="25%" src="./assets/logo.png">
  <HelloWorld/>
</div>

在該組件中,您會看到它引用了HelloWorld組件。 Vue會自動將該組件插入此佔位符。

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script> import HelloWorld from ‘./components/HelloWorld’

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>

src/components/HelloWorld.vue

這是HelloWorld組件,它包含在App組件中。

該組件輸出一組鏈接以及一條消息。

還記得上面我們討論過App.vue中的CSS,但它沒有作用域嗎? HelloWorld組件的作用域為CSS。

您可以通過查看style標籤。如果有scoped屬性,然後將其範圍設置為:<style scoped>

這意味著生成的CSS將通過Vue透明應用的類來唯一地定位組件。您無需為此擔心,並且您知道CSS不會洩露到頁面的其他部分。

組件輸出的消息存儲在dataVue實例的屬性,並在模板中輸出為{{ msg }}

任何存儲在其中的東西data可以通過模板本身的名稱直接在模板中訪問。我們不用說了data.msg, 只是msg

<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>

運行應用

CodeSandbox具有很酷的預覽功能。您可以運行該應用程序並編輯源代碼中的任何內容,以使其立即反映在預覽中。

The Vue App

免費下載我的Vue手冊


更多vue教程: