JAVA程序员学Vue系列之四 - 组件&表达式&路由

笨笨笨
1,016 阅读4分钟

一. 组件(Component)

1.1 组件的认识

1.1.1 什么是组件

  • 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
  • 组件可以根据vue特别，扩展原生HTML元素的功能。
  • 简单理解 : 组件是用来完成特定功能的一个自定义的HTML标签。
  • 组件有全局组件与局部组件

1.1.2 组件的作用

  • 组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码.

1.2 全局组件

  • 语法： Vue.component("自定义标签的名字",{配置对象})
  • 特点：
    • 全局组件可以在任何被挂着的标签中使用.
    • 全局组件的配置对象中必须包含template属性
  • 注意事项：template中的html必须在一个标签中. 仅且只能有一个根节点

1.2.1 代码实现

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>

    <div id="app">
            <mytag></mytag>
            <mytag></mytag>
            <mytag></mytag>
    </div>
    <hr />
    <div id="app2">
        <mytag></mytag>
    </div>

    <script type="text/javascript">
        //component
        /**
         *  mytag:标签的名称
         *  template里面是一个自定义标签的内容
         */
        //这里定义的是一个全局组件，只要是被挂载的地方都可以使用它
        Vue.component('mytag',{
            //记住:这里有且只能有一个外部标签
            template:"<h1>我是一个自定义的东西哦</h1>"
        })

        new Vue({
            el:"#app"
        })
        new Vue({
            el:"#app2"
        })
    </script>

</body>

1.2.2 代码抽一抽

注:以后我们看到很多别人的代码都是抽过后的效果，大家一定要能看懂哦

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
            <mytag></mytag>
            <mytag></mytag>
            <mytag></mytag>
    </div>
    <hr />
    <div id="app2">
        <mytag></mytag>
    </div>
    <script type="text/javascript">
        //定义组件中显示的数据
        let tempStr = "<h1>我是一个自定义的东西哦</h1>";
        //定义组件的配置
        let tempConfig= {template:tempStr};
        //注册组件
        Vue.component("mytag",tempConfig);
        new Vue({
            el:"#app"
        })
        new Vue({
            el:"#app2"
        })
    </script>
</body>

1.3 局部组件

  • 特点：局部组件只能够在所挂载的标签中使用
  • 语法：
var app = new Vue({
    el: "#app",
    data: {},
    components : {
        "局部组件的名字1" : {组件的配置对象},
        "局部组件的名字2" : {组件的配置对象}
    }
  });
  • 代码实现
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <mytag></mytag>
    </div>
    <script type="text/javascript">

        new Vue({
            el:"#app",
            components:{
                //这里定义标签的名称,可定义多个
                "mytag":{
                    //标签对应的模板
                    template:"<h1>咱是专属标签哦！</h1>>"
                }
            }
        })

    </script>
</body>

1.4 组件模块

咱们前面练习时在template里面的html代码都是较少的，如果遇到html代码很多，那么直接根据刚才的语法来写的话还是会比较麻烦，所以我们以后更多的是以组件模块的方式来完成组件的template中的内容，大家可以看下面的两段代码:

1.4.1 template标签模板

  • 注:如果把模板直接放到挂载的元素中,这个模板默认会显示出来
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <mytag></mytag>
        <mytag></mytag>
        <mytag></mytag>
    </div>

    <!--准备模板数据，如果这个模板放到挂载元素中，就会直接显示-->
    <template id="mytemp">
        <form>
            <input type="text"> <button>点我啊！！！</button>
        </form>
    </template>

    <script type="text/javascript">
        //定义模板对象
        let tempConfig = {template:"#mytemp"};
        //注册组件
        Vue.component('mytag',tempConfig)

        new Vue({
            el:"#app",
        })
    </script>
</body>

1.4.2 script标签模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <mytag></mytag>
</div>

<!-- script中准备相应的数据  -->
<script type="text/template" id="mytemp">
    <form>
      用户名:<input type="text" />
    </form>
</script>

<script>
    let tempConfig = {
        template:"#mytemp"
    };
    Vue.component("mytag",tempConfig)
    new Vue({
        el:"#app"
    })
</script>
</body>
</html>

1.5 组件中动态取值与方法调用

  • 注意点1：数据与方法都必需写在模板配置中
  • 注意点2：模板中的data要求必需是一个函数(数据从函数中返回)
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <mytag></mytag>
</div>
<!--
    使用模板标签(里面的内容是不会显示在页面的)
    template如果写在挂载容器中(会显示出来一次)
