<div id="app5">
        <p v-for="item in list1">{{item}}</p>
        <p v-for="(item,i) in list1">索引值{{i}}+" "+{{item}}</p>
        //<!-- 遍历数组 -->
        <p v-for="(item,i) in list2">{{item.id}}+" "+{{item.name}}+" "+索引值{{i}}</p>
        //<!-- 遍历对象 -->
        <p v-for="(value,key,i) in list3">值：{{value}}+" "+键：{{key}}+" "+索引值{{i}}</p>
       // <!-- 迭代数组, 如果使用数字时从1开始-->
        <p v-for="count in 10">这是第{{count}}次</p>
        <h1>v-for使用注意事项<h1>
        id:<input type="text" v-model="id">
        name:<input type="text" v-model="name">
        <input type="button" value="添加" @click="add">
        //<!--v-for key只能使用number或string，key使用时要用v-bind  -->
        //<!-- 在组件中使用v-for，或特殊情况，使用时有问题，必须指定唯一的 字符串、数字类型的key -->
        <p v-for="(item,i) in list2" v-bind:key="item.id">
        <input type="checkbox" name="" id="">{{item.id}}+" "+{{item.name}}</p>
</div>

new Vue({
        el: '#app5',
        data: {
            id: '',
            name: '',
            list1: [1, 2, 3, 4, 5],
            list2: [
                { id: 1, name: 'lisi1' },
                { id: 2, name: 'lisi2' },
                { id: 3, name: 'lisi3' },
                { id: 4, name: 'lisi4' }
            ],
            list3: {
                id: 1,
                name: 'haha',
                age: 12,
                adddress: '中国',
            }
        },
        methods: {
            add() {
                this.list2.push({ id: this.id, name: this.name })
            }
        }
    });

<div id="app6">
        //<!-- <input type="button" value="toggle" @click="toggle"> -->
        //<!-- 等于下面的 -->
        <input type="button" value="toggle" @click="flag=!flag">
        <h3 v-if="flag">这是v-if控制的元素</h3>
        <h3 v-show="flag">这是v-show控制的元素</h3>
        //<!-- v-if每一次都会重新删除和创建元素 ，有较高的切换性能消耗
        如果元素频繁的切换，最好不要使用-->
        //<!-- v-show每一次都不会重新删除和创建元素 ，只是切换了元素的dispaly：none样式，有较高的初始渲染消耗
        如果元素可能永远也不会显示出来被用户看，推荐使用-->
</div>

new Vue({
        el: '#app6',
        data: {
            flag: true,
        },
        methods: {
            toggle() {
                this.flag = !this.flag;
            }
        }
    });

<div id="day1">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h1 class="panel-title">添加品牌</h1>
            </div>
            <div class="panel-body form-inline">
                <label>
                    id:<input type="text" name="" id="" class="form-control" v-model="id">
                </label>
                <label>
                    //<!-- @keyup="add"是键盘抬起触发add事件 .enter键盘抬起按enter键就可以触发-->
                    name:<input type="text" name="" id="" class="form-control" v-model="name" @keyup.enter="add">
                </label>
                <label>
                    //<!-- v-color=('blue')是传递的值 -->
                    搜索关键字:<input type="text" name="" id="" class="form-control" v-model="keywords" v-focus
                        v-color=('blue')>
                </label>
                //<!-- 在vue中使用事件绑定，如果加了小括号就可以传参数add() -->
                <input type="button" value="添加" class="btn btn-primary" @click="add">
            </div>
        </div>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>time</th>
                    <th>option</th>
                </tr>
            </thead>
            <tbody>
//<!-- 自定义search()方法，通过传参的形式，传递给search方法 在这个方法中通过for循环，把符合条件的数据保存到一个新数组中返回-->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td v-text="item.name"></td>
                    <td>{{item.time|dateFormat('')}}</td>
                    //<!-- 根据id删除 -->
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>

