webpack模塊化及vue-cli腳手架

前節回顧

過濾器

• 局部的過濾器

  • 只能在當前組件內部使用
    filters:function(val,a,b){
        //添油加醋的處理
        return xxxx
    }

• 全局過濾器

  • //聲明+建立 在任何組件中都能使用
    Vue.filter('myTime',function(){
        //添油加醋的處理
        return xxxx
    })

生命週期鉤子函數

• beforeCreate

• created 組件建立完成，能夠發起ajax（XMLHttpRequest 簡稱XHR axios fetch $.ajax()）請求,實現數據驅動視圖

• beforeMount

• mounted DOM掛載完成

• beforeUpdate 獲取原始DOM

• updated 獲取更新以後的DOM

• beforeDestory 組件銷燬以前

• destoryed 組件銷燬以後

• activated 激活當前組件 vue提供的內置組件<keep-alive></keep-alive>

• deactivated 停用當前組件

vue-router 核心插件

主要做用： 實現單頁面應用，爲了用戶體驗

模板引擎：

nodejs expressweb服務器框架 jade html ejs

python django jinja2(查閱)

{{}} {%%}

好處：減小DOM操做

很差處：後期會不易維護

先後端分離：

分工明確

前端只作前端的事情（頁面+交互+兼容+封裝 +class+優化） vue+vue+router+vuex+axios+element-ui

後端只作後端的事情（接口 （表的操做+業務邏輯+封裝 +class+優化））restframework 框架 +django +sqlite + redis

1.xxxx在線教育平臺

項目週期 ： 3~6個月

技術棧：vue+vue+router+vuex+axios+element-ui+restframework +django +sqlite + redis

項目介紹：

1.

2.

3.

項目總結：

2.xxxxxx後臺管理系統

1.下載

cdn

2.引包 vue-router依賴vue

vue-router.js

3.若是是模塊化機制 Vue.use(vue-router)

4.建立示例

let Home = {/*....*/}
const router = new VueRouter({
 //5.配置路由信息
    routes:[
       {
            path:'/',
            redirect:'/home'
       },
       {
            path:'/home',
            name:'Home',
            component:Home
       }
   ]
})
​
new Vue({
    //6.掛載router對象到vue的實例中
    router
})

5.使用路由

router-link默認被渲染成a標籤 to屬相會被渲染成href
​
<div>
    
    <router-link to = '/'>首頁</router-link>
    <router-link :to = '/home' @click.native = ''>首頁</router-link>
     路由組件的出口
     <router-view></router-view>
  
</div>

6.動態路由匹配

/user/1 /user/2 加載的是同一個組件

routes:[
       {
            path:'/',
            redirect:'/home'
       },
       {
            path:'/user/:xxxx',
            name:'User',
            component:User
       }
   ]

 <router-link :to = '{name:"User",params:{xxxx:"front"}}'>前端</router-link>
 <router-link :to = '{name:"User",params:{xxxx:"ios"}}'>IOS</router-link>

複用的組件 監聽路由的變化

watch: {
    '$route':(to,from)=>{
        to 要進入的頁面的路由信息對象
        from 從哪一個路由信息對象中來
 }
}

 

7.編程式導航

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

 

vue-router提供的內置的內容

router-link

router-view

this.$route 路由信息對象

this.$router

本節內容

獲取原生的DOM的方式 **

給標籤或者組件 添加ref
<div ref = 'alex'>哈哈哈</div>
<p ref = 'a'></p>
<Home ref = 'b'></Home>
​
this.$refs.alex  獲取原始的DOM對象
this.$refs.b 獲取的是組件實例化對象

DIY腳手架

• cmd

  module.exports = xxx
  ​
  require()

• es6module

  //module.js
  ​
  var person = {
      name:'張三',
      fav:function () {
          alert(1);
     }
  }
  var name;
  name = 23;
  export {name}
  ​
  ​
  export  var num2 = 34;
  export function add() {
      alert(2)
  }
  ​
  ​
  export default person

  //main.js
  import * as a from './module.js'
  //as 起別名

  npm 至關於 pip3

  node package manager

  webpack模塊使用

  一、nodejs 安裝

  二、npm init --yes 默認生成一個package.json文件 （管理整個項目中的包）

 

vue-cli的使用 ***

 

項目的執行順序

 

 

webpack模板的使用

vue init webpack 項目名

 

 

 

element-ui的使用

npm i element-ui -S

 

 

imgList:[

{

id:1,

imgSrc:'https://hcdn1.luffycity.com/static/frontend/index/banner11_1538122470.2779157.png'

},

{

id:2,

imgSrc:'https://hcdn1.luffycity.com/static/frontend/index/banner11_1538122470.2779157.png'

},

{

id:3,

imgSrc:'https://hcdn1.luffycity.com/static/frontend/index/banner11_1538122470.2779157.png'

},

{

id:4,

imgSrc:'https://hcdn1.luffycity.com/static/frontend/index/banner11_1538122470.2779157.png'

},

{}

 

]