個人博客點這里

內容回顧

- 過濾器

- 局部的過濾器

// 只能在當前組件內部使用 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

所有的后端都支持模塊化

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

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