VUE篇 4 脚手架安装 过滤器 moment.js 生命周期 router

脚手架安装

　　1\在电脑上安装node 和npm  

　　　　输入 node -v 和 npm -v 确保有版本号输出

 

　　2\　　安装淘宝镜像源

  1.   npm install -g cnpm --registry=https://registry.npmmirror.com

 

3\安装VUE脚手架

npm install -g @vue/cli

　

4\ 拉回2版本

npm install -g @vue/cli-init

 

 

过滤器 {{  msg| filter }}

　　　　（我想到了angualr的管道了 原来叫过滤器啊） 

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

　　在组件中写入filters键值对 里面写filter的方法  (方法可以传参 也可以不传)

　　　　

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

 

   let App = {
        data() {
            return {
                msg:'xxxx2312'
            };
        },
        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)
            }
        }
App组件用的过滤器

 

http://momentjs.cn/  这里下载的moment.js 可以很方便的对后端发来的数据做格式化处理！  

》 moment(new Date()).format('YYYY-MM-DD')


"2020-09-24"
>moment('2018-07-24').fromNow();

"2 years ago"

 

 

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

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

 

 

生命周期的钩子函数

从生到死

　　　　　　　　　　　　　　　　　　ed用的多 

diff算法

  • beforeCreate

  • created 组件创建 ***

    • 虚拟DOM React

    • 发送ajax 获取数据 实现数据驱动视图

  • beforeMount

  • mounted ***

    • 获取真实DOM

  • beforeUpdate

  • updated      　　   　　    //跟onchange有点像、、

  • activated

    • 激活当前组件

  • deactivated

    • <keep-alive> Vue提供的内置组件，主要作用，让组件产生缓存

    • 停用当前组件

  • beforeDestroy

  • destroyed

    • 如果开了定时器，一定要关闭定时器

  • beforeCreate(){

    // 组件创建之前

    console.log(this.msg);

},

created(){

    // 组件创建之后

    // 使用该组件，就会触发以上的钩子函数，created中可以操作数据，发送ajax，并且可以实现vue==》页面的影响  应用：发送ajax请求

    console.log(this.msg);

    // this.msg = '嘿嘿黑';

},

beforeMount(){

    // 装载数据到DOM之前会调用

    console.log(document.getElementById('app'));

},

mounted(){

    // 这个地方可以操作DOM

    // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM

    console.log(document.getElementById('app'));

},

beforeUpdate(){

    // 在更新之前，调用此钩子，应用：获取原始的DOM

    console.log(document.getElementById('app').innerHTML);

},

updated(){

    // 在更新之前，调用此钩子，应用：获取最新的DOM

    console.log(document.getElementById('app').innerHTML);

},

beforeDestroy(){

    console.log('beforeDestroy');

},

destroyed(){

    console.log('destroyed');

},

activated(){

    console.log('组件被激活了');

},

deactivated(){

    console.log('组件被停用了');

}

     

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

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

    vue-router是vue的核心插件

     

    为什么要使用单页面应用？

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

 

下载vue 路由插件

https://router.vuejs.org/zh/guide/#html   

把 https://unpkg.com/vue-router@3.4.5/dist/vue-router.js   下载下来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>



<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    // 如果是模块化编程，Vue.proptotype.$VueRouter = VueRouter

    //组件
    const Home = {
        data(){
            return {}
        },
        template:`<div >我是首页下面的页面</div>`
    };
    const Course = {
        data(){
            return {}
        },
        template:`<div >我是课程下面的页面</div>`
    };

    // 路由
    const router = new VueRouter({
        mode:'history',
        routes:[
            {path:'/home',component:Home},
            {path:'/',
            redirect:'/home'
            ,component:Home},{path:'/course',component:Course}]
    })


    let App={
        data(){
            return{

            }
        },
        template: `
            <div>
                <div  class="header">
                 <router-link to = '/'>首页啊</router-link>
                 <router-link to = '/course'>免费课程啊</router-link>
                </div>


                <router-view></router-view>
            </div>
                `,
    }


    new Vue({
        el:'#app',
        // router:router,
        router,
        data(){
            return{}
        },
        template:`
        <App />
        `,
        components:{
            App
        }
    })

</script>

</body>
</html>
路由demo

实例化路由
const router = new VueRouter({}）
路由设置中的写上下面，可以去掉# 
mode:'history',
设置路由 列表里面对象的形式
routes:[
    {path:'/home',component:Home},
    {path:'/',
    redirect:'/home'
    ,component:Home},{path:'/course',component:Course}]



在Vue 类写上：
router,  或 router:router,


<router-link to = '/'>首页啊</router-link>   这个类似于a标签   to 类似于href 来跳转、


<router-view></router-view>  这个标签用来显示加载跳转的路由的页面



命名路由 :
在路由配置中加上name属性 




 {path:'/homesad',component:Home,name:'Home'},




然后模板这么写




  <router-link :to = '{name:"Home"}'>首页啊</router-link>




这样 to 和name就绑定了。 当我们改变path的时候，不需要改变to属性的值了


 


 


 


动态路由匹配


　　如何获取url的参数信息呢？


　　　　参数信息有 params 　　如下：




http://127.0.0.1:8080/user/1 




　　　　和query　　　　　　如下：




http://127.0.0.1:8080/user?user_id =1




路由配置中:


这么做：


 path: '/user/:id'  


在<router-link >标签中再加上params:{id:1}  或query:{id:1}  


 


在data中声明一下


　　然后用钩子 watch 监听  调用




to.params.id




然后用声明的字段赋值


最后用到模板上就行了啊






const User = {
        data() {
            return {
                user_id:null
            }
        },
        template: `<div>我是用户{{ user_id}}</div>`,
        created() {
            console.log(this.$route); //路由信息对象
//            提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
        },
        watch: {
            '$route'(to, from) {
                // 对路由变化作出响应...
                console.log(to.params.id);
                console.log(from);
                this.user_id = to.params.id;
                //发送ajax

            }
        }
    }



View Code


 


 


 


编程路由 
 害，就是一个标签写一个方法 比如点击事件，




<button @click="clickH">首页 </button>




 


 


　　配置路由照样写哈


　


然后再methods 写一个对应的方法　这个方法用到了 router.push




        methods:{
            clickH(){
                this.$router.push({
                    name:'Home'
                })
            }
        }




 






            

            
posted @ 
2020-09-24 23:09 
蜗牛般庄 
阅读(297) 
评论(0) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    



	

	

	
	

	

	

	





    

        




    
    Title





页脚 HTML 代码