唯恋殊雨

Web前端学习笔记——VueJS之组件、路由

定义Vue组件

什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

全局组件定义的三种方式

使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({
      template: '登录'
    });
    Vue.component('login', login);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可 -->
    <mycom1></mycom1>
  </div>

  <script>
    // 1.1 使用 Vue.extend 来创建全局的Vue组件
    // var com1 = Vue.extend({
      
    //   template: '这是使用 Vue.extend 创建的组件
' // 通过 template 属性，指定了组件要展示的HTML结构
    // })
    // 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)
    // Vue.component('myCom1', com1)
    // 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接；
    // 如果不使用驼峰,则直接拿名称来使用即可;
    // Vue.component('mycom1', com1)

    // Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的
    // 第二个参数: Vue.extend 创建的组件  ,其中 template 就是组件将来要展示的HTML内容
    Vue.component('mycom1', Vue.extend({
      
      template: '这是使用 Vue.extend 创建的组件
'
    }))


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      
      el: '#app',
      data: {
      },
      methods: {
      }
    });
  </script>
</body>

</html>

直接使用 Vue.component 方法：

Vue.component('register', {
      template: '注册'
    });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 还是使用 标签形式,引入自己的组件 -->
    <mycom2></mycom2>
  </div>

  <script>
    // 注意:不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素
    Vue.component('mycom2', {
      
      template: '这是直接使用 Vue.component 创建出来的组件
123
'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      
      el: '#app',
      data: {
      },
      methods: {
      }
    });
  </script>
</body>

</html>

将模板字符串，定义到script标签种：

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {
      template: '#tmpl'
    });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <mycom3></mycom3>
    <!-- <login></login> -->
  </div>


  <div id="app2">
    <mycom3></mycom3>
    <login></login>
  </div>

  <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  -->
  <template id="tmpl">
    <div>
      <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
      <h4>好用,不错!</h4>
    </div>
  </template>

  <template id="tmpl2">
    <h1>这是私有的 login 组件</h1>
  </template>

  <script>
    Vue.component('mycom3', {
      
      template: '#tmpl'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      
      el: '#app',
      data: {
      },
      methods: {
      }
    });


    var vm2 = new Vue({
      
      el: '#app2',
      data: {
      },
      methods: {
      },
      filters: {
      },
      directives: {
      },
      components: {
       // 定义实例内部私有组件的
        login: {
      
          template: '#tmpl2'
        }
      },

      beforeCreate() {
       },
      created() {
       },
      beforeMount() {
       },
      mounted() {
       },
      beforeUpdate() {
       },
      updated() {
       },
      beforeDestroy() {
       },
      destroyed() {
       }
    })
  </script>
</body>

</html>

注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

组件中展示数据和响应事件

在组件中，data需要被定义为一个方法，例如：

Vue.component('account', {
      template: '#tmpl',
      data() {
        return {
          msg: '大家好！'
        }
      },
      methods:{
        login(){
          alert('点击了登录按钮');
        }
      }
    });

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <mycom1></mycom1>
  </div>

  <script>
    // 1. 组件可以有自己的 data 数据
    // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
    // 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
    // 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
    Vue.component('mycom1', {
      
      template: '这是全局组件 --- {
      {msg}}
',
      data: function () {
      
        return {
      
          msg: '这是组件的中data定义的数据'
        }
      }
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      
      el: '#app',
      data: {
      },
      methods: {
      }
    });
  </script>
</body>

</html>

在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问；

【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象

通过计数器案例演示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <counter></counter>
    <hr>
    <counter></counter>
    <hr>
    <counter></counter>
  </div>


  <template id="tmpl">
    <div>
      <input type="button" value="+1" @click="increment">
      <h3>{
      {
      count}}</h3>
    </div>
  </template>

  <script>
    var dataObj = {
       count: 0 }

    // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
    Vue.component('counter', {
      
      template: '#tmpl',
      data: function () {
      
        // return dataObj
        return {
       count: 0 }
      },
      methods: {
      
        increment() {
      
          this.count++
        }
      }
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      
      el: '#app',
      data: {
      },
      methods: {
      }
    });
  </script>
</body>

</html>

使用`components`属性定义局部子组件

组件实例定义方式：

引用组件：

使用`flag`标识符结合`v-if`和`v-else`切换组件

页面结构：