new Vue({
        el: '#day1',
        data: {
            id: '',
            name: '',
            keywords: '',
            list: [
                { id: 1, name: '李四1', time: new Date() },
                { id: 2, name: '李四2', time: new Date() },
                { id: 3, name: '李四3', time: new Date() },
                { id: 4, name: '李四4', time: new Date() },
            ]
        },
        methods: {
            add() {//添加方法
                this.list.push({ id: this.id, name: this.name, time: new Date() })
                // 添加了要清空input的数据
                this.id = this.name = "";
            },
            del(id) {//删除
                // //根据id删除
                // this.list.some((item, i) => {
                //     if (this.id = id) {
                //         this.list.splice(i, 1);// 根据id查找索引，找到索引，直接调用数组splce方法删除
                //         // 终止后续循环
                //         return true;
                //     }
                // })
                // 删除方法二
                var index = this.list.findIndex(item => {
                    if (item.id == id) {
                        // 终止后续循环
                        return true;
                    }
                })
                this.list.splice(index, 1);
                console.log(index);
            },
            search(keywords) {//根据关键字，进行数据搜索
                // var newList = [];
                // this.list.forEach(item => {
                //     if (item.name.indexOf(keywords) != -1) {
                //         newList.push(item);
                //     }
                // })
                // return newList;

                // 方法二
                // forEach,some,filter,dindIndex都是素组的新方法
                return this.list.filter(item => {
                    if (item.name.includes(keywords)) {
                        return item;
                    }
                });
            }
        },
    });

<h1>定义全局过滤器</h1>
    <div class="filter">
        //<!-- sgFormat('青青+1')括号里面是传递参数，可传递多个 -->
        <p>{{msg|msgFormat('青青+1')}}</p>
    </div>
    　　<h1>定义私有过滤器</h1>
    　　<div id="day3">
    　　<h1 v-color="'green'">{{time|dateFormat}}</h1>
　　</div>
</div>

  // 过滤器的使用
    // 1、只能应用于v-bind和mustache（插值表达式{{}}）
    // 2、格式：{{name|nameope}}
    // 3、定义全局过滤器 Vue.filter('过滤器名称',function (){})
    Vue.filter('msgFormat', function (msg, arg) {
        return msg.replace(/清清/g, arg)
    })
    new Vue({
        el: '.filter',
        data: {
            msg: '我是我是彭清清我是我是彭清清'
        },
        methods: {}
    })
    // 定义私有过滤器
    new Vue({
        el: '#day3',
        data: {
            time: new Date(),
        },
        methods: {
        },
        // 全局指令带s，私有指令不带s
        filters: {//定义私有过滤器，有两个条件：过滤器名称和处理函数,调用的时候采用就近原则，如果私有过滤器和全局过滤器的名称一致，优先调用私有
            dateFormat: function (dateStr, timePattern = "") {
                var time = new Date(dateStr);
                var year = time.getFullYear();
                // month 从0开始
                var month = time.getMonth() + 1;
                var day = time.getDate();
                if (timePattern.toLowerCase() == 'yyyy-mm-dd') {
                    return `${year}-${month}-${day}`;
                } else {
                    var hour = time.getHours();
                    var minutes = time.getMinutes();
                    var seconds = time.getSeconds();
                    return `${year}-${month}-${day}  ${hour}:${minutes}:${seconds}----`;
                }
            }
        },
    })

 Vue.config.keyCodes.f2 = 113;//自定义按键修饰符
    Vue.directive('focus', {// 自定义全局指令获取焦点  注意：参数1：指令名称 ：定义的时候不需要加v-前缀，调用的时候必须加v-
        // 参数2：是一个对象，
        bind: function (el) {//每当指令绑定到元素上的时候，会执行这个函数
            // 在每一个函数中，第一个参数永远是el，表示被绑定指令的元素，这个元素是原始的js对象
        },
        inserted: function (el) {//插入到DOM的时候，执行这个函数
            el.focus()
        },
        updated: function () {//每当vNode更新的时候执行
        }
    })
    Vue.directive('color', {//自定义全局设置字体颜色的指令}
        bind: function (el, binding) {
            //el.style.color = 'red'//样式只要通过指令不绑定给了元素，不管有没有插入到页面中，这个元素肯定有了内联样式
            el.style.color = binding.value;
        }
        // 和样式相关的在bind设置就可以，和行为相关的在inserted设置，防止js行为不生效
    })
    // 定义全局格式化时间
    Vue.filter('dateFormat', function (dateStr, timePattern = "") {
        var time = new Date(dateStr);
        var year = time.getFullYear();
        // month 从0开始
        var month = time.getMonth() + 1;
        var day = time.getDate();
        // 如果传递timePattern参数不等于yyyy-mm-dd，就把他转化为小写，如果是yyyy-mm-dd格式的
        // 说明显示的是年月日否则就是完整的时间
        if (timePattern.toLowerCase() == 'yyyy-mm-dd') {
            return `${year}-${month}-${day}`;
        } else {
            var hour = time.getHours();
            var minutes = time.getMinutes();
            var seconds = time.getSeconds();
            return `${year}-${month}-${day}  ${hour}:${minutes}:${seconds}`;
        }
    })

