什麼是vue？

vue就是一個js庫，而且無依賴別的js庫，直接引入一個js文件就可使用，跟jquery差很少。vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有很是容易上手的API。

 

版本選擇？

如今vue分爲vue1和vue2這兩個大版本，然而如今有一些基於vue的框架還不兼容vue2，不過本身折騰能夠隨意選擇一個的，反正文檔還算挺詳細。

 

爲何咱們要使用vue？

其實跟jquery差很少，都是簡化咱們的開發。例如咱們能夠用vue實現像後端模板渲染的功能，能夠更加便捷的綁定dom事件，能夠把一些頁面的組件打包重複使用。下面咱們看看如何簡單粗暴的使用vue。

 

安裝 

使用npm安裝：

npm install vue

如何優雅的使用vue當成模板引擎

後端的同窗想必挺清楚模板引擎是什麼玩意了，而對於剛入門前端的同窗來講，每每渲染頁面會使用字符串拼接（很是不推薦）或者dom的clone來動態生成html，可是這兩種方法寫法都很麻煩，而vue卻能十分優雅的實現模板渲染這種功能。

咱們拿官方的例子來看看，以下圖：

＃hello world

<div id="app">

{{ message }}

</div>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

})

顯示效果：

＃雙向綁定

<div id="app">

<p>{{ message }}</p>

<input v-model="message">

</div>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

})

顯示效果：

咱們能夠看到，el裏面跟jquery的元素選擇標識符是同樣的，這個就是選擇要渲染的區域。data是一個字典，這個字典就是要填充的數據。而上面的html兩個花括號裏面一個變量名這種方式就是輸出變量值。

也許你會說，循環輸出咋辦，別擔憂，vue都提供了。看：

<div id="app">

<ul>

<li v-for="todo in todos">

{{ todo.text }}

</li>

</ul>

</div>

new Vue({

el: '#app',

data: {

todos: [

{ text: 'Learn JavaScript' },

{ text: 'Learn Vue.js' },

{ text: 'Build Something Awesome' }

]

}

})

顯示效果：

 

方法與事件處理器

其實就是用特定語法代替了直接在html標籤寫onclick='xxx'這些，也不用jquery寫$("#xxx").on("click", function(){});，反正用法很簡單，老規矩，上官方例子：

  <div id="example">
     <button v-on:click="greet">Greet</button>

  </div>

var vm = new Vue({

el: '#example',

data: {

name: 'Vue.js'

},

// 在 `methods` 對象中定義方法

methods: {

greet: function (event) {

// 方法內 `this` 指向 vm

alert('Hello ' + this.name + '!')

// `event` 是原生 DOM 事件

alert(event.target.tagName)

}

}

})

// 也能夠在 JavaScript 代碼中調用方法

vm.greet() // -> 'Hello Vue.js!'

效果圖：

 

 

組件

首先，咱們看看官方例子：

 

  <div id="example">
     <my-component></my-component>

  </div>

// 定義

var MyComponent = Vue.extend({

template: '<div>A custom component!</div>'

})

// 註冊

Vue.component('my-component', MyComponent)

// 建立根實例

new Vue({

el: '#example'

})

渲染爲：

 

<div id="example">

<div>A custom component!</div>

</div>

顯示效果：

一眼看過去，至關於宏定義嘛，咱們聲明一種標籤是表明一串特定的html字符串。（咱們先這樣子將就的用着，其實這組件背後還涉及值的傳遞，函數綁定這些，可是咱們入門，先無論）

 

單文件的方式使用路由

讓咱們思考一下，爲何要有路由這東西呢？咱們一貫的作法是一個頁面一個URL，頁面切換的時候跳到新的地址。後來，因爲請求新頁面太耗費流量，工程師們想到使用ajax拉取數據，局部刷新頁面，這種方法大大節省了流量（固然這種作法對seo不友好，這裏就不展開說了，想了解更多能夠持續關注我）。vue的路由其實也是爲了頁面切換不用從新整個頁面從新加載，咱們來看看例子：

<div id="app">

<component :is="currentView"></component>

</div>

Vue.component('home', { /* ... */ })

Vue.component('page1', { /* ... */ })

var app = new Vue({

el: '#app',

data: {

currentView: 'home'

}

})

// 在路由處理器中切換頁面

app.currentView = 'page1'

能夠看到使用vue以後，咱們寫的代碼是十分好維護的。

 

入門到此爲止了

上面這些簡單粗暴的使用vue其實可讓咱們充分體會到vue的美，特別是小應用小團隊，用這些基本上足夠應付了。什麼是醉完美的？簡單的又能提升咱們的開發效率就是完美的。

 

接下來，咱們應該如何進一步學習vue呢？

• 學會用webpack打包組件，而且可使用打包後的組件

• 瞭解一些基於vue的框架，例如Element UI，iView這些UI框架

• 組件通訊，異步組件的用法

• 服務器渲染

• 學會開發vue插件

---

 

更多angular1/2/四、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。