Vue实例定义：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="flag=true">登录</a>
    <a href="" @click.prevent="flag=false">注册</a>

    <login v-if="flag"></login>
    <register v-else="flag"></register>

  </div>

  <script>
    Vue.component('login', {
      
      template: '登录组件
'
    })

    Vue.component('register', {
      
      template: '注册组件
'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      
      el: '#app',
      data: {
      
        flag: false
      },
      methods: {
      }
    });
  </script>
</body>

</html>

使用`:is`属性来切换不同的子组件,并添加切换动画

组件实例定义方式：

  // 登录组件
    const login = Vue.extend({
      template: `
        登录组件
      `
    });
    Vue.component('login', login);

    // 注册组件
    const register = Vue.extend({
      template: `
        注册组件
      `
    });
    Vue.component('register', register);

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: { comName: 'login' },
      methods: {}
    });

使用component标签，来引用组件，并通过:is属性来指定要加载的组件：

  
    登录
    注册

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>

    <!-- Vue提供了 component ,来展示对应名称的组件 -->
    <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->
    <component :is="comName"></component>

    <!-- 总结:当前学习了几个 Vue 提供的标签了??? -->
    <!-- component,  template,  transition,  transitionGroup  -->

  </div>

  <script>
    // 组件名称是 字符串
    Vue.component('login', {
      
      template: '登录组件
'
    })

    Vue.component('register', {
      
      template: '注册组件
'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      
      el: '#app',
      data: {
      
        comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
      },
      methods: {
      }
    });
  </script>
</body>

</html>

添加切换样式：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .v-enter,
    .v-leave-to {
      
      opacity: 0;
      transform: translateX(150px);
    }

    .v-enter-active,
    .v-leave-active {
      
      transition: all 0.5s ease;
    }
  </style>
</head>

<body>
  <div id="app">
    <a href="" @click.prevent="comName='login'">登录</a>
    <a href="" @click.prevent="comName='register'">注册</a>

    <!-- 通过 mode 属性,设置组件切换时候的 模式 -->
    <transition mode="out-in">
      <component :is="comName"></component>
    </transition>

  </div>

  <script>
    // 组件名称是 字符串
    Vue.component('login', {
      
      template: '登录组件
'
    })

    Vue.component('register', {
      
      template: '注册组件
'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      
      el: '#app',
      data: {
      
        comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
      },
      methods: {
      }
    });
  </script>
</body>

</html>

父组件向子组件传值

组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据

使用v-bind或简化指令，将数据传递到子组件中：


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
head>

<body>
  <div id="app">
    
    <com1 v-bind:parentmsg="msg">com1>
  div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       
        msg: '123 啊-父组件中的数据'
      },
      methods: {
       },

      components: {
       
        // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
        com1: {
       
          data() {
        // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
            // data 上的数据，都是可读可写的；
            return {
       
              title: '123',
              content: 'qqq'
            }
          },
          template: '这是子组件 --- {
       { parentmsg }}
',
          // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
          // props 中的数据，都是只读的，无法重新赋值
          props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
          directives: {
       },
          filters: {
       },
          components: {
       },
          methods: {
       
            change() {
       
              this.parentmsg = '被修改了'
            }
          }
        }
      }
    });
  script>
body>

html>

子组件向父组件传值

原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
head>

<body>
  <div id="app">
    
    <com2 @func="show">com2>
  div>

  <template id="tmpl">
    <div>
      <h1>这是 子组件h1>
      <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
    div>
  template>

  <script>

    // 定义了一个字面量类型的 组件模板对象
    var com2 = {
       
      template: '#tmpl', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构
      data() {
       
        return {
       
          sonmsg: {
        name: '小头儿子', age: 6 }
        }
      },
      methods: {
       
        myclick() {
       
          // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
          //  emit 英文原意： 是触发，调用、发射的意思
          // this.$emit('func123', 123, 456)
          this.$emit('func', this.sonmsg)
        }
      }
    }


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       
        datamsgFormSon: null
      },
      methods: {
       
        show(data) {
       
          // console.log('调用了父组件身上的 show 方法: --- ' + data)
          // console.log(data);
          this.datamsgFormSon = data
        }
      },

      components: {
       
        com2
        // com2: com2
      }
    });
  script>
body>

html>

评论列表案例

目标：主要练习父子组件之间传值


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
head>

