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'

},

{}

 

]