vue教程-vue入門

時間 2019-11-07

標籤 vue 教程入門简体版

原文原文鏈接

Vue入門

Vue Hello World

純HTML實現Hello Worldjavascript

在學習vue以前，咱們先經過HTML實現一個Hello World效果。以下：css

<!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 的效果。html

Vue Hello Worldvue

首先咱們須要引入js文件java

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

修改HTML頁面node
```
<div id="app">
      {{ message }}
    </div>
複製代碼
```
{{ message }} 是vue的一個語法，message 是一個自定義的變量，一下子咱們經過在js代碼中經過vue給該變量賦值爲Vue Hello World，這樣{{ message }} 就會顯示爲Vue Hello World了。ios

{{ }} 在頁面標籤中自定義變量用於輸出對象屬性和函數返回值ajax

另外{{ message }}必定要被包裹在一個便籤中，咱們經過div的id就能夠獲取到這個標籤元素，進而經過vue給div中的message 賦值。vue-router

組件的概念vuex

在vue中，會把頁面上的每個標籤（dom元素）稱之爲一個組件，針對每一個組件咱們均可以經過vue在js代碼中建立一個vue對象，經過操做這個對象就能夠對該dom元素進行操做了。
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變量賦值。

網站頁面代碼

<!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>
複製代碼

頁面效果

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進行交互的。

**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

cdn的方式

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

下載引入js文件
npm安裝 node package manager 能夠類比maven

npm使用
1. 安裝npm
  
  安裝教程：http://www.runoob.com/nodejs/nodejs-install-setup.html
2. 經過命令使用npm
```
npm init 初始化 在當前目錄下生成package.json 這個文件用來描述項目依賴（相似pom文件）
複製代碼
```

剩餘所有選擇默認便可

  ~~~
  npm init -y 一鍵生成 使用默認項 包名是當前文件夾的名字
  ~~~
複製代碼

安裝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"
  }
}
複製代碼