过滤器/钩子函数/router

时间 2019-11-13

标签过滤器钩子函数 router 繁體版

原文原文链接

前节回顾

1.v-model 双向的数据绑定html

2.组件前端

（1）局部组件vue

let Son = {
 data(){
        return {
            
       }
   },
    methods:{
        
   },
    computed:{
        
   },
    create(){
 }
}
....
{
    template:`<Son />`,
    components:{
        Son
   }
}

声子挂子用子ajax

（2）全局组件算法

vue.component('组件的名字',{
    data(){
        return {
            msg:'hahah'
       }
   },
    methods:{
        
   },
    computed:{
        
   },
    create(){
 }
    
    
})

(3) 父子组件传值vue-router

父= 》子 vuex

（1）在子组件中声明props 只要声明了该属性，那么就能够在组件中任意使用django

（2）在父组件经过绑定自定义属性挂载数据属性编程

<Son :msg = 'msg'>后端

子=》父

（1）在子组件中经过this.$emit('方法名'，值)

（2）在父组件中绑定自定义的事件

平行组件

bus 公交车对象：绑定 $on和$emit

let bus = new Vue();

A=>B 传值

$emit('函数名'，值)==> $on(’函数名‘,()=>{})

本节内容

过滤器

1.局部过滤器在当前组件内部使用过滤器

给某些数据 添油加醋

//声明
filters:{
    '过滤器的名字':function(val,a,b){
        //a 就是alax ，val就是当前的数据
 }
}
//使用 管道符
数据 | 过滤器的名字('alex'，'wusir')

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app">
        <App />
    </div>
    <script src="vue.js"></script>
    <script src="moment.js"></script>
    <script>
        let App = {
            data(){
                return {
                    msg:"hello world",
                    time:new Date()
               }
           },
            template:`

               <div>我是一个APP {{ msg | myReverse }}
                <h2>{{ time | myTime('YYYY-MM-DD')}}</h2>

               </div>
            `,
            filters:{
                myReverse:function (val) {
                    console.log(val);
                    return val.split('').reverse().join('')
               },
                //年-月- 日 年- 月
                myTime:function(val,formatStr){
                    return moment(val).format(formatStr);
               }
           }
       }
        new Vue({
            el:'#app',
            data(){
                return {

               }
           },
            components:{
                App
           }

       })

    </script>
</body>
</html>

2.全局过滤器只要过滤器一建立，在任何组件中都能使用 ***

Vue.filter('过滤器的名字'，function(val,a,b){})
在各个组件中都能使用
数据 | 过滤器的名字('alex'，'wusir')

生命周期的钩子函数

从生到死

diff算法

beforeCreate

created 组件建立 ***
- 虚拟DOM React
- 发送ajax 获取数据实现数据驱动视图
beforeMount
mounted ***
- 获取真实DOM
beforeUpdate
updated
activated
- 激活当前组件
deactivated
- keep-alive Vue提供的内置组件，主要做用，让组件产生缓存
- 停用当前组件
beforeDestroy
destroyed
- 若是开了定时器，必定要关闭定时器

Vue的基本用法

模板语法{{ }} 关闭掉 django中提供的模板语法{{ }}

指令系统

v-text

v-html

v-show和v-if

v-bind和v-on

v-for

v-model 双向数据绑定

Vue中的经常使用属性

data:function(){}

methods

watch

computed

template

Vue的经常使用方法

钩子函数

Vue的过滤器

局部和全局的过滤器

Vue的组件

全局组件

Vue.component('组件的名字',{
 
    
})

局部组件

声子挂子用子

组件的传值

父=》子

子=》父

平行组件传值

Vue的全家桶（kfc） vue+vue-router+vuex

vue+vue-router 主要来作 SPA（Single Page Application）单页面应用

vue-router是vue的核心插件

为何要使用单页面应用？

传统的路由跳转，若是后端资源过多，会致使页面出现白屏现象，让前端来作路由，在某个生命周期的钩子函数中发送ajax，数据驱动。为了用户体验

使用vue-router

1.下载

 //若是之后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
    //   Vue.use(VueRouter)
    const Home = {
        data() {
            return {}
       },
        template: `<div>我是首页</div>`
   }
    const Course = {
        data() {
            return {}
       },
        template: `<div>我是免费课程</div>`
   }
    //2.建立路由
    const router = new VueRouter({
        //3.定义路由规则
        mode:'history',
        routes: [
           {
              path:'/',
              redirect:'/home'
           },
           {
                path: '/home',
                component: Home
           },
           {
                path: '/course',
                component: Course
           }
       ]
   })
    let App = {
        data() {
            return {}
       },
//       router-link和router-view 是vue-router 提供的两个全局组件
        //router-view 是路由组件的出口
        //router-link默认会被渲染成a标签，to属性默认被渲染成href
        template: `
            <div>

                <div class="header">
     
                    <router-link to = '/home'>首页</router-link>
                    <router-link to = '/course'>免费课程</router-link>
                </div>
                <router-view></router-view>
            </div>

        `

   }
    new Vue({
        el: '#app',
        //4.挂载 路由对象
        router,
        data() {
            return {}
       },
        template: `<App />`,
        components: {
            App
       }
   })

命名路由

 const router = new VueRouter({
        //定义路由规则
        routes: [
           {
              path:'/',
              redirect:'/home'
           },
           {
                path: '/home',
                name:'Home',
                component: Home
           },
           {
                path: '/course',
                name:'Course',
                component: Course
           }
       ]
   })
    
    
     let App = {
        data() {
            return {}
       },
//       router-link和router-view 是vue-router 提供的两个全局组件
        //router-view 是路由组件的出口
        template: `
            <div>

                <div class="header">
                    <router-link :to = '{name:"Home"}'>首页</router-link>
                    <router-link :to = '{name:"Course"}'>免费课程</router-link>
                </div>
                <router-view></router-view>
            </div>

        `

   }

动态路由匹配

$route 路由信息对象

$router 路由对象 VueRouter

watch: {
    '$route'(to, from) {
        // 对路由变化做出响应...
        console.log(to); //当前路由信息对象
        console.log(from);
   }
}

编程式导航vs 声明式导航

<router-link :to = '{name:"Home"}'>首页</router-link>
<router-link :to = '{name:"Course"}'>免费课程</router-link>

//编程式导航
this.$router.push({
    name:'Home'
})