-->
<template id="myTemp">
    <form method="post">
        {{usernameLable}}:<input type="text" /> <br>
        密码:<input type="password" /><br>
        <input type="button" @click="login" value="登录" />
    </form>
</template>

<script>
    //组件的配置
    const  mytagConfig ={
        //直接引用模板的的值
        template:"#myTemp",
        //这个data必需是一个方法，返回相应的数据
        data(){
            return {
                usernameLable:"用户的名称"
            }
        },
        methods:{
            login(){
                alert("登录开心嘛？")
            }
        }
    }
    Vue.component("mytag",mytagConfig)

   new Vue({
       el:"#app"
    })

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

1.6 注意点总结

  • 模板取名不要使用驼峰命名，如果有多个单词,建议使用-号分隔开
    • 例: myTag 改成 my-tag
  • 建议都使用template标签来写模板
  • template里面的html必需有一个根标签
  • 模板中的data属性必需是一个函数

二. 计算(computed)与监控(watch)

2.1 计算属性

如果一个值需要大量计算展示，建议使用计算属性先计算完毕再直接使用

  • 在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
  • 计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用

2.1.1 直接在表达式中计算

<body>
    <div id="app">
        {{ 
        new Date(bronDate).getFullYear() + '-'+ new Date(bronDate).getMonth()+ '-' + new Date(bronDate).getDate()
        }}
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
           bronDate:1529032123201 //时间毫秒值
        }
    })
</script>
</body>

2.1.2 使用计算方案

<body>
    <div id="app">
        {{birth}}
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
           bronDate:1529032123201 //时间毫秒值
        },
        computed:{
            birth(){// 计算属性本质是一个方法，但是必须返回结果
                const d = new Date(this.bronDate);
                return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDate();
            }
        }
    })
</script>
</body>

2.2 监控属性watch

  • watch可以让我们监控一个值的变化。从而做出相应的反应。
  • 比如咱们监听一个文本框中的变化，然后进行相应的高级查询(百度搜索)
<body>
    <div id="app">
        <input type="text" v-model="msg" />
    </div>
  <script>
      new Vue({
          el:"#app",
          data:{
              msg:"xxx"
          },
          //监听相应的属性变化
          watch:{
              //变化后要执行的功能
              msg(newVal,oldVal){
                  console.debug(newVal,oldVal);
              }
          }
      })
  </script>
</body>

三. 路由

3.1 路由的认识

  • 路由是负责将进入的浏览器请求映射到特定的组件代码中,简单理解就是 地址对应相应的组件
  • vue的官网以及网易云音乐中都可以看到路由的效果
  • 路由是一个插件，需要单独的引入
  • 学习资源 : 官方路由支持

3.2 安装与引入

  • npm安装命令 npm install vue-router
 <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
 <script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>

3.3 准备连接

<div id="app">
    <h1>我是一个路由!</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">首页</router-link>
        
        <router-link to="/employee">员工管理</router-link>
        <router-link to="/department">部门管理</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

3.4 创建与绑定路由

//创建一个路由对象
  let router = new VueRouter({
      routes:[
          //路由的地址对应相应的组件
          {
              path: '/',
              component: {
                  template: '<h1>我是第一页</h1>'
              }
          },
          {
              path: '/employee',
              component: {
                  template: '<div>员工棒棒的！</div>'
              }
          },
          {
              path: '/department',
              component: {
                  template: '<div>我是部门我怕谁</div>'
              }
          }
      ]
  });

  new Vue({
      el:"#app",
      //绑定相应的路由
     router:router
  })

四.vue生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

4.1 生命周期认识

  • 每个 Vue 实例在被创建时都要经过一系列的初始化过程
    • 创建实例
    • 装载模板
    • 渲染模板
  • Vue为生命周期中的每个状态都设置了钩子函数（监听函数）
  • created与mounted的区别
    • created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    • mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作

4.2 钩子方法的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是一个勾子</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

    <div id="app">{{msg}}</div>

<script>
    new Vue({
        el:"#app",
        data:{
            msg:"xxx"
        },
        //在模板渲染成html前调用
        created(){
            this.msg ="你好啊，亲！";
        },
        //在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
        mounted(){
            this.msg = "不好的，亲！";
        }

    })
</script>
</body>
</html>
avatar
文章
阅读
粉丝