第二章：安裝和基礎效果展示

頁面中引入vue

---

因為我們的目標是在最短的時間之內學會vue的使用方法，所以我們不一定需要通過npm工程化進行安裝，你直接用script在頁面中引用也完全沒有問題。

第一種引入方式，script直接引入：

?

<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>

直接引入的好處是，隨用隨引，不需要的包在頁面上就不加載。并且通過外鏈訪問比打包壓縮訪問的速度更快。
以后我們在講vuecli的時候會詳細講解，本教程所有例子，都會通過http直引和npm安裝兩種方式進行講解。
我們由淺入深，等你學會使用npm包管理工具的時候，可以回頭在把npm引入方式看一遍，你將會有更深的理解。

第二種，通過npm安裝
當我需要構建一套基于node npm的項目的時候。我就應該通過npm指令去安裝了，這跟其他引用到npm中的項目是一樣的。

?

npm install vue

方法是先安裝node，然后cd到你的目錄去執行npm，如果你還不會使用npm，
可以查看一下關于nodejs的npm包管理器的使用方法，不會nodejs也沒有關系!

這我需要提到一個新的名詞，腳手架。所謂的腳手架就是通過webpack或者gulp構建好的一套包結構，里面已經在package中給寫好了，你拿回來直接npm install一下就行。
因為我們后面還會用到vue-route，axios，vuex等，如果不基于自動化構建工具，我們這一套東西就會顯得混亂不堪。
至于vuecli的用法，我們會在后續的文章中講到，你可以先暫時使用第一種方法體驗vue的強大之處！

引入成功后，運行一個簡單示例！

---

當你引入vue以后，我們來講解一個簡單實例，為了幫助你快速理解，我們通過與jquery的對比，把一個效果用兩種方式來實現，讓你感受到vue的強大之處。

?

vue實現了model和view的自動綁定

?

<input type="text" id="input1" placeholder="我是jquery元素"><script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script> <script type="text/javascript">$("#input1").keyup(function(){console.log($(this).val());}) </script>

這是一個jquery獲取文本框內容的例子。

在keyup的時候，你看看jquery都執行了什么操作。首先第一步，jquery訪問dom樹，從document上面找到一個名字叫input1的元素，然后獲取它的value屬性，接著，把這個value的值log出來。這套操作可以說是罪大惡極。
我每次修改了里面的值，它就訪問一次dom，如果我這個頁面上內容再多點的話——后果將是災難式的。

同樣的東西我們看看vue中是怎么實現的：

---

?

<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script> <div id="app"><input type="text" id="input2" placeholder="我是vue元素" v-model="message" @input="log"> </div> <script type="text/javascript">new Vue({el:"#app",data:{message:"請輸入內容.."},methods:{log:function(){console.log(this.message);}},created(){console.log("--vue加載成功！--");}}) </script>

看到這個代碼，馬上就有的人，開始抬杠了。
這個代碼比jquery復雜多了，而且也不好理解。

我從三個方面來反駁你的觀點：你有可能需要用筆和本記錄下來：

---

第一，vue只需渲染一次dom。而不是每次都重新獲取dom然后修改他的值。這樣當你頁面上有上千個元素的時候，他非常的節省內存。你可以把這些資源放到其他地方，例如說canvas中。后面我們會詳細講解。當你有數據更新的時候，執行完畢AJAX后數據會自動更新頁面，而不需要你再次查找元素。

第二：當你的頁面有復雜的邏輯關系以后，你才能發現vue是多么的優雅。所有數據全部在data（model）中管理，而jquery呢？他是基于dom的，根本無法管理數據。他每次用的時候都需要重新獲取。導致你一開始是很輕松，寫一句就行了，但是你到了后面提交數據的時候，你就麻煩了。難道你還準備搞出來一群全局變量挨個賦值?

第三：小程序的設計模式跟這個一模一樣。這么說不太嚴謹，嚴謹的說法是寫法幾乎一樣。畢竟他們都是基于前后端分離設計模式來的。所以你把這個用好，小程序自然就無師自通了。

作者：黨云龍
鏈接：https://www.jianshu.com/p/ed7d9fbd71e8
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

?

jQuery在處理單頁面或者小項目的時候感覺還是可以的，，，vue適用于各大中小型項目，但是單就vue的項目而言，不利于搜索引擎的爬取和SEO優化，，，大佬，求解答

你說的對，所以，清看后續的nuxt教程！

總結

以上是生活随笔為你收集整理的【转】Vue.js入门教程（二）在页面中引入vue的方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。