Vue 入門之概念

時間 2020-05-09

標籤 vue 入門概念简体版

原文原文鏈接

Vue 簡介

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

Vue 的入門 demo

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

好比：咱們有一個需求，一個網頁上一個 Div 標籤，咱們有一個 json 對象數據，如今要把 json 對象上的數據放到 Div 上去。前端

接下來是步驟：vue

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

第二步：引入Vue庫
<script src="https://unpkg.com/vue/dist/vue.js"></script> 固然了你能夠直接下載Vue的js文件，推薦你直接用上面的cdn便可。 第三步：建立一個Div，給它一個id，好比：app 第四步：建立Vue的對象，並把數據綁定到上面建立好的div上去。

最終的代碼以下：java

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

最終的結果就是：json

Hello Vue!

Vue 的 Helloworld 總結

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

相關標籤/搜索

每日一句

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