vue简单学习-路由、生命周期、计算属性和watch

本文详细介绍Vue Router的安装、配置及使用方法，包括组件映射、生命周期钩子、计算属性及watch监听的应用。通过实例演示如何设置路由，实现不同URL与组件的对应，以及在组件中进行状态管理和响应式更新。

1、路由Router

概念

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。
简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。
路由不包含在vue中，是一个插件，需要单独下载。
官方地址：https://router.vuejs.org/zh/
地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

使用步骤:

准备组件
映射关系（url映射组件）
告诉vue要使用路由
渲染组件的位置

1.1、引入路由js

npm

npm install vue-router

引入js

 <script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>

1.2、示例

<script type="text/javascript">
    //1、准备组件
    let INDEX = Vue.component("index", {
        template: "<h1>首页</h1>"
    });
    let PRODUCT = Vue.component("product", {
        template: "<h1>chanpin</h1>"
    });
    let EMPLOYEE = Vue.component("employee", {
        template: "<h1>员工</h1>"
    });
    let router = new VueRouter({
        routes: [
            //2、路径映射到组件
            {path: "/index", component: INDEX},
            {path: "/product", component: PRODUCT},
            {path: "/employee", component: EMPLOYEE},
        ]
    })
    var vue = new Vue({
        el: "#app",
        //3、告诉vue，我要使用路由
       router:router
    })
</script>

<body>
<div id="app">
    <router-link to="/index">首页</router-link>
   <router-link to="/product">产品</router-link>
   <router-link to="/employee">员工</router-link>
    <!--4、组件渲染的位置-->
    <router-view></router-view>
</div>
</body>

2、生命周期

生命周期不深入的学习，只了解两个方法：
created和mounted

<!--生命周期：-->
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data:{
            msg:"hello"
        },
        methods:{
            show(){
                console.debug("nihao")
            }
        },
        //在created中，data和methods已经完成初始化，可以直接调用
        created(){
            console.debug(this.msg);
            this.show();
            this.msg="gggg0";
        },
        //整个vue初始化完毕
        //加载列表，渲染数据
        mounted(){
            console.debug("22222"+this.msg);
        }
    });

3、计算属性 computed

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：

 data:{
      birthday:1529032123201 // 毫秒值
  }

我们在页面渲染，希望得到yyyy-MM-dd的样式：虽然能得到结果，但是非常麻烦。

  <h1>您的生日是：{{
      new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
      }}
  </h1>

Vue中提供了计算属性，来替代复杂的表达式：

var vm = new Vue({
      el:"#app",
      data:{
          birthday:1429032123201 // 毫秒值
      },
      computed:{
          birth(){// 计算属性本质是一个方法，但是必须返回结果
              const d = new Date(this.birthday);
              return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
          }
      }
  })

 <div id="app">
     <h1>您的生日是：{{birth}} </h1>
  </div>

4、match

可以让我们监控一个值的变化。从而做出相应的反应。

  <div id="app">
      <input type="text" v-model="message">
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
      var vm = new Vue({
          el:"#app",
          data:{
              message:""
          },
          watch:{
              message(newVal, oldVal){
                  console.log(newVal, oldVal);
              }
          }
      })
  </script>