<body>
  <div id="app">


    <cmt-box @func="loadComments">cmt-box>


    <ul class="list-group">
      <li class="list-group-item" v-for="item in list" :key="item.id">
        <span class="badge">评论人： {
     { item.user }}span>
        {
     { item.content }}
      li>
    ul>


  div>


  <template id="tmpl">
    <div>

      <div class="form-group">
        <label>评论人：label>
        <input type="text" class="form-control" v-model="user">
      div>

      <div class="form-group">
        <label>评论内容：label>
        <textarea class="form-control" v-model="content">textarea>
      div>

      <div class="form-group">
        <input type="button" value="发表评论" class="btn btn-primary" @click="postComment">
      div>

    div>
  template>

  <script>

    var commentBox = {
       
      data() {
       
        return {
       
          user: '',
          content: ''
        }
      },
      template: '#tmpl',
      methods: {
       
        postComment() {
        // 发表评论的方法
          // 分析：发表评论的业务逻辑
          // 1. 评论数据存到哪里去？？？   存放到了 localStorage 中  localStorage.setItem('cmts', '')
          // 2. 先组织出一个最新的评论数据对象
          // 3. 想办法，把 第二步中，得到的评论对象，保存到 localStorage 中：
          //  3.1 localStorage 只支持存放字符串数据， 要先调用 JSON.stringify 
          //  3.2 在保存 最新的 评论数据之前，要先从 localStorage 获取到之前的评论数据（string）， 转换为 一个  数组对象， 然后，把最新的评论， push 到这个数组
          //  3.3 如果获取到的 localStorage 中的 评论字符串，为空不存在， 则  可以 返回一个 '[]'  让 JSON.parse 去转换
          //  3.4  把 最新的  评论列表数组，再次调用 JSON.stringify 转为  数组字符串，然后调用 localStorage.setItem()

          var comment = {
        id: Date.now(), user: this.user, content: this.content }

          // 从 localStorage 中获取所有的评论
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          list.unshift(comment)
          // 重新保存最新的 评论数据
          localStorage.setItem('cmts', JSON.stringify(list))

          this.user = this.content = ''

          // this.loadComments() // ?????
          this.$emit('func')
        }
      }
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       
        list: [
          {
        id: Date.now(), user: '李白', content: '天生我材必有用' },
          {
        id: Date.now(), user: '江小白', content: '劝君更尽一杯酒' },
          {
        id: Date.now(), user: '小马', content: '我姓马， 风吹草低见牛羊的马' }
        ]
      },
      beforeCreate(){
        // 注意：这里不能调用 loadComments 方法，因为在执行这个钩子函数的时候，data 和 methods 都还没有被初始化好

      },
      created(){
       
        this.loadComments()
      },
      methods: {
       
        loadComments() {
        // 从本地的 localStorage 中，加载评论列表
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')
          this.list = list
        }
      },
      components: {
       
        'cmt-box': commentBox
      }
    });
  script>
body>

html>

使用 `this.$refs` 来获取元素和组件

  
    
      
      
      这是一个大大的H1


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
head>

<body>
  <div id="app">
    <input type="button" value="获取元素" @click="getElement" ref="mybtn">

    <h3 id="myh3" ref="myh3">哈哈哈， 今天天气太好了！！！h3>

    <hr>

    <login ref="mylogin">login>
  div>

  <script>

    var login = {
       
      template: '登录组件
',
      data() {
       
        return {
       
          msg: 'son msg'
        }
      },
      methods: {
       
        show() {
       
          console.log('调用了子组件的方法')
        }
      }
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       },
      methods: {
       
        getElement() {
       
          // console.log(document.getElementById('myh3').innerText)

          //  ref  是 英文单词 【reference】   值类型 和 引用类型  referenceError
          // console.log(this.$refs.myh3.innerText)

          // console.log(this.$refs.mylogin.msg)
          // this.$refs.mylogin.show()
        }
      },
      components: {
       
        login
      }
    });
  script>
body>

html>

什么是路由

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

在 vue 中使用 vue-router

导入 vue-router 组件类库：

使用 router-link 组件来导航


登录
注册

使用 router-view 组件来显示匹配到的组件

创建使用Vue.extend创建组件

    // 4.1 使用 Vue.extend 来创建登录组件
    var login = Vue.extend({
      template: '登录组件'
    });

    // 4.2 使用 Vue.extend 来创建注册组件
    var register = Vue.extend({
      template: '注册组件'
    });

