【01】Vue 之hello wolrd

時間 2020-05-09

標籤 vue hello wolrd 简体版

原文原文鏈接

1.1. Vue簡介

Vue是一個前端的雙向綁定類的框架，發音[讀音 /vjuː/, 相似於 view]。新的Vue版本參考了React的部分設計，固然也有本身獨特的地方，好比Vue的單文件組件開發方式都頗有創新，另外Vue自身的一些綁定的語法、用法等都很是精煉，很容易上手，並且第三方的插件都很是豐富，社區很是活躍，最新的文檔都有中文版本。並且Vue配合官方的和第三方的庫能夠實現單文件的組件化開發、SPA等現代化前端開發。html

1.2. Vue的入門demo

Vue 能夠直接把它當作一個js庫使用，因此它能夠很容易的接入到你的項目或者單個頁面中。甚至你能夠只使用它的雙向綁定功能。因此它很容易上手。前端

好比：咱們有一個需求，一個網頁上一個Div標籤，咱們有一個json對象存儲數據，把json對象上的數據放到Div上去。vue

接下來是步驟：json

第一步： 建立一個文件夾並建立一個html文件 好比：index.html.
當如你能夠選擇你本身的編輯器，我就用VSCode。

第二步：引入Vue庫
<script src="https://unpkg.com/vue/dist/vue.js"></script>
固然了你能夠直接下載Vue的js文件，推薦你直接用上面的cdn便可。

第三步：建立一個Div，給它一個id，好比：app

第四步：建立Vue的對象，並把數據綁定到上面建立好的div上去。

最終的代碼以下：app

<!DOCTYPE html> <!--第一步：建立文件夾及html文件-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入門之Helloworld</title>
  <!--第二步：引入Vue庫-->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <!--第三步:建立一個Div-->
  <div id="app">
    <!--Vue的模板的綁定數據的方法， 相似於不少其餘前端的模板，能夠用兩對花括號進行綁定Vue中的數據對象的屬性 -->
    {{ message }}
  </div>

  <!--第四步：建立Vue的對象，並把數據綁定到上面建立好的div上去。-->
  <script>
    var app = new Vue({         // 建立Vue對象。Vue的核心對象。
      el: '#app',               // el屬性：把當前Vue對象掛載到 div標籤上，#app是id選擇器
      data: {                   // data: 是Vue對象中綁定的數據
        message: 'Hello Vue!'   // message 自定義的數據
      }
    });
  </script>
</body>
</html>

最終的結果就是：框架

Hello Vue!

1.3. Vue的Helloworld總結

Vue構造函數的：選項el屬性，就是element縮寫，當前Vue對象掛載到哪一個標籤上的語法，支持CSS選擇器或者dom對象，通常用id選擇器選擇當前頁面的標籤。
Vue的選項：data屬性是自定義數據。這裏咱們只是演示了一個message屬性，vue會把自定義的數據能夠與html的模板數據進行綁定。
Vue 數據綁定的方式就是用 {{}}，相似於handlebars.
上面這個demo就是演示了Vue的綁定數據的基本模型。注意點，標籤先建立好了以後，再建立Vue對象，具體你應該懂吧。

其餘詳情請參考：http://aicoder.com/vue/preview/all.htmldom

轉載地址：http://www.cnblogs.com/fly_dragon/p/6218551.html編輯器

1. 【01】Vue 之hello wolrd
2. QT再創世紀--(1)Hello Wolrd
3. 【01】react 之 hello world
4. Vue之Hello World!
5. 01. Hello World!
6. Django-01-hello world
7. 01. Node js Hello world
8. flask 快速入門-01 之 `Hello World!`
9. 【Hello VUE】暴學VUE之基礎篇（五）
10. vue學習之路.01
更多相關文章...
• Docker Hello World - Docker教程
• Thymeleaf擴展2(Say Hello) - Thymeleaf 教程
• 互聯網組織的未來：剖析GitHub員工的任性之源
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。