<div id="day3">
   <h1 v-font-Style="'italic'" v-font-Size="30">{{time|dateFormat}}</h1>
</div>

new Vue({
        el: '#day3',
        data: {
            time: new Date(),
        },
        methods: {
        },
        // 全局指令带s，私有指令不带s 
        filters: {//定义私有时间过滤器，有两个条件：过滤器名称和处理函数,调用的时候采用就近原则，如果私有过滤器和全局过滤器的名称一致，优先调用私有
            dateFormat: function (dateStr, timePattern = "") {
                var time = new Date(dateStr);
                var year = time.getFullYear();
                // month 从0开始
                var month = time.getMonth() + 1;
                var day = time.getDate();


                if (timePattern.toLowerCase() == 'yyyy-mm-dd') {
                    return `${year}-${month}-${day}`;
                } else {
                    var hour = time.getHours();
                    var minutes = time.getMinutes();
                    var seconds = time.getSeconds();
                    return `${year}-${month}-${day}  ${hour}:${minutes}:${seconds}----`;
                }
            }
        },
        directives: {//定义私有指令
            'fontStyle': {
                bind: function (el, binding) {
                    el.style.fontStyle = binding.value;
                }
            },
            'fontSize': function (el, binding) {//这个函数等同于把代码写到了bind和update中
                el.style.fontSize = parseInt(binding.value) + 'px';
            }
        }
    });

<div id="app">
        <input type="button" value="toggle" @click="show=!show">
        //<!-- 使用transition把需要动画的元素包裹起来 这是vue官方提供的-->
        <transition name="my">
           // <!--使用name属性来定义前缀来自定义动画，使用的时候.my-enter-->
            //<!-- 点击按钮让小圆展示出来，v-show 和v-if都行-->
            <h3 class="circle" v-show="show">这是一个动画</h3>
        </transition>
</div>

　　　　//* 自定义两组样式，来控制transition内部的元素实现动画 */
        .my-enter,
       //*这是一个时间点，是进入之前元素的起始状态，此时还没有开始进入*/
        v-leave-to {
           //*这是一个时间点，是离开之后，离开的终止状态，此时动画已结束*/
            opacity: 0;
            transform: translateX(150px);
        }
        .my-enter-active,
       / /*入场动画的时间段*/
        .my-leave-active {
        / /*离场动画的时间段*/
            transition: all 1s ease;
        }

new Vue({
        el: '#app',
        data: {
            show: false
        },
        methods: {},
    });