创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则

// 5. 创建一个路由 router 实例，通过 routers 属性来定义路由匹配规则
    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    });

使用 router 属性来使用路由规则

// 6. 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      router: router // 使用 router 属性来使用路由规则
    });

设置路由高亮

设置路由切换动效


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
  
  <script src="./lib/vue-router-3.0.1.js">script>
  <style>
    .router-link-active,
    .myactive {
       
      color: red;
      font-weight: 800;
      font-style: italic;
      font-size: 80px;
      text-decoration: underline;
      background-color: green;
    }

    .v-enter,
    .v-leave-to {
       
      opacity: 0;
      transform: translateX(140px);
    }

    .v-enter-active,
    .v-leave-active {
       
      transition: all 0.5s ease;
    }
  style>
head>

<body>
  <div id="app">

    
    

    
    <router-link to="/login" tag="span">登录router-link>
    <router-link to="/register">注册router-link>


    
    
    <transition mode="out-in">
      <router-view>router-view>
    transition>

  div>

  <script>
    // 组件的模板对象
    var login = {
       
      template: '登录组件
'
    }

    var register = {
       
      template: '注册组件
'
    }


    /*  Vue.component('login', {
       template: '登录组件'
     }) */

    // 2. 创建一个路由对象， 当 导入 vue-router 包之后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
    // 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
    var routerObj = new VueRouter({
       
      // route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
      routes: [ // 路由匹配规则 
        // 每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性：
        //  属性1 是 path， 表示监听 哪个路由链接地址；
        //  属性2 是 component， 表示，如果 路由是前面匹配到的 path ，则展示 component 属性对应的那个组件
        // 注意： component 的属性值，必须是一个 组件的模板对象， 不能是 组件的引用名称；
        // { path: '/', component: login },
        {
        path: '/', redirect: '/login' }, // 这里的 redirect 和 Node 中的 redirect 完全是两码事
        {
        path: '/login', component: login },
        {
        path: '/register', component: register }
      ],
      linkActiveClass: 'myactive'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       },
      methods: {
       },
      router: routerObj // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
    });
  script>
body>

html>

在路由规则中定义参数

在规则中定义参数：

{ path: '/register/:id', component: register }

var register = Vue.extend({
      template: '注册组件 --- {
    {this.$route.params.id}}'
    });


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
  <script src="./lib/vue-router-3.0.1.js">script>
head>

<body>
  <div id="app">

    
    <router-link to="/login?id=10&name=zs">登录router-link>
    <router-link to="/register">注册router-link>

    <router-view>router-view>

  div>

  <script>

    var login = {
       
      template: '登录 --- {
       { $route.query.id }} --- {
       { $route.query.name }}
',
      data(){
       
        return {
       
          msg: '123'
        }
      },
      created(){
        // 组件的生命周期钩子函数
        // console.log(this.$route)
        // console.log(this.$route.query.id)
      }
    }

    var register = {
       
      template: '注册
'
    }

    var router = new VueRouter({
       
      routes: [
        {
        path: '/login', component: login },
        {
        path: '/register', component: register }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       },
      methods: {
       },
      // router: router
      router
    });
  script>
body>

html>

通过 this.$route.params来获取路由中的参数：


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
  <script src="./lib/vue-router-3.0.1.js">script>
head>

<body>
  <div id="app">

    
    <router-link to="/login/12/ls">登录router-link>
    <router-link to="/register">注册router-link>

    <router-view>router-view>

  div>

  <script>

    var login = {
       
      template: '登录 --- {
       { $route.params.id }} --- {
       { $route.params.name }}
',
      data(){
       
        return {
       
          msg: '123'
        }
      },
      created(){
        // 组件的生命周期钩子函数
        console.log(this.$route.params.id)
      }
    }

    var register = {
       
      template: '注册
'
    }

    var router = new VueRouter({
       
      routes: [
        {
        path: '/login/:id/:name', component: login },
        {
        path: '/register', component: register }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       },
      methods: {
       },
      // router: router
      router
    });
  script>
body>

html>

使用 `children` 属性实现路由嵌套

  
    Account


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
  <script src="./lib/vue-router-3.0.1.js">script>
head>

