三十一、Vue框架赶紧来了解一下
@Author：Runsen
@Date：2019/08/10
人生最重要的不是所站的位置，而是內心所朝的方向。只要我在每篇博文中寫得自己體會，修煉身心；在每天的不斷重復學習中，耐住寂寞，練就真功，不畏艱難，奮勇前行，不忘初心，砥礪前行，人生定會有所收獲，不留遺憾 （作者：Runsen ）
文章目錄
- 前言
- 環境搭建
- vue快速入門
- 對于有基礎的
前言
今天學下前端，當代流行的Vue框架，帶大家簡單玩下
js三大框架：
- vue.js：
優點：更輕量，單頁面，簡單易學
缺點：不支持IE8
開發團隊：中國國內團隊開發，作者：尤雨溪
- Angular：
優點：完善的框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等所有功能
缺點：比較笨重，學習成本高，不兼容IE6/7
開發團隊：google谷歌
-
react：
優點：速度快、跨瀏覽器兼容、單向數據流、兼容性好
缺點：并不是一個完整的框架，需要加上ReactRouter和Flux才能完成（目前百度阿里等企業已經開始棄用）
開發團隊：facebook臉書 -
Vue.js
Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。
開發環境版本，包含了完整的警告和調試模式
<script src="https://vuejs.org/js/vue.js"></script>
生產環境版本，刪除了警告，優化了尺寸和速度
<script src="https://vuejs.org/js/vue.min.js"></script>
環境搭建
- nodejs 安裝
自行百度吧
其實就是安裝npm 包管理系統，就是python中的pip
- vue安裝
項目運行成功后，瀏覽器會自動打開localhost:8080（如果瀏覽器沒有自動打開，可以手動輸入）。運行成功后，會看到如下所示的界面。
vue快速入門
因為這是入門的，所以不用搭建開發環境，直接引用vue就可以了
先定義一個div，綁定id，new 一個vue出來,el是成分的意思，再綁定id，data是定義的方法，通過message來傳遞參數，其實就像python中的字典，{{}}此語法就是django中的模板變量的語法，非常的易懂。
運行結果：
對于有基礎的
實現下面的案例
效果：點擊HTMl5出現HTML，點擊java出現java，點擊python出現python
如果用純的js寫，難度非常的大，代碼量非常的大，就是jq代碼量依然不少。但是用了vue框架
這里使用的是Vue.js 路由
在項目里安裝使用cnpm install vue-router
由于咱們是簡單使用，學下就通過script標簽引用就可以了
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
搭建樣式就不說了
推薦使用bootstrap，非常好看又方便
全代碼 代碼已經盡量寫了注釋
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="bs/css/bootstrap.css"><style>body{background-color: #e8e8e8;}</style> </head> <body><div id="app"><div class="row"><div class="col-xs-8 col-xs-offset-2"><div class="page-header"><h1>vue實例</h1></div></div></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 使用 router-link 組件來導航. --><!-- 通過傳入 `to` 屬性指定鏈接. --><!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --><router-link class="list-group-item" to="/h5">HTML5</router-link><router-link class="list-group-item" to="/java">Java</router-link><router-link class="list-group-item" to="/python">Python</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這里 --><router-view></router-view></div></div></div></div></div><template id="h5"><div><h2>HTML5</h2><img src="img/h5.jpg" alt="" width="250"></div></template><template id="java"><div><h2>Java</h2><img src="img/java.jpg" alt="" width="250"></div></template><template id="python"><div><h2>Python</h2><img src="img/python.jpg" alt="" width="250"></div></template><script src="js/vue.js"></script><script src="js/vue-router.js"></script><script>// 1.創建組件const Html5 = Vue.extend({template: '#h5'});const Java = Vue.extend({template: '#java'});const Python = Vue.extend({template: '#python'});// 2. 定義路由const routes = [{path:'/h5', component: Html5},{path:'/java', component: Java},{path:'/python', component: Python},// 配置根路由{path:'/', redirect: '/h5'}];// 3. 創建路由實例const router = new VueRouter({routes});// 4.創建Vue的實例,并掛載new Vue({router}).$mount('#app')</script> </body> </html>布局
bootstrap柵欄系統
col是列；
xs-maxsmall，超小；sm-small，小；md-medium，中等；
-
引用vue和vue.router
-
創建三個組件const方法，記得 template 綁id
-
定義路由，其實就是django的urls
-
創建路由實例
-
創建Vue的實例,并掛載
-
vrouter-link 和router-view 是固定的用法，一個進口，一個出口。
https://github.com/MaoliRUNsen/maoli/tree/master/%E5%89%8D%E7%AB%AF
總結
以上是生活随笔為你收集整理的三十一、Vue框架赶紧来了解一下的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 九十四、一文带你玩转简单的flask
- 下一篇： 三十三、深入Vue.js语法（上篇）