<div id="app">
        <input type="button" value="toggle" @click="show=!show">
        //<!-- :duration="400"统一设置动画的出场，和入场动画时长 -->
        //<!-- :duration="{enter:200,leave:400} 分别设置动画的出场，和入场动画时长-->
        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="400">
            <h3 class="circle" v-show="show">这是一个动画</h3>
        </transition>
        //<!-- 把animated放在元素上 -->
        <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200,leave:400}">
            <h3 class="circle" v-show="show" class="animated">这是一个动画</h3>
        </transition>
    </div>

<div id="app">
        <input type="button" value="toggle" @click="show=!show">
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <h3 class="circle" v-show="show"></h3>
        </transition>
</div>

 .circle {
             20px;
            height: 20px;
            border-radius: 50%;
            background-color: olive;
        }

 new Vue({
        el: '#app',
        data: {
            show: false
        },
        methods: {
            //动画钩子函数的第一个参数是el，不是要执行动画的DOM元素，是原生的jsDOM对象，可以认为是通过document.getElementById获取到的
            beforeEnter(el) {//这个函数是表示，动画入场前，此时动画未开始，在这里设置动画之前的起始样式
                el.style.transform = "translate(0,0)"//设置小球开始前的动画
            },
            enter(el,done) {//这个函数是表示，动画开始之后的样式，可以设置小球完成后的结束状态
                el.offsetWidth;//这句话没有实际应用，强制动画刷新，不设置动画就不会出来，有height，left，top
                el.style.transform = "translate(150px,150px)";
                el.style.transition = "all 1s ease";
                done();//这个是afterEnter函数的引用，加上会停留一会在消失，不然就会立即消失
            },
            afterEnter(el) {//这个函数是表示，动画完成之后
                this.show=!this.show;
            }
        },
    });

 <div id="app">
        <div>
            <label>Id:<input type="text" v-model="id"></label>
            <label>Name:<input type="text" v-model="name"></label>
            <input type="button" value="添加" @click="add">
        </div>
        //<!-- <ul> -->
       // <!-- 实现列表过渡的时候，如果过渡的元素是v-for循环渲染的，不能使用transition包裹，使用transition-group -->
        //<!-- 如果用v-for循环创建动画，必须为每一个元素设置:key属性 -->
        <transition-group appear tag="ul">
            //<!--给transition-group添加appear属性，给页面刚展示出来入场效果-->
            <li v-for="item in list" :key="item.id" @click="del">
                {{item.id}}---{{item.name}}
            </li>
        </transition-group>
        //<!--  由于transition-group默认会渲染为span元素，span里面包含li是不符合w3c规范，所以要设置tag属性为ul-->
        //<!-- </ul> -->
    </div>

 li {
            list-style: none;
            border: orange 1px solid;
            margin-right: 5px;
            line-height: 30px;
            font-size: 12px;
             100%;
        }

        //* 进入动画 */
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(15px);
        }

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

        li:hover {
            background-color: olivedrab;
            transition: all 0.4s ease;
        }

       //* 离开动画 .v-move/v-leave和.v-leave配合使用*/
        .v-move {
            /*v-leave也行*/
            transition: all 1s ease;
        }

        .v-leave-active {
            position: absolute;
        }

new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            list: [
                { id: 1, name: '李四1' },
                { id: 2, name: '李四2' },
                { id: 3, name: '李四3' },
                { id: 4, name: '李四4' },
            ]
        },
        methods: {
            add() {
                console.log("a");
                this.list.push({ id: this.id, name: this.name })
            },
            del(i) {//删除
                this.list.splice(i, 1);
            }
        },
    });

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

// 1、使用Vue.extend创建的全局组件
    var com1 =Vue.extend({
        template:'<h3>这是使用Vue.extend创建的全局组件</h3>'//通过template属性指定组件要展示的HTML结构
    });
    // 2、Vue.component（'组件名称'，创建出来的组件模块对象）
    Vue.component('myCom1',com1)//注意：组件名称是驼峰命名法，引用的时候两个单词之间要使用—连接
    // 创建vue实例
    new Vue({
        el:'#app',
        data:{}
    });