<body>
  <div id="app">

    <router-link to="/account">Accountrouter-link>

    <router-view>router-view>

  div>

  <template id="tmpl">
    <div>
      <h1>这是 Account 组件h1>

      <router-link to="/account/login">登录router-link>
      <router-link to="/account/register">注册router-link>

      <router-view>router-view>
    div>
  template>

  <script>

    // 组件的模板对象
    var account = {
       
      template: '#tmpl'
    }

    var login = {
       
      template: '登录
'
    }

    var register = {
       
      template: '注册
'
    }

    var router = new VueRouter({
       
      routes: [
        {
       
          path: '/account',
          component: account,
          // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
          children: [
            {
        path: 'login', component: login },
            {
        path: 'register', component: register }
          ]
        }
        // { path: '/account/login', component: login },
        // { path: '/account/register', component: register }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       },
      methods: {
       },
      router
    });
  script>
body>

html>

命名视图实现经典布局

标签代码结构：

JS代码：

CSS 样式：


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
  <script src="./lib/vue-router-3.0.1.js">script>
  <style>
    html,
    body {
       
      margin: 0;
      padding: 0;
    }

    .header {
       
      background-color: orange;
      height: 80px;
    }

    h1 {
       
      margin: 0;
      padding: 0;
      font-size: 16px;
    }

    .container {
       
      display: flex;
      height: 600px;
    }

    .left {
       
      background-color: lightgreen;
      flex: 2;
    }

    .main {
       
      background-color: lightpink;
      flex: 8;
    }
  style>
head>

<body>
  <div id="app">

    <router-view>router-view>
    <div class="container">
      <router-view name="left">router-view>
      <router-view name="main">router-view>
    div>

  div>

  <script>

    var header = {
       
      template: 'Header头部区域
'
    }

    var leftBox = {
       
      template: 'Left侧边栏区域
'
    }

    var mainBox = {
       
      template: 'mainBox主体区域
'
    }

    // 创建路由对象
    var router = new VueRouter({
       
      routes: [
        /* { path: '/', component: header },
        { path: '/left', component: leftBox },
        { path: '/main', component: mainBox } */


        {
       
          path: '/', components: {
       
            'default': header,
            'left': leftBox,
            'main': mainBox
          }
        }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       },
      methods: {
       },
      router
    });
  script>
body>

html>

`watch`属性的使用

考虑一个问题：想要实现 名 和 姓 两个文本框的内容改变，则全名的文本框中的值也跟着改变；（用以前的知识如何实现？？？）


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
head>

<body>
  <div id="app">

    
    
    

    <input type="text" v-model="firstname" @keyup="getFullname"> +
    <input type="text" v-model="lastname" @keyup="getFullname"> =
    <input type="text" v-model="fullname">

  div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       
        firstname: '',
        lastname: '',
        fullname: ''
      },
      methods: {
       
        getFullname() {
       
          this.fullname = this.firstname + '-' + this.lastname
        }
      }
    });
  script>
body>

html>


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
head>

<body>
  <div id="app">

    <input type="text" v-model="firstname"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">

  div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       
        firstname: '',
        lastname: '',
        fullname: ''
      },
      methods: {
       },
      watch: {
        // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
        'firstname': function (newVal, oldVal) {
       
          // console.log('监视到了 firstname 的变化')
          // this.fullname = this.firstname + '-' + this.lastname

          // console.log(newVal + ' --- ' + oldVal)

          this.fullname = newVal + '-' + this.lastname
        },
        'lastname': function (newVal) {
       
          this.fullname = this.firstname + '-' + newVal
        }
      }
    });
  script>
body>

html>

监听data中属性的改变：


     +
     =
    {
    {fullName}}

监听路由对象的改变：


    登录
    注册


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
  
  <script src="./lib/vue-router-3.0.1.js">script>
head>

<body>
  <div id="app">
    <router-link to="/login">登录router-link>
    <router-link to="/register">注册router-link>

    
    <router-view>router-view>

  div>

  <script>
    // 2. 创建子组件
    var login = {
       
      template: '这是登录子组件，这个组件是 奔波霸 开发的。
'
    }

    var register = {
       
      template: '这是注册子组件，这个组件是 霸波奔 开发的。
'
    }

    // 3. 创建一个路由对象
    var router = new VueRouter({
       
      routes: [ // 路由规则数组
        {
        path: '/', redirect: '/login' },
        {
        path: '/login', component: login },
        {
        path: '/register', component: register }
      ],
      linkActiveClass: 'myactive' // 和激活相关的类
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       },
      methods: {
       },
      // router: router
      router,
      watch: {
       
        //  this.$route.path
        '$route.path': function (newVal, oldVal) {
       
          // console.log(newVal + ' --- ' + oldVal)
          if (newVal === '/login') {
       
            console.log('欢迎进入登录页面')
          } else if (newVal === '/register') {
       
            console.log('欢迎进入注册页面')
          }
        }
      }
    });
  script>
