vue笔记4

第三次作业

组件有哪几种定义方式

第一种: 使用 Vue.extend 配合 Vue.component 方法

第二种: 直接使用 Vue.component 方法（这种方式比较常用）

第三种: 将Vue.component 方法的template函数放于外部定义（用<template></template>）

组件和template的区别是什么

组件除了包含了模板，还指定了在html中替换的对象，还可以拥有自己的data数据等
template即为模板，是一段html结构，可以用作模板直接引入到页面元素中

为什么组件的data必须是一个function

data返回值是一个对象，当遇到多个同名元素时候，如果data不是function，这些元素会共享同一个对象，如：点击+1按钮，所有文本都会加一；当data是function时，每有一个元素便会生成一个对象，避免了上面那个问题，按钮会和其对应的文本一一绑定。

创建一个vm对象，带有三个子组件，在其视图中添加一个按钮，要求实现点击按钮三组件轮流切换效果

<div id="app">
    <button type="button" @click="turn">turn</button>
    <component :is="flag"></component>
</div>

<script>
    Vue.component("aaa",{
        template: "<h1>aaa</h1>"
    })
    Vue.component("bbb",{
        template: "<h1>bbb</h1>"
    })
    Vue.component("ccc",{
        template: "<h1>ccc</h1>"
    })
    var vm = new Vue({
        el: "#app",
        data: {
            flag: "aaa"
        },
        methods: {
            turn(){
                if (this.flag == "aaa"){
                    this.flag ="bbb";
                }
                else if (this.flag == "bbb") {
                    this.flag ="ccc"
                }
                else{
                    this.flag ="aaa"
                }
            }
        }
    });
</script>

父组件向子组件传值

父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用

    <com1 v-bind:parentmsg="msg"></com1>

      data: { 
        msg: '父组件中的数据'
      },

      components: {
        com1: {
          data() { 
            return {
              title: '123',
              content: 'qqq'
            }
          },
          template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',
          props: ['parentmsg'],
        }
      }

data与props区别

子组件中的 data 数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上
data 上的数据，都是可读可写的

组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
props 中的数据，都是只读的，无法重新赋值

子组件通过事件调用向父组件传值

父组件向子组件传递方法，使用的是事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式来调用 传递进去的这个方法了

    <com2 @func="show"></com2>

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

    var com2 = {
      template: '#tmpl', 
      data() {
        return {
          sonmsg: { name: '小头儿子', age: 6 }
        }
      },
      methods: {
        myclick() {
          this.$emit('func', this.sonmsg)
        }
      }
    }

当点击子组件的按钮的时候，拿到父组件传递过来的 func 方法，并调用emit方法

    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        show(data) {
          this.datamsgFormSon = data
        }
      },

      components: {
        com2
      }
    });

使用ref获取DOM元素和组件引用

    <input type="button" value="获取元素" @click="getElement" ref="mybtn">
    <h3 id="myh3" ref="myh3">哈哈哈， 今天天气太好了！！！</h3>
    <hr>
    <login ref="mylogin"></login>

      console.log(this.$refs.myh3.innerText)
      console.log(this.$refs.mylogin.msg)
      this.$refs.mylogin.show()

前端路由和后端路由

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

路由的基本使用方式

    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <router-view></router-view>

    var login = {
        template: "<h1>登录组件</h1>"
    }
    var register = {
        template: "<h1>注册组件</h1>"
    }

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

    var vm = new Vue({
        el: "#app",
        data:{},
        methods:{},
        router:routerObj
    });

router-link

router-link 默认渲染为一个a 标签
tag可以更改默认的渲染方式

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

路由redirect重定向(加载时显示)

{ path: '/', redirect: '/login' }

路由显示设置高亮

第一种，直接设置router-link-active (class）
第二种，

可通过下方的代码并同时设置myactive属性即可设置点击时的高亮效果

    var routerObj = new VueRouter({
      routes: [ // 路由匹配规则 
        { path: '/login', component: login },
        { path: '/register', component: register }
      ],
      linkActiveClass: 'myactive'
    })

路由切换启动动画

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

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

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

路由规则传参1（query方式）

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

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

路由传参2（params方式 ：id）

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

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

获取参数的方式：

console.log(this.$route.params.id)

子路由

可用children来设置子路由

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

  <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>

  <div id="app">

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

    <router-view></router-view>

  </div>