個(gè)人博客點(diǎn)這里

內(nèi)容回顧

- 過濾器

- 局部的過濾器

// 只能在當(dāng)前組件內(nèi)部使用 filters:function(val,a,b){// 執(zhí)行過濾處理邏輯,(添油加醋的內(nèi)容)return xxx; }

- 全局的過濾器

// 聲明+創(chuàng)建 在任何組件中都能使用 Vue.filter("myTime",function() {// 添油加醋的處理return xxxx; })

- 生命周期-鉤子函數(shù)

• beforeCreate這個(gè)方法不常用
• create 組件創(chuàng)建完成,
  • 可以發(fā)起ajax(XMLHTTPRequest 簡稱 XHR axios fetch $.ajax())請(qǐng)求
  • 實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)視圖思想
• beforeMount 掛載
• mounted DOM掛載完成
• beforeUpdate 獲取原始的DOM
• updated 后去更新之后的DOM
• beforeDestroy 組件銷毀之前
• destroyed 組件銷毀之后
• actived 激活當(dāng)前組件 Vue提供的內(nèi)置組件<keep-alive></keep-alive>
• deactivated 停用當(dāng)前組件

vue-router 核心插件

主要作用: 實(shí)現(xiàn)單頁面應(yīng)用,為了用戶體驗(yàn),后端資源過多,可能會(huì)出現(xiàn)白屏的現(xiàn)象

現(xiàn)在都用前后端分離,甚至現(xiàn)在有些后端里面的前后臺(tái)管理都分離了

模板引擎:

node.js express web服務(wù)器框架 jade html ejs

python django jinja2衍生出來的

一般后臺(tái)語言都有一個(gè)模板引擎的東東

{ { } }

{ % % }

模板引擎 VS 前后端分離

模板引擎的

好處:減少DOM操作,你一玩dom就不用謝js的dom操作了
不好處:隨著你的項(xiàng)目越來越大,你的項(xiàng)目在后期不易維護(hù)

當(dāng)你的需求頻繁改的時(shí)候,你還得寫一些js代碼,這樣你就模板語法和js混合著寫了
要是用這種前后端分離的寫法,前端專門就搞這個(gè)DOM操作,那就厲害了

等咱們講完前后端分離,就會(huì)發(fā)現(xiàn)還是前后端分離好用

前后端分離

分工明確

前端只做前端的事情(頁面+交互+兼容+class+封裝+優(yōu)化)

• vue+vue+router+axios+element+ui 前端技術(shù)棧
  后端只做后端的事情(接口(表的操作+業(yè)務(wù)邏輯+封裝+class+優(yōu)化))
• restframework框架+django+sqlite+redis 后端技術(shù)棧

你寫簡歷的時(shí)候可以把這個(gè)技術(shù)棧列出來

xxx在線教育平臺(tái)

xxx后臺(tái)管理系統(tǒng)

名字 項(xiàng)目周期 技術(shù)棧 項(xiàng)目介紹 項(xiàng)目總結(jié)

vue router

下載

這里我們直接用CDN的

引包

vue-router依賴vue
vue-router.js
Vue.component('router-link',{})
router-link router-view

如果是模塊化機(jī)制

Vue.use(vue-router)

創(chuàng)建實(shí)例

let Home = {/*這里就不多些了 */ }new VueRouter({// 5. 配置路由信息routes:[{path:"/",redirect:"/home",},{path:"/home",name:"/Home",component:Home,},] })new Vue({//6. 掛載router對(duì)象到vue的實(shí)例中router })

使用路由

<!-- router-link默認(rèn)被渲染成a標(biāo)簽 to 屬性就會(huì)被渲染成href了--><div><router-link to="/">首頁</router-link> <!--這個(gè)router-link就是我們自定義標(biāo)簽,然后我們換了一個(gè)名字,叫組件--><router-link :to="/home" @click.native = "">首頁</router-link> 路由組件的出口 <router-view></router-view> </div>

動(dòng)態(tài)路由匹配

/user/1 /user/2 加載的是同一個(gè)組件

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>

復(fù)用的組件 ,監(jiān)聽路由的變化

watch:(to,from)=>{to 要進(jìn)入的頁面的路由信息對(duì)象from 從哪個(gè) }

編程式導(dǎo)航

this.$router.push({name:"Home" })

vue-router 提供的內(nèi)置的內(nèi)容

router-link

router-view

this.$route 路由信息對(duì)象

this.$router 路由對(duì)象

今日內(nèi)容

獲取原生的DOM的方式

<div ref = "alex">哈哈哈</div> <p ref="a"></p> <Home ref="b"></Home> this.$refs.alex

DIY腳手架

下一個(gè)東西
腳手架不要下最新的

npm i webpack@3.12.0 -g

cmd
module.exports = xxx
require()
es6module

import * as a from "./main.js"

vue-cli的使用

webpack

組件化開發(fā)vue-cli

webpack 前端中的工具 ,三大主流工具 之 最主流的

grunt gulp webpack

目前webpack已經(jīng)占據(jù)了主流市場
webpack是一個(gè)現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包器.當(dāng)webpack處理應(yīng)用程序時(shí),它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系,其中包含應(yīng)用程序需要的每個(gè)模塊,然后將所有這些模塊打包成一個(gè)或多個(gè)bundle

所有的后端都支持模塊化

但是我們的前端是不支持模塊化的

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Vue.js前后端分离2的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。