// Vue.component第一个参数：组件名称，将来引入的时候就使用标签的形式引入，第二个参数：Vue.extend创建的组件，其中template属性就是组件要展示的HTML内容
    Vue.component('myCom1',Vue.extend({
        template:'<h3>这是使用Vue.extend创建的全局组件</h3>'
    }));
    // 上面的方式还可以简化，使用对象字面量的形式创建
    Vue.component('myCom1',{
        // 注意：无论使用哪种方式创建组件，属性template指定的模板内容有且只有唯一一个根元素，要用div包裹起来
        template:'<div><h3>这是使用Vue.extend创建的全局组件<span>123</span></h3></div>'
    });
    // 创建vue实例
    new Vue({
        el:'#app',
        data:{}
    });

<body>
    <div id="app"> 
        <my-Com1></my-Com1>
    </div>
    //<!-- 在被控制的#app外面，使用template元素，定义组件HTML结构 -->
    <template id="com1">
        <div>
            <h3>这是通过template元素，在外部定义的组件结构，这个方式有代码提示</h3>
        </div>
    </template>
</body>
</html>
<script>
    Vue.component('myCom1', {
        template: '#com1'
    });
    // 创建vue实例
    new Vue({
        el: '#app',
        data: {}
    });
</script>

<div id="app"> 
     <login></login>
</div>
// 创建vue实例
    new Vue({
        el: '#app',
        data: {},
        methods: {},
        components:{
            login:{
                template:'<h3>这是通过template元素</h3>'
            }
        }
    });

Vue.component('myCom1', {
        template: '<h3>这是全局组件--{{msg}}</h3>',
        data:function (){
            return {
                msg:'这是组件中定义的data数据'
            };
        }
    });

 <div id="app">
        <my-Com1></my-Com1>
        <my-Com1></my-Com1>
        <my-Com1></my-Com1>
    </div>
    <template id="day">
        <div>
            <input type="button" value="+1" @click="add">
            <h3>{{count}}</h3>
        </div>
    </template>

// var dataObject={count: 0};
    Vue.component('myCom1', {
        template: '#day',
        data: function () {
            return {
                count: 0
                // dataObject//如果把对象定义在外面，当调用多次组件的时候，点击一个按钮其他按钮会受到影响
            };
        },
        methods: {
            add() {
                this.count++;
            }
        },
    });
    // 创建vue实例
    new Vue({
        el: '#app',
        data: {},
        methods: {},
    });

<div id="app">
        <a href="" @click.prevent="show=true">登入</a>
        <a href=""  @click.prevent="show=false">注册</a>
        <login v-if="show"></login>
        <register v-else="show"></register>
</div>

Vue.component('login', {
        template: '<h3>登入组件</h3>',
    });
    Vue.component('register', {
        template: '<h3>注册组件</h3>',
    });
    // 创建vue实例
    new Vue({
        el: '#app',
        data: {
            show:true
        },
        methods: {},
    });

 <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>
      // <!-- 属性绑定会把后面的当作表达式解析 -->
 </div>

// 组件名称是字符串，:is属性绑定会把后面的当作表达式解析，并不是真正的字符串，所以'login'要用单引号包起来
    Vue.component('login', {
        template: '<h3>登入组件</h3>',
    });
    Vue.component('register', {
        template: '<h3>注册组件</h3>',
    });
    // 创建vue实例
    new Vue({
        el: '#app',
        data: {
            comName:'login'//这个comName是 :is属性绑定的组件名称，默认展示login
        },
        methods: {},
    });

<div id="app">
        <a href="" @click.prevent="comName='login'">登入</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        //<!-- mode属性：设置组件切换的模式，out-in是上一个消失了才消失下一个 -->
        <transition mode="out-in">
            <component :is="comName"></component>
        </transition>
