vue教程-vue入門

冰洋發表於2019-03-05
Vue

Vue入門

Vue Hello World

純HTML實現Hello World

在學習vue之前，我們先通過HTML實現一個Hello World效果。如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>learn-vue</title>
  </head>
  <body>
Hello World
  </body>
</html>
複製程式碼

如此我們就得到了一個Hello World的效果。接下來我們使用Vue.js實現 Vue Hello World 的效果。

Vue Hello World

  1. 首先我們需要引入js檔案

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
複製程式碼

  2. 修改HTML頁面

    	<div id="app">
      {{ message }}
    </div>
複製程式碼

    {{ message }} 是vue的一個語法，message 是一個自定義的變數，一會兒我們通過在js程式碼中通過vue給該變數賦值為Vue Hello World，這樣{{ message }} 就會顯示為Vue Hello World了。

    {{ }} 在頁面標籤中自定義變數  用於輸出物件屬性和函式返回值

    另外{{ message }}一定要被包裹在一個便籤中，我們通過div的id就可以獲取到這個標籤元素，進而通過vue給div中的message 賦值。

    元件的概念

    在vue中，會把頁面上的每一個標籤（dom元素）稱之為一個元件，針對每個元件我們都可以通過vue在js程式碼中建立一個vue物件，通過操作這個物件就可以對該dom元素進行操作了。

  3. js程式碼

      <script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
複製程式碼

    vue中的元件由html模板+js指令碼+css樣式組成，css樣式是可選項

    在我們當前的程式碼中沒有新增樣式，通過html得到一個dom元素，vue通過id選擇器獲取到這個元素，給元素中的message 賦值。

    new Vue表示建立一個dom所對應的抽象物件。el屬性決定了我們要通過選擇器選擇哪個標籤，也就是要建立哪個標籤的vue物件。

    此處我們通過id選擇器建立了div標籤的vue物件，通過物件的data屬性可以給標籤中定義的vue變數賦值。

  4. 網站頁面程式碼

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>learn-vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>

	<div id="app">
      <p>{{ message }}</p>
    </div>
  </body>
  
  <script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</html>
複製程式碼

  5. 頁面效果

vue教程-vue入門

Vue簡介

什麼是Vue

一套構建使用者的漸進式框架

框架：vue 擁有完整的解決方案

庫：jQuery easyUi

漸進式：通過組合 完成一個完整的框架 vue全家桶 vuejs+ vue-router + vuex + axios 可以自由組合

特點

  • 核心值關注檢視層 view
  • 簡單小巧
  • 適用於移動端專案
  • 漸進式框架

Vue和JQuery的區別

我們先寫一段jQuery的程式碼

<div id='app'>
    
</div>

<script>
if(showBtn){
    var btn = $('<button>Click me</button>');
    btn.on('click,function(){
           console.log('Clicked!');
           }');
	$('#app').append(btn);
}
</script>
複製程式碼

通過Jquery我們給div標籤中新增了一個button，這個button擁有一個點選事件。

Vue程式碼

  <body>

	<div id="app">
      <button v-if="showBtn" v-on:click="handleClick">
      	 Click me
      </button>
    </div>
  </body>
  
  <script>
new Vue({
  el: '#app',
  data: {
    showBtn: true
  },
  methods:{
  	handleClick:function(){
  		console.log('Clicked!');
  	}
  }
})
複製程式碼

我們可以注意到，在Jquery程式碼中，資料和檢視（html）程式碼是耦合在一起的。但是在Vue中，在js程式碼中不需要關心html的程式碼，只需要運算元據即可。並且通過Vue物件，data屬性，methods讓vue的程式碼更加的符合物件導向的程式設計方式。

MVC 單向

model 資料 ajax獲取到的json資料轉換的js物件

view 檢視

controller 控制器

MVVM模式 雙向繫結

下圖不僅概括了MVVM模式（Model-View-ViewModel），還描述了在Vue.js中ViewModel是如何和View以及Model進行互動的。

vue教程-vue入門

**ViewModel是Vue.js的核心，它是一個Vue例項。**Vue例項是作用於某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。

當建立了ViewModel後，雙向繫結是如何達成的呢？

首先，我們將上圖中的DOM Listeners和Data Bindings看作兩個工具，它們是實現雙向繫結的關鍵。 從View側看，ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化，如果有變化，則更改Model中的資料； 從Model側看，當我們更新Model中的資料時，Data Bindings工具會幫我們更新頁面中的DOM元素。

Vue基本使用

安裝Vue

  1. cdn的方式
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
複製程式碼

  1. 下載引入js檔案

  2. npm安裝 node package manager 可以類比maven

    npm使用

    1. 安裝npm

      安裝教程：http://www.runoob.com/nodejs/nodejs-install-setup.html

    2. 通過命令使用npm

      npm init 初始化 在當前目錄下生成package.json 這個檔案用來描述專案依賴（類似pom檔案）
複製程式碼

vue教程-vue入門
vue教程-vue入門

  剩餘全部選擇預設即可

  ~~~
  npm init -y 一鍵生成 使用預設項 包名是當前資料夾的名字
  ~~~
複製程式碼

  1. 安裝vue

    npm install vue 預設下載最新版本
複製程式碼

    下載好的package.json

    注意：package.json中不能寫註釋

    {
  "name": "testvue",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "description": "",
  "dependencies": {
    "vue": "^2.6.8"
  }
}
複製程式碼

vue教程-vue入門

相關文章