01-Vue 快速入門實現？

時間 2020-08-30

標籤 vue 快速入門實現简体版

原文原文鏈接

VUE 簡介

什麼是VUE?

VUE是一個基於MVVM設計模式的漸進式（融合）的純前端JS框架，基於此框架咱們能夠讓客戶端的操做更簡單。html

如何理解框架？
能夠將其理解爲已經包含部分核心功能的半成品代碼，缺乏個性化定製，主要用於避免重複編碼實現。

什麼場景使用VUE？

絕大多數以數據操做（增刪改查）爲主的PC端或移動端項目均可用vue開發好比: 美團，餓了麼，淘寶，知乎，大衆點評，微博...前端

VUE 快速入門

官方js文件下載

cn.vuejs.orgvue

業務及代碼實現

構建HTML頁面，呈現以下效果，並在圖中點擊加，減按鈕時實現中間數字的變化（要求基於vue技術進行實現）。設計模式

第一步：定義HTML頁面並引入vue.js文件。app

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="/js/vue.js"></script>
</head>
<body>
</body>
</html>

第二步：在html頁面中的body內部添加以下元素。框架

<div id="app">
    <button @click="minus">-</button>
    <span>{{n}}</span>
    <button @click="add">+</button>
 </div>

說明：函數

1)在界面中要添加vue對象要監控元素,習慣上都用 id="app"
2)找到界面中未來可能發生變化的位置，用{{變量名}}特殊語法標記出來
3)找到界面中能夠點擊的位置綁定事件處理函數。

第三步：在html頁面中的body底端部分構建JS代碼實現this

在JS中建立一個Vue類型的對象來監視頁面中的內容。編碼

<script>
    new Vue({
      el:"#app",
      data:{
        n:0 //起始值爲0
      },
      methods:{
        add(){
          this.n++ //訪問data中變量必須用this
        },
        minus(){
          if(this.n>0){ this.n-- }
        }
      }
    })
  </script>

其中：
1)el(element縮寫)屬性:"選擇器"，爲Vue對象要監視的範圍。
2)頁面全部變量，都必須保存在data屬性中，且以對象屬性形式保存。
3)頁面全部事件處理函數，都必須保存在methods屬性中，且以對象方法形式保存。

總結(Summary)

本小節爲Vue的一個快速入門案例，基於此案例，咱們要了解在頁面引入vue.js時，實際上是引入了一種Vue類型，若是使用vue框架作開發，必須都要建立new Vue()對象，對象建立時咱們指定el,data,methods屬性。而後可基於vue對象監控頁面元素和事件，進而實現頁面上數據的更新。spa

1. JMS實現之ActiveMQ快速入門
2. ES6快速入門 ES6 快速入門
3. SpringBoot入門實踐(一)-快速入門
4. Vue.js快速入門實例
5. Docker實踐快速入門
6. RocketMQ實戰快速入門
7. eCharts 快速入門實例
8. 快速入門
9. Hadoop快速入門
10. Sqoop 快速入門
更多相關文章...
• SQL 快速參考 - SQL 教程
• Eclipse 快速修復 - Eclipse 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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