Vue快速学习_第三节

  1. 过滤器

    • 局部过滤器(组件内部使用的过滤器,跟django的很像, filters: {过滤器的名字: {function(val, a,b){}}}
    • 全局过滤器(全局过滤器,只要过滤器一创建,在任何组件中都能使用, Vue.filter(‘过滤器的名字‘，function(val,a,b){}) )
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <App></App>
</div>

</body>
<script src="vue.js"></script>
<script src="moment.js"></script>
<script>
    // 定义全局过滤器,字符串翻转
    Vue.filter(‘strReverse‘, function (val) {
        return val.split(‘‘).reverse().join(‘‘)
    });

    let App = {
       data(){
           return{
               // 创建日期对象
                timer: new Date(),
               msg: ‘i love you‘,
           }
       },
        methods: {

        },
        // YYYY-MM-DD HH:mm:ss 代表年月日 时分秒,过滤器的使用是 数据 | 过滤器的名字(第二个参数,第三个参数....)
        template:`
        <div>
            <h3>{{ timer|myTime(‘YYYY-MM-DD HH:mm:ss‘) }}</h3>
            <h3>{{ msg|strReverse }}</h3>
        </div>
        `,
        components: {

        },
        // 局部过滤器
        filters:{
           // 时间格式化过滤器
           myTime: function(val, formatStr){
                  //val 就是输入的时间数据, formatStr就是用户自定义的时间格式,moment是moment.js中一个日期处理类库的方法
                return moment(val).format(formatStr);
           }
        }

    };
    new Vue({
        el: ‘#box‘,
        data(){
            return{

            }
        },
        methods:{

        },
        components:{
            App
        }
    })

</script>
</html>

  2. 生命周期的钩子函数

    1. beforeCreate(){} 组件创建之前,此时组件元素还不可调用
    2. created(){} 组件创建完成,组件元素可以调用,一般此时做ajax请求,实现数据驱动视图(常用,重要)
    3. beforeMount(){} 在挂载开始之前被调用,此时数据还未被加载到DOM上
    4. mounted(){} 装载数据到DOM之后调用,可以操作DOM(也比较重要)\
    5. beforeUpdate(){} 在更新之前获取原始的dom
    6. updated(){} 更新完之后,调用此钩子获取最新dom,以便之后操作
    7. beforeDestroy(){} 实例销毁之前调用。在这一步，实例仍然完全可用
    8. destroyed(){} Vue 实例销毁后调用,一般用于定时器的销毁
    9. activated(){} keep-alive 组件激活时调用( keep-alive 组件主要作用，让组件产生缓存)
    10. deactivated(){} keep-alive 组件停用时调用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    <App></App>
</div>

</body>
<script src="vue.js"></script>
<script src="moment.js"></script>
<script>
    let Test1 = {
        data(){
          return {
                msg1: ‘Test1组件内容‘,
          }
      },
        template: `
            <div>
                <h3 id="msgs">{{ msg1 }}</h3>
                <button @click = ‘clickHandler‘>颜色修改</button>
            </div>
        `,
        methods:{
          clickHandler(){
                document.querySelector(‘#msgs‘).style.color = ‘red‘;
          },
        },
        // keep-alive 组件主要作用，让组件产生缓存, 所以组件激活停用后,状态会保存(例如上面的颜色就能被保存),激活时调用
        activated(){
            console.log(‘组件被激活了‘)
        },
        // keep-alive 组件停用时调用
        deactivated(){
            console.log(‘组件被停用了‘)
        }
    };
    let Test = {
      data(){
          return {
                msg: ‘Test组件内容‘,
                count:null,
                timer:null
          }
      },
        template: `
            <div>
                {{ count }}
                <h3>{{ msg }}</h3>
                <button @click = ‘clickHandler‘>修改msg</button>
            </div>
        `,
        methods:{
          clickHandler(){
                this.msg = ‘修改之后的Test组件内容‘;
                document.querySelector(‘#msgs‘).style.color = ‘red‘;
          },
        },
        beforeCreate(){
          console.log(‘组件创建之前‘)
        },
        created(){
          // 创建一个定时器,每秒加1
          this.timer = setInterval(()=> {
              this.count++
          },2000);
          console.log(‘组件创建之后‘)
        },
        beforeMount(){
          // 获取不到<h3>Test组件内容</h3>,因为dom还没加载
          console.log(document.querySelector(‘#box‘))
        },
        mounted(){
          // 可以获取到<h3>Test组件内容</h3>,因为此时dom已经加载完成
          console.log(document.querySelector(‘#box‘))
        },
        beforeUpdate(){
          // 在更新之前获取原始的dom,点击了修改按钮才会执行更新这两个方法
            console.log(document.querySelector(‘#box‘).innerHTML)
        },
        updated(){
          // 更新完之后,调用此钩子获取最新dom,以便之后操作
             console.log(document.querySelector(‘#box‘).innerHTML)
        },
        beforeDestroy(){
           console.log(‘在销毁之前‘)
        },
        destroyed(){
          // 由于定时器不会自动销毁,所以一般都会在destroyed方法里面进行销毁
            clearInterval(this.timer);
            console.log(‘在销毁之后‘)
        }
    };

    let App = {
       data(){
           return{
               isShow: true,
               isChange: true
           }
       },
        methods: {
            clickDestroy(){
                this.isShow = !this.isShow;
            },
            clickActivate(){
                this.isChange = !this.isChange;
            }
        },
        template:`
        <div>
            <Test v-if="isShow" />
            <button @click = ‘clickDestroy‘>销毁和创建组件</button>
            <keep-alive>
                <Test1 v-if="isChange" />
            </keep-alive>
            <button @click = ‘clickActivate‘>激活和停用组件</button>
        </div>
        `,
        components: {
            Test,
            Test1
        },
    };
    new Vue({
        el: ‘#box‘,
        data(){
            return{
            }
        },
        methods:{

        },
        components:{
            App
        }
    })

</script>
</html>
  1. vue-router的基本使用

Vue的全家桶 (vue+vue-router+vuex)

vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用, vue-router是vue的核心插件,

网址为:https://router.vuejs.org/zh/

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

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

  • vue-router使用及命名路由
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">

</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //0 .如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter
    //    Vue.use(VueRouter)
    // 1. 定义 (路由) 组件,可以从其他文件 import 进来,首先定义了首页和课程两个路由组件
    const Home = {
        data(){
            return{}
        },
        template:`<div>我是首页</div>`
    };
    const Course = {
        data(){
            return{}
        },
        template:`<div>我是课程页面</div>`
    };
     // 2.定义路由规则,每个路由应该映射一个组件。 其中"component" 可以是,还可以给路由起别名name:‘Home‘
    const routes = [
        {path: ‘/‘, redirect: ‘/home‘},
        {path: ‘/home‘,name:‘Home‘, component: Home},
        {path: ‘/course‘, component: Course},
    ];
    //3.创建 router 实例，然后传 `routes` 配置
    const  router = new VueRouter({
        //vue-router 默认 hash 模式(带#号),如果不想要很丑的 hash，我们可以用路由的 history 模式
        // mode:‘history‘,
        routes // (缩写) 相当于 routes: routes
    });
    let App = {
        data(){
            return {}
        },
        // router-link和router-view 是vue-router 提供的两个全局组件
        //router-view  是路由组件的出口
        //router-link默认会被渲染成a标签，to属性默认被渲染成href, 绑定to属性,然后再{name:‘Home‘}通过首页的别名进行访问
        template:`
        <div>
            <div class="header">
                   <router-link :to="{name:‘Home‘}">首页</router-link>
                   <router-link to="/course">课程</router-link>
            </div>
            <router-view></router-view>
        </div>
        `,
    };
    new Vue({
        el:‘#box‘,
        // 4.创建和挂载根实例,一定要记得挂载
        router,
        data(){
            return {}
        },
        template:`
        <App></App>
        `,
        components:{
            App
        }
    })
</script>
</body>
</html>
  • 动态路由匹配

$route 路由信息对象

$router 路由对象 VueRouter

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

</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //动态路由匹配针对的是类似course/1 ,course/22 这样的访问,如果是course?xx=1,则需要用$route.query (如果 URL 中有查询参数)
    const Course = {
        data(){
            return{
                id:null
            }
        },
        //4 id就发生了变化
        template:`<div>我是课程页面/{{ id }}</div>`,
        //提醒一下，当使用路由参数时，例如从 /course/1 导航到 /course/22，原来的组件实例会被复用。因为两个路由都渲染同个组件，
        // 比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
        // 3. 所以用watch (监测变化) $route 对象
        watch:{
            // to表示要去哪里,点击/course/2,则to就是/course/2(当前路由信息对象),而from就是/course/1的信息(从/course/1来)
            ‘$route‘(to, from){
                // 对路由变化作出响应,
                this.id = to.params.id;
            }
        }
    };
    const routes = [
        // 2.一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params
        {path: ‘/course/:id‘,name:‘course‘, component: Course},
    ];
    const  router = new VueRouter({
        routes
    });
    let App = {
        data(){
            return {}
        },
        //1.通过这种params:{id:1}传参
        template:`
        <div>
            <div class="header">
                   <router-link :to="{name:‘course‘,params:{id:1}}">课程1</router-link>
                   <router-link :to="{name:‘course‘,params:{id:2}}">课程2</router-link>
            </div>
            <router-view></router-view>
        </div>
        `,
    };
    new Vue({
        el:‘#box‘,
        router,
        data(){
            return {}
        },
        template:`
        <App></App>
        `,
        components:{
            App
        }
    })
</script>
</body>
</html>
  • 编程式导航(this.$router.push({name:‘Home‘}))
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">

</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    const Home = {
        data(){
            return{}
        },
        template:`<div>我是首页</div>`
    };
    const Course = {
        data(){
            return{
                id:null
            }
        },
        template:`<div>
            <div>我是课程页面</div>
            <button @click = ‘clickHandler‘>跳转首页</button>
        </div>
        `,
        methods:{
            // 编程式导航,将要跳转的页面放入$router中
            clickHandler(){
                this.$router.push({
                    name:‘Home‘
                })
            }
        },
    };
    const routes = [
        {path: ‘/home‘,name:‘Home‘, component: Home},
        {path: ‘/course‘,name:‘course‘, component: Course},
    ];
    const  router = new VueRouter({
        routes
    });
    let App = {
        data(){
            return {}
        },
        template:`
        <div>
            <div class="header">
                   <router-link :to="{name:‘course‘}">课程</router-link>
            </div>
            <router-view></router-view>
        </div>
        `,
    };
    new Vue({
        el:‘#box‘,
        router,
        data(){
            return {}
        },
        template:`
        <App></App>
        `,
        components:{
            App
        }
    })
</script>
</body>
</html>
 

原文地址：https://www.cnblogs.com/leixiaobai/p/11193007.html

时间： 2024-11-02 16:18:36

Vue快速学习_第三节的相关文章

Vue快速学习_第二节

表单输入绑定(v-model) v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定(注意只在表单这几个可以,实际上就是负责监听用户的输入事件以更新数据) 注意:v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源. v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 元素使用

Vue 超快速学习

Vue 超快速学习 基础知识: 1.vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeDestory/destoryed 2.vue常用指令: v-for. v-bind(缩写形式 :prop). v-on(缩写形式 @click='sss'). v-if/v-else/v-else-if. v-model. v-once. v-html. v-show... 3.vue自定义组件: 

Spring_MVC_教程_快速入门_深入分析

Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门 资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf SpringMVC核心配置文件示例.rar 作者:赵磊 博客:http://elf8848.iteye.com 目录 一.前言 二.spring mvc 核心类与接口 三.spring mvc 核心流程图 四.spring mvc DispatcherServlet说明 五.spring mvc 父子上下文的说明

【Java的JNI快速学习教程】

1. JNI简介 JNI是Java Native Interface的英文缩写,意为Java本地接口. 问题来源:由于Java编写底层的应用较难实现,在一些实时性要求非常高的部分Java较难胜任(实时性要求高的地方目前还未涉及,实时性这类话题有待考究). 解决办法:Java使用JNI可以调用现有的本地库(C/C++开发任何和系统相关的程序和类库),极大地灵活Java的开发. 2. JNI快速学习教程 2.1 问题: 使用JNI写一段代码,实现string_Java_Test_helloworld

React Native学习（1）：怎么快速学习一门新技术

React Native学习方法论 这是我技术公众号的第一篇文章,也是ReactNative系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学习任何语言和系统都适用. 对于新技术的学习,分为两种,一种是语言,类似Swift.Objective-C.Java.ES6,另一种是系统,比如Android.iOS.前端. 1. 语言层面,如果你精通某一门语言,那么是可以很快切换到另一门语言的.这就是语言的相通性.

快速学习MySQL SQL语句

须知: SQL语言:结构化查询语言,是关系型数据库查询语言的标准,不同的数据库虽然有自己私有扩展,但关键词都支持:(select.update.delete.insert.where) SQL语句分类:像Oracle.MSSQL都是通用的 DDL:数据定义语言(create.alter.drop.rename) DML:数据库维护语言(select.insert.update.delete) DCL:数据库控制语言,权限(Grant.revoke) TCL:事物型语言(commt.sarepqi

机器学习_深度学习_入门经典（永久免费报名学习）

机器学习_深度学习_入门经典(博主永久免费教学视频系列) https://study.163.com/course/courseMain.htm?courseId=1006390023&share=2&shareId=400000000398149 作者座右铭---- 与其被人工智能代替,不如主动设计机器为我们服务. 长期以来机器学习很多教材描述晦涩难懂,大量专业术语和数学公式让学生望而止步.生活中机器学习就在我们身边,谷歌,百度,Facebook,今日头条都运用大量机器学习算法,实现智能

SQL Server 2012笔记分享-46：如何快速学习T-SQL语句

对于初学者来说,T-SQL语句的编写一直是个难题,初学者还是习惯使用图形界面来做相关的SQL方面的维护工作.但是在一个稍微复杂大型的SQL场景中,如果我们能够快速的掌握和理解SQL语句的编写和使用,那么会使我们的运维工作达到事半功倍的效果. 其实对于SQL server 2012来说,本身就提供了很多途径来帮助初学者获取日常管理任务的对应T-SQL脚本.下面我们来举几个快速获取T-SQL脚本的例子. ================================================

Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script src="https://cdn.bootcss.com/vue/2.2.