個人博客點這里
內容回顧
- 過濾器
- 局部的過濾器
// 只能在當前組件內部使用
filters:function(val,a,b){// 執行過濾處理邏輯,(添油加醋的內容)return xxx;
}
- 全局的過濾器
// 聲明+創建 在任何組件中都能使用
Vue.filter("myTime",function() {// 添油加醋的處理return xxxx;
})
- 生命周期-鉤子函數
- beforeCreate這個方法不常用
- create 組件創建完成,
- 可以發起ajax(XMLHTTPRequest 簡稱 XHR axios fetch $.ajax())請求
- 實現數據驅動視圖思想
- beforeMount 掛載
- mounted DOM掛載完成
- beforeUpdate 獲取原始的DOM
- updated 后去更新之后的DOM
- beforeDestroy 組件銷毀之前
- destroyed 組件銷毀之后
- actived 激活當前組件 Vue提供的內置組件
<keep-alive></keep-alive> - deactivated 停用當前組件
vue-router 核心插件
主要作用: 實現單頁面應用,為了用戶體驗,后端資源過多,可能會出現白屏的現象
現在都用前后端分離,甚至現在有些后端里面的前后臺管理都分離了
模板引擎:
node.js express web服務器框架 jade html ejs
python django jinja2衍生出來的
一般后臺語言都有一個模板引擎的東東
{ { } }
{ % % }
模板引擎 VS 前后端分離
模板引擎的
好處:減少DOM操作,你一玩dom就不用謝js的dom操作了
不好處:隨著你的項目越來越大,你的項目在后期不易維護
當你的需求頻繁改的時候,你還得寫一些js代碼,這樣你就模板語法和js混合著寫了
要是用這種前后端分離的寫法,前端專門就搞這個DOM操作,那就厲害了
等咱們講完前后端分離,就會發現還是前后端分離好用
前后端分離
分工明確
前端只做前端的事情(頁面+交互+兼容+class+封裝+優化)
- vue+vue+router+axios+element+ui 前端技術棧
后端只做后端的事情(接口(表的操作+業務邏輯+封裝+class+優化)) - restframework框架+django+sqlite+redis 后端技術棧
你寫簡歷的時候可以把這個技術棧列出來
-
xxx在線教育平臺
-
xxx后臺管理系統
名字 項目周期 技術棧 項目介紹 項目總結
vue router
下載
這里我們直接用CDN的
引包
vue-router依賴vue
vue-router.js
Vue.component('router-link',{})
router-link router-view
如果是模塊化機制
Vue.use(vue-router)
創建實例
let Home = {/*這里就不多些了 */
}new VueRouter({// 5. 配置路由信息routes:[{path:"/",redirect:"/home",},{path:"/home",name:"/Home",component:Home,},]
})new Vue({//6. 掛載router對象到vue的實例中router
})
使用路由
<!--
router-link默認被渲染成a標簽 to 屬性就會被渲染成href了--><div><router-link to="/">首頁</router-link> <!--這個router-link就是我們自定義標簽,然后我們換了一個名字,叫組件--><router-link :to="/home" @click.native = "">首頁</router-link> 路由組件的出口 <router-view></router-view> </div>
動態路由匹配
/user/1 /user/2 加載的是同一個組件
routes:[{path:"/",redirect:"/home",},{path:"/user/:id",name:"/User",component:User,},
]
<router-link to="{name:'User',params:{xxx:'front'}}">前端</router-link>
<router-link to="{name:'User',params:{xxx:'ios'}}">IOS</router-link>
復用的組件 ,監聽路由的變化
watch:(to,from)=>{to 要進入的頁面的路由信息對象from 從哪個
}
編程式導航
this.$router.push({name:"Home"
})
vue-router 提供的內置的內容
router-link
router-view
this.$route 路由信息對象
this.$router 路由對象
今日內容
獲取原生的DOM的方式
<div ref = "alex">哈哈哈</div>
<p ref="a"></p>
<Home ref="b"></Home>
this.$refs.alex
DIY腳手架
下一個東西
腳手架不要下最新的
npm i webpack@3.12.0 -g
cmd
module.exports = xxx
require()
es6module
import * as a from "./main.js"
vue-cli的使用
webpack
組件化開發vue-cli
webpack 前端中的工具 ,三大主流工具 之 最主流的
grunt gulp webpack
目前webpack已經占據了主流市場
webpack是一個現代JavaScript應用程序的靜態模塊打包器.當webpack處理應用程序時,它會遞歸地構建一個依賴關系,其中包含應用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個bundle
所有的后端都支持模塊化
但是我們的前端是不支持模塊化的
