解析Vue.js下載方式及使用步驟-js教程-PHP中文網

解析Vue.js下載方式及使用步驟

php中世界最好的语言

發布： 2018-05-22 11:01:47

原創

3362 人瀏覽過

這次帶給大家解析Vue.js下載方式及使用步驟，解析Vue.js下載方式及使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

vue.js是什麼？

Vue (發音 /vjuː/，類似於 view) 是一套用於建立使用者介面的漸進式框架。

說明及下載

Vue.js使用文件已經寫的很完備和詳細了，透過以下地址可以查看： https://cn.vuejs.org/v2/guide/

vue.js如果當成一個函式庫來使用，可以透過下方網址下載： https://cn.vuejs.org/v2 /guide/installation.html

Vue.js基本概念

##我們下載了vue.js後，需要在頁面上透過script標籤引入vue.js，開發中可以使用開發版本vue.js，產品上線要換成vue.min.js。

script type="text/javascript" src="js/vue.min.js"></script>

登入後複製

Vue程式碼實例（建立）#

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p id="app">{{ message }}</p>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:'#app',
    data : {message:'好湿呀'}
  });
  </script>

登入後複製

資料與方法

#當一個Vue 實例被建立時，它會在Vue 的響應式系統中加入了其data物件中所能找到的所有的屬性。當這些屬性的值發生改變時，視圖將會產生“回應”，即匹配更新為新的值。也可以在Vue實例中定義方法，透過方法來改變實例中data物件中的數據，資料改變了，視圖中的資料也改變。

Vue實例程式碼（方法）

window.onload = function(){
var vm = new Vue({
  el:'#app',
  data:{message:'hello world!'},
  methods:{
    fnChangeMsg:function(){
      this.message = 'hello Vue.js!';
    }
  }
});
}
<p id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</p>

登入後複製

Vus.js範本語法模板語法指的是如何將資料放入html中

資料綁定

最常見的形式就是使用「Mustache」語法(雙大括號) 的文字插值，例如：{{ msg }}

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url" rel="external nofollow" >链接文字

登入後複製

<-- 根据ok的布尔值来插入/移除 p元素 -->
<p v-if="ok">是否显示这一段
<-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮

登入後複製

簡潔： HTML 範本JSON 數據，再建立一個Vue 實例，就這麼簡單。
資料驅動：自動追蹤依賴的範本表達式和計算屬性。

元件化：用解耦、可重複使用的元件來建構介面。

輕量級： ~24kb min gzip，無依賴。

快速：精確有效的非同步批次 DOM 更新。

模組友善：透過 NPM 或 Bower 安裝，無縫融入你的工作流程。

#########相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########Node.js建立HTTP檔案伺服器步驟詳解###############Node.js使用jade範本引擎步驟詳解#########

以上是解析Vue.js下載方式及使用步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

解析Vue.js下載方式及使用步驟