</div>

/* 进入动画 */
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(15px);
        }
//出场动画
        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
        }

// 子组件，默认无法访问到副总监的data上的数据和methods中的方法，副组件可以在引用纸组件的时候，通过绑定v-bind的形式，
    // 把需要传递给子组件的数据以属性绑定的形式传递到子组件的内部，供子组件使用
    Vue.component('com1', Vue.extend({
        template:'<h1>hekk</h1>'
    }))
    new Vue({
        el: '#app',
        // data上的数据都是可读可写的
        data: {//注意：子组件的data数据，不是通过父组件传递过来的，而是子组件自身有的，如：子组件通过ajax，请求回来的数据，都可以在data上定义
            msg:'这是父组件中的数据'
        },
        methods: {},
        components:{
            com1:{
                template:'<h1 >这是子组件---{{parentmsg}}</h1>',
                // 注意：组件中的所有props中的数据都是通过父组件传递给子组件的
                // props中的数据是只读的，无法重新复制被修改
                props:['parentmsg']//把父组件传递过来的parentmsg属性，先在props数组中定义一下，才能使用
            }
        }
    });

var com1 = {
        template: '#com',
        data() {
            return {
                sonmsg: { name: "李四", age: 13 }
            }
        },
        methods: {
            // 子组件的点击事件
            myclick() {
                // $emit 英文意思是触发，发射
                this.$emit('func', this.sonmsg)//调用父组件的方法并传递参数,this.sonmsg传递给父组件
            },
        },
    }
    new Vue({
        el: '#app',
        data: {
            datamsg:null
        },
        methods: {
            show(data) {
                console.log("调用了父组件的方法");
                this.datamsg=data;
            }
        },
        components: {
            com1
        }
    });

<!-- 使用ref获取dom元素和组件引用 -->
    <div id="app">
        <input type="button" value="获取元素" @click="getElement">
        <h3 id="myh3" ref="myh3">haha</h3>
        <login ref="loginref"></login>
    </div>
</body>
 //上面是HTML
<script>
    var login = {
        template: '<h3>login</h3>',
        data() {
            return {
                msg: 'sonmsg'
            }
        },
        methods: {
            show() {
                console.log('调用了子组件的方法')
            }
        },
    }
    new Vue({
        el: '#app',
        data: {},
        methods: {
            getElement() {
                // console.log(document.getElementById('myh3').innerHTML);
                // console.log(this.$refs.myh3.innerText);//ref是reference的缩写
                console.log(this.$refs.loginref.msg);//用ref输出组件的信息
                this.$refs.loginref.show();//调用组的方法
            }
        },
        components: {
            login
        }
    });

 <div id="app">
        //<!-- <a href="#/login">登入</a> -->
        //<!-- <a href="#/register">注册</a> -->
        //<!-- router-link默认渲染的是a标签，用router-link就不用加# -->
        <router-link to="/login" tag="span">登入</router-link>
        //<!--tag="span"渲染为span标签-->
        <router-link to="/register">注册</router-link>
        
        //<!-- router-view是vue-router提供的元素，用来当占位符，路由规则匹配到的组件展示在这里 -->
        //<!--  给路由加动画 -->
        <transition mode="out-in">
            <router-view></router-view>
        </transition>
</div>

 //* 设置当前展示的样式，路由高亮（路由默认的，自带的） */
        .router-link-active {
            color: olive;
            font-weight: 500;
            text-decoration: underline;
            font-size: 30px;
        }

        //* 自定义的路由高亮 */
        .myactive {
            color: olive;
            font-weight: 500;
            text-decoration: underline;
            font-size: 30px;
        }
        //* 路由动画 */
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: rotateX(140px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 1s ease;
        }