body>

html>

`computed`计算属性的使用

默认只有getter的计算属性：


     +
     =
    {
    {fullName}}

定义有getter和setter的计算属性：


    
    
    
    

    {
    {fullName}}


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <script src="./lib/vue-2.4.0.js">script>
head>

<body>
  <div id="app">

    <input type="text" v-model="firstname"> +
    <input type="text" v-model="middlename"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">

    <p>{
     { fullname }}p>
    <p>{
     { fullname }}p>
    <p>{
     { fullname }}p>

  div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
       
      el: '#app',
      data: {
       
        firstname: '',
        lastname: '',
        middlename: ''
      },
      methods: {
       },
      computed: {
        // 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；

        // 注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它 当作 普通 属性去使用就好了；
        // 注意2： 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会 立即重新计算 这个 计算属性的值
        // 注意3： 计算属性的求值结果，会被缓存起来，方便下次直接使用； 如果 计算属性方法中，所以来的任何数据，都没有发生过变化，则，不会重新对 计算属性求值；
        'fullname': function () {
       
          console.log('ok')
          return this.firstname + '-' + this.middlename + '-' + this.lastname
        }
      }
    });
  script>
body>

html>

`watch`、`computed`和`methods`之间的对比

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；

`nrm`的安装使用

作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址；
什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；

运行npm i nrm -g全局安装nrm包；
使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
使用nrm use npm或nrm use taobao切换不同的镜像源地址；

注意： nrm 只是单纯的提供了几个常用的下载包的 URL地址，并能够让我们在这几个地址之间，很方便的进行切换，但是，我们每次装包的时候，使用的装包工具，都是 npm

Web前端学习笔记——VueJS之组件、路由

定义Vue组件

全局组件定义的三种方式

登录

这是使用 Vue.extend 创建的组件

这是使用 Vue.extend 创建的组件

注册

这是直接使用 Vue.component 创建出来的组件

组件中展示数据和响应事件

这是全局组件 --- { {msg}}

【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象

使用components属性定义局部子组件

使用flag标识符结合v-if和v-else切换组件

登录组件

注册组件

使用:is属性来切换不同的子组件,并添加切换动画

登录组件

注册组件

登录组件

注册组件

登录组件

注册组件

父组件向子组件传值

这是子组件 --- { { parentmsg }}

子组件向父组件传值

评论列表案例

使用 this.$refs 来获取元素和组件

这是一个大大的H1

登录组件

什么是路由

在 vue 中使用 vue-router

登录组件

注册组件

设置路由高亮

设置路由切换动效

登录组件

注册组件

登录组件

在路由规则中定义参数

注册组件 --- { {this.$route.params.id}}

登录 --- { { $route.query.id }} --- { { $route.query.name }}

注册

登录 --- { { $route.params.id }} --- { { $route.params.name }}

注册

使用 children 属性实现路由嵌套

登录

注册

命名视图实现经典布局

Header头部区域

Left侧边栏区域

mainBox主体区域

watch属性的使用

这是登录子组件，这个组件是 奔波霸 开发的。

这是注册子组件，这个组件是 霸波奔 开发的。

computed计算属性的使用

watch、computed和methods之间的对比

nrm的安装使用

相关文件

你可能感兴趣的:(Web前端,WEB前端)

使用`components`属性定义局部子组件

使用`flag`标识符结合`v-if`和`v-else`切换组件

使用`:is`属性来切换不同的子组件,并添加切换动画

使用 `this.$refs` 来获取元素和组件

使用 `children` 属性实现路由嵌套

`watch`属性的使用

这是登录子组件，这个组件是奔波霸开发的。

这是注册子组件，这个组件是霸波奔开发的。

`computed`计算属性的使用

`watch`、`computed`和`methods`之间的对比

`nrm`的安装使用