Vue.js2.0开发环境搭建（四）
轉載自? ?vuejs2.0從入門到放棄--入門實例（四）
最近，很多小伙伴有疑惑，想學vuejs必須先了解復雜的構建工具和命令行操作嗎！！答案是否定的！
對于很多做前端的同學，涉及到命令行和構建工具，想必大家都比較發憷，沒有人指導，根本就不理解不了命令行的操作，導致好多想學習vue的同學被扼殺在搖籃里。今天就跟大家一起開啟，沒有命令行的vue學習之旅，本文適合小白，高手自動忽視。
現在，大部分的vuejs的資料都是用vue-cli去構建項目的，給不懂nodejs、不會命令行操作的前端小白們設置了很高的門檻，由于本人也是小白一步一步走過來的，所以，對此事深有體會，廢話不多說。
vuejs本來很簡單易上手的，初學階段，我們完全可以像使用jquery一樣去使用vuejs。直接用<script>標簽引入，就這么簡單，如果會用<script>標簽引入并使用jquery，那么你就踏出了使用vuejs的第一步。
<script src="你的路徑/vue.js"></script>如果你沒有vuejs文件，可以去github上搜vue，結果里第一個star數量最多的就是咯，去路徑 vue/dist/ 下載 vue.js 或者 vue.min.js 都可以，就像jquery.js 和 jquery.min.js一個道理。如下圖
接下來，就可以正常使用vuejs了。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue快速上手</title> <style type="text/css"></style> </head> <body> <div class="container"><h3>個人信息</h3><!-- person 指向 vm實例的data.person對象 --><p>我叫{{person.name}}</p><p>我今年{{person.age}}歲了</p><p>我是做{{person.job}}工作的</p> </div><script type="text/javascript" src="你的路徑/vue.js"></script> <script type="text/javascript"> // 實例化一個 vue 對象 var vm = new Vue({// vue 對象的容器el: '.container',// 數據對象集合data: {// 預留出person占位，防止報錯person:{}},// 方法集合methods: {} }) </script> </body> </html> 這個時候，界面是這樣的，如下圖接下來，我們來獲取個人信息的數據，這里有兩種方法可以獲取。第一種，直接在vue體系內，在methods方法集合中獲取。第二種，由于vue跟一些UI框架（如layui）一起用的時候，會導致一些form類的組件不能用（個人猜測是因為事件監聽導致的），所以，我們在整個頁面的結構上獲取數據，然后復制給vue實例。
直接在vue體系內獲取數據，我們模擬一個ajax獲取數據的方法，如下
是不是很簡單，省去了很多操作DOM的步驟，瞬間感覺自己的年輕了。
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎
總結
以上是生活随笔為你收集整理的Vue.js2.0开发环境搭建（四）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 天津怎么建立企业网站（天津企业网站制作）
- 下一篇： 苯并芘的读音 苯并芘什么意思