var login = {
        template: '<h1>login</h1>'
    }
    var register = {
        template: '<h1>register</h1>'
    }
    // 创建一个路由对象，当导入vue-router包之后，在windows全局对象中就有了一个路由的构造函数叫做VueRouter
    var routerObj = new VueRouter({//new 一个路由对象，可以为一个构造函数，传递一个配置对象
        // 
        routes: [//这个配置对象的routes表示：路由匹配规则,
            // 每个匹配规则有两个属性，一：path，表示监听哪个路由链接地址
            // 二：component表示，如果路由是前面匹配到的path，则表示component属性对应的哪个组件
            // 注意：component属性值必须是一个组件对象，不能是组件的引用名称
            { path: '/', redirect: '/login' },//手动修改hash值
            { path: '/login', component: login },
            { path: '/register', component: register },
        ],
        linkActiveClass: 'myactive'//自定义自己的高亮样式
    })
    new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: routerObj//将路由规则对象注册到我们的vm实例上，然后展示对应的组件
    });

<div id="app">
        //<!-- 如果在路由中使用查询字符串，给路由传递参数则不需要修改路由规则的path属性，就是 { path: '/', redirect: '/login' }, -->
        //<!-- to="/login?id=10&&name=李思"，传递参数，可以传递多个 -->
        <router-link to="/login?id=10&name=李思">登入</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
</div>

var login = {
        template: '<h1>login---{{$route.query.id}}---{{$route.query.name}}</h1>',//this可以省略
        data(){
            return{
                msg:'124'
            }
        },
        created() {// 组件生命周期钩子函数
            console.log(this.$route);//$route和$ref差不多
            console.log(this.$route.query.id);//输出id里面的值。
        },
    }
    var register = {
        template: '<h1>register</h1>'
    }
    var routerObj = new VueRouter({
        routes: [
            { path: '/login', component: login },
            { path: '/register', component: register },
        ],
    });
    new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: routerObj,//属性名和属性值一样可以简化,就是new出来的router的名称和router一样只用写一个，现在这个router: routerObj不一样
    });

<div id="app">
        //<!-- 使用params传递参数 -->
        <router-link to="/login/10/lisi">登入</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
</div>

<script>
    var login = {
        template: '<h1>login---{{$route.params.id}}--{{$route.params.name}}</h1>',//this可以省略
        data(){
            return{
                msg:'124'
            }
        },
        created() {// 组件生命周期钩子函数
            console.log(this.$route.params.id);
        },
    }
    var register = {
        template: '<h1>register</h1>'
    }
    var routerObj = new VueRouter({
        routes: [
            { path: '/login/:id/:name', component: login },//:id解析id,:name解析name，通过URL地址，可以有多个参数
            { path: '/register', component: register },
        ],
    });
    new Vue({
        el: '#app',
        data: {},
        methods: {},
        router: routerObj,//属性名和属性值一样可以简化,就是new出来的router的名称和router一样只用写一个，现在这个router: routerObj不一样
    });

<body>
    <div id="app">
        <router-link to="/account">account</router-link>
        <router-view></router-view>
    </div>
    <template id="com">
        <div>
            <h1>这是Account组件</h1>
            <router-link to="/account/login">登入</router-link>
            <router-link to="/account/register">注册</router-link>
            <router-view></router-view>
        </div>
    </template>
</body>

<script>
    var account = {
        template: '#com',
    }
    var login = {
        template: '<h3>登入</h3>',
    }
    var register = {
        template: '<h3>注册</h3>',
    }
    var router = new VueRouter({
        routes: [
            { path: '/account',
             component: account ,
             children:[
                 {path: 'login', component: login },//使用children属性前面，不带/，否则永远以跟路劲请求，不方便用户理解URL地址
                 {path: 'register', component: register },
             ]
            },
            // { path: '/account/login', component: login },
            // { path: '/account/register', component: register },
        ]
    })
    new Vue({
        el: '#app',
        router//属性名和属性值一样可以简化,就是new出来的router的名称和router一样只用写一个
    });