Vue视频课程学习（一）

 

JS特点：解释型语言，单线程（执行方式：轮转时间片）

一，浏览器组成：

    外壳部分

    内核部分：渲染引擎​​，JS引擎，其他模块

二，几大主流浏览器及其内核

    IE：三叉戟

    铬：WebKit的/闪烁

    火狐：壁虎

    歌剧：眨眼

    Safari浏览器浏览器：WebKit的

三，引入JS

    三种引入方式

    引入时，类型为TPL时，不能运行，用来当作库存用

四，JS基本语法

    赋值顺序，自右向左，计算顺序，自左向右

    NaN == NaN是特例，为假

    &&（短路语句）遇假则输出，遇真继续

    || 遇真输出，遇假继续

    JS能计算的位数：小数点前16位，小数点后16位

    例：打印斐波拉契数列

var first = 1,
    second = 1,
    third;
for(var i = 0; i < n-2; i ++) {
    third = first + second;
    first = second;
    second = third;
}
document.write(third);

    例：

//打印100以内的质数
var    count = 0;
for(var i = 1; i < 100; i ++) {
    for (var j = 1; j <= i; j++) {
        if(i % j == 0) {
            count ++;
        }
    }
    if(count == 2) {
        document.write(i);
    }
    count = 0;
}

//or，可以减少循环次数
var    count = 0;
for(var i = 2; i < 100; i ++) {
    for (var j = 1; j <= Math.sqrt(i); j++) {
        if(i % j == 0) {
            count ++;
        }
    }
    if(count == 1) {
        document.write(i);
    }
    count = 0;
}

 

五，类型转换

    显式类型转换：数字（混合），parseInt函数函数（字符串，基数），parseFloat（串）的的toString（基数），字符串（混合），布尔（）

    应用：例，2进制转化为10进制再转化为16进制

    var num = 10000; var test = parseInt（num，2）; 的的console.log（test.toString（16））;

    隐式类型转换：isNaN（），++ / - +/-（一元正负），+， - * /％，&& || ！，<> <=> =，==！= 

    不发生类型转换：===，==

八，原型和原型链

    调用/应用：改变这种指向，区别是传参列表不同，调用需要把实参按照形参的个数传进去;报考需要传一个参数

九，闭包

    当函数被保存到外部时，将会生成闭包，闭包会导致原有作用链不释放，造成内存泄露

    立即执行函数：此类函数没有声明，在一次执行过后即释放，适合初始化工作 

   （函数（）{}（））（W3C建议使用）或者（函数（）{}）（）

十，立即执行函数

    两种定义方式，建议前一种（function（）{}（））; （功能（）{}）（）; 只有表达式才能被执行，函数表达式不能执行，（）是隐式转换类型，将函数声明转换为了函数表达式

十一，对象

        对象创建方法

1，var obj = {}   plainObject    对象字面量/对象直接量
2，构造函数
    1）系统自带的构造函数 new Object() Array() Nummber()
        var obj = new Object();
    2)自定义(大驼峰式命名规则，和函数的小驼峰式相区别)
        function Person() {
        }
        var person1 = new Person();
        

        属性的增并改查，删（删对象。属性）

        构造函数内部原理

1. 在函数体最前面隐式的加上 this={}
2. 执行 this.xxx=xxx
3. 隐式的返回this

 十二、包装类

    

---

分割线：vue.js

---

  一，MVC和MVVM

二，Vue的部分指令

    定义一个基本的Vue的代码结构

    V-cloak能解决插值表达式闪烁的问题 

    v-text =“msg”和{{}}插值表达式的区别：v-text没有闪烁问题; v-text会覆盖元素中原本的内容，插值表达式只会替换自己的这个占位符，不会把整个内容清空

    v-html，同v-text，但能够解析标签

    v-bind，提供用于绑定属性的指令，可以简写为冒号：要解析的属性，v-bind中可以写合法的js表达式

    v-on，绑定事件缩写为@

    Vue的实例里面的方法，属性定义当前的Vue实例所有可用的方法

    事件修饰符：.stop阻止事件冒泡; .prevent阻止默认行为; .capture捕获触发事件机制; .self只有点击当前元素才会触发事件处理函数; .once事件只触发一次

    .stop和.self的区别：.self只会阻止自己身上的冒泡行为的触发，并不会真正阻止冒泡行为

    v-model：只有这一个指令可以实现双向数据绑定，注，只能运用在表单元素中

    第一种使用方式，直接传递一个数组，类需要使用v-bind做数据绑定;在数组中使用三元表达式，：class =“[flag？'active'：''] “;在数组中使用对象来代替三元表达式，提高代码可读性：类=”[{ '活性'：标志}]“;直接使用对象

    使用内联样式

     V型的和关键属性

     注：v-for循环的时候，key属性只能使用number或者tring类型；key在使用时，必须使用v-bind属性绑定的形式，指定key的值；在组件中，使用v-for循环的时候或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型的:key值 ：如< v-for = "item in list" :key = "item.id"> </p>

<p v-for = "(item, i) in list">索引值：{{i}} --- 每一项：{{item}} </p>

var vm = new Vue({
    data: {
        list: [1, 2, 3, 4, 5, 6]
    }
})

 

<p v-for = "user in list">{{user.id}}---{{user.name}}</p>

list : [
    {id: 1, name: 'zs1'}
    {id: 2, name: 'zs2'}
    {id: 3, name: 'zs3'}
    {id: 4, name: 'zs4'}
]

     v-if 和v-show

     v-if的特点是每次都会重新删除或创建元素，v-if有较高的切换性能消耗；v-show的特点，每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none，v-show 有较高的初始渲染消耗； 如果元素涉及到频繁的切换，最好不要使用v-if，而是推荐使用v-show；如果元素可能永远也不会被显示出来，则推荐使用v-if

三、案例练习--品牌管理案例

    案例效果：

    功能分析： 

    

     Vue调试工具

    搜索功能：

//代码实现
search(keywords) {
    // var newList = []
    // this.list.forEach(item => {
    //if (item.name.indexOf(keywords) != -1) {
    //newList.push(item)
    //}
    // })
    // return newList
    //forEach some filter findIndex 这些都属于数组的新方法，都会对数组中的每一项进行遍历，执行相关操作
    return this.list.filter(item => {
    //ES6中，为字符串提供了一个新的方法叫做String.prototype.includes('要包含的字符串')，如果包含，则返回true，否则返回false
        if (item.name.includes(keywords)) {
        return item
        }
    })
}

    过滤器--vue中的全局过滤器

    ES6中新方法，填充字符串：

 

// 过滤器的调用格式： {{name| 过滤器的名称}}
//过滤器的定义语法
//Vue.filter('过滤器的名称', function(data){})
//过滤器中的function，第一个参数，已经被规定死了，永远都是过滤器管道符前面传递过来的数据

//定义全局过滤器，进行时间格式化
Vue.filter('dateFormat', function(dateStr) {
     //根据给定的时间字符串，得到特定的时间
    var dt = new Date(dateStr)
    var y = dt.getFullYear()
    var m = dt.getMonth() + 1
    var d = dt.getDate()
    // return `$(y)-$(m)-$(d)`   
    return y + '-' + m + '-' + d
})

//要得到yyyy-mm-dd hh:mm:ss格式
Vue.filter('dateFormat', function(dateStr, pattern='') {
    //根据给定的时间字符串，得到特定的时间
    var dt = new Date(dateStr)
    var y = dt.getFullYear()
    var m = dt.getMonth() + 1
    var d = dt.getDate()
    // return `$(y)-$(m)-$(d)`   
    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
        return y + '-' + m + '-' + d
    } else {
        var hh = dt.getHours()
        var mm = dt.getMinutes()
        var ss = dt.getSeconds()
        return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss
        // return `$(y)-$(m)-$(d) $(hh):$(mm):$(ss)`
    }
})

    定义私有过滤器：

    按键修饰符：（键盘事件对应键码：www.cnblogs.com/wuhua1/p/6686237.html）

//定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;

    自定义焦点指令： 下图中用bind绑定的focus未生效

     自定义颜色指令：

//定义全局指令，Vue.directive()
// 参数一： 指令的名称，定义时不需要加前缀
//参数二：是一个对象，有一些指令相关的函数，执行相关操作
Vue.directive('focus', {
    //和js行为有关的操作，最好在inserted中去执行
    inserted: function(el) {
    el.focus()
    }
    })
        

    <input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'blue'">
    Vue.directive('color', {
    //样式只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素都有了一个内联样式
    bind: function(el, binding) {
    // el.style.color = 'red'
    el.style.color = binding.value
    }
})

    定义私有指令：

    指令函数的简写

    Vue实例的生命周期

 

    Vue-resource实现get，post，jsonp请求（还可以使用axios第三方包实现数据的请求）

    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

<!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>vue-resource的基本使用</title>
    <script src="https://cdn.staticfile.org/vue/2.4.0/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="get请求" @click="getInfo">
        <input type="button" value="post请求" @click="postInfo">
        <input type="button" value="jsonp请求" @click="jsonpInfo">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                getInfo() {
                    this.$http.get('http://vue.studyit.io/api/getlunbo').then(function(result) {
                        console.log(result)
                    })
                },
                postInfo() {
                    // application/x-www-form-urlencoded 
                    //手动发起的post请求默认没有表单格式
                    //通过post方法的第三个参数，{emlulateJOSN: true}设置提交的内容类型为普通表单数据格式
                    this.$http.post('http://vue.studyit.io/api/post', {}, {emlulateJOSN: true}).then(result => {
                        console.log(result)
                    })
                },
                jsonpInfo() {
                    this.$http.post('http://vue.studyit.io/api/jsonp').then(result => {
                        console.log(result,body)
                    })
                }
            }
        })
    </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>vue-resource改造品牌列表案例</title>
    <script src="https://cdn.staticfile.org/vue/2.4.0/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        
        <div class="panel panel-primary">
              <div class="panel-heading">
                    <h3 class="panel-title">添加品牌</h3>
              </div>
              <div class="panel-body form-inline" :style="{'margin-bottom': '10px'} ">
                    <label>
                        Name:
                        <input type="text" v-model="name" class="form-control">
                    </label>
                    <input type="button" value="添加" @click="add" class="btn btn-primary">
              </div>
        </div>
        
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td>{{item.id}} </td>
                    <td>{{item.name}} </td>
                    <td>{{item.ctime}} </td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 设置全局数据跟域名
        Vue.http.options.root = 'http://vue.studyit.io/';
        // 全局启用
        Vue.http.options.emulateJSON = true; 
        var vm = new Vue({
            el: '#app',
            data: {
                name: '',
                list: []
            },
            created() {
                this.getAllList()
            },
            methods: {
                getAllList() {
                    this.$http.get('api/getprolist').then(result => {
                        var result = result.body
                        if (result.status === 0) {
                            this.list = result.message
                        } else {
                            alert('获取数据失败！')
                        }
                    })
                },
                add() {
                    this.$http.post('api/addproduct', { name: this.name }).then(result => {
                        if (result.body.status === 0) {
                            this.getAllList()
                        } else {
                            alert('添加失败！')
                        }
                    })
                },
                del() {
                    this.$http.get('api/delproduct' + id).then(result => {
                        if(result.body.status === 0) {
                            this.getAllList()
                        } else {
                            alert('删除失败！')
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>

五、vue中的动画

    使用过渡类名实现动画

    动画自定义v前缀

<input type="button" value="taggle" @click="flag=!flag">
    <transition name="my">
        <h6 v-if="flag">这是一个动画</h6>
    </transition>

    使用第三方动画库animate.css：https：//raw.githubusercontent.com/daneden/animate.css/master/animate.css

<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css">

//入场 bounceIn 离场bounceOut
<input type="button" value="taggle" @click="flag=!flag">
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
    <h3 v-if="flag">这是一个第三方库的动画</h3>
</transition>

//或者
//duration动画时间
//入场，离场时间分别设置  duration="{ enter: 200, leave: 400}"
<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="400">
    <h3 v-if="flag" class="animated">这是一个第三方库的动画</h3>
</transition>

     钩子函数实现半场动画

 

    代码如下 

<!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>动画-使用钩子函数模拟小球半场动画</title>
    <script src="https://cdn.staticfile.org/vue/2.4.0/vue.min.js"></script>
    <style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="快到碗里来" @click="flag=!flag">
        <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
                <div class="ball" v-show="flag"></div>
        </transition>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            },
            methods: {
                beforeEnter(el) {
                    el.style.transform = "translate(0, 0)"
                },
                enter(el, done) {
                    el.offsetWidth //这句话没有实际的作用，但是如果不写，出不来动画效果，可以认为其会强制动画刷新
                    el.style.transform = "translate(150px, 450px)"
                    el.style.transition = 'all 1s ease'
                    //这里的done，其实就是afterEnter,done是afterEnter函数的引用
                    done()
                },
                afterEnter(el) {
                    this.flag = !this.flag
                }
            }
        })
    </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>使用transition-group元素实现列表动画</title>
    <script src="https://cdn.staticfile.org/vue/2.4.0/vue.min.js"></script>
    <style>
      li {
        border: 1px dashed #999;
        margin: 5px;
        line-height: 32px;
        padding-left: 5px;
        font-size: 12px;
        width: 100%;
      }
      li:hover {
        background-color: hotpink;
        transition: all 0.8s ease;
      }

      .v-enter,
      .v-leave-to {
        opacity: 0;
        transform: translateY(80px);
      }
      .v-enter-active,
      .v-leave-active {
        transition: all 0.6s ease;
      }
      .v-move {
          transition: all 0.6s ease;
      }
      .v-leave-active {
          position: absolute;
      }
    </style>
  </head>
  <body>
    <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> -->
        <!-- 给transition-group添加appear属性，实现页面刚展示出来时入场的效果 -->
        <!-- 通过设置tag属性，指定将其渲染为指定元素，否则默认为span标签 -->
        <transition-group appear tag="ul">
          <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
            {{ item.id }} --- {{ item.name }}
          </li>
        </transition-group>
      <!-- </ul> -->
    </div>

    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          id: "",
          name: "",
          list: [
            { id: 1, name: "赵高" },
            { id: 2, name: "秦桧" },
            { id: 3, name: "严嵩" },
            { id: 4, name: "魏忠贤" }
          ]
        },
        methods: {
          add() {
            this.list.push({ id: this.id, name: this.name });
            this.id = this.name = "";
          },
          del(i) {
              this.list.splice(i, 1)
          }
        }
      });
    </script>
  </body>
</html>

六，Vue的组件

    创建组件的第一种方式

    创建组件的第二种方式

    创建组件的第三种方式

    定义私有组件

     组件中的数据

    为什么数据必须是一个功能，为了防止复用组件是，多个组件共享同一个数据

    组件切换

        V-如果和V-别的结合标志

        <div id="app">
            <a href="" @click.prevent="flag=!flag">登陆</a>
            <a href="" @click.prevent="flag=!flag">注册</a>
            
            <login v-if="flag"></login>
            <register v-else="flag"></register>
        </div>

        <script>
            Vue.component('login', {
                template: '<h3>登陆组件</h3>'
            })
            
            Vue.component('register', {
                template: '<h3>注册组件</h3>'
            })

            var vm = new Vue({
                el: '#app',
                data: {
                    flag: true
                },
                methods: {}
            })
        </script>

        使用的Vue提供的组件实现组件切换

        实现代码：

        <div id="app">
            <a href="" @click.prevent="comName='login'">登陆</a>
            <a href="" @click.prevent="comName='register'">注册</a>
            
            <component :is="comName"></component>
        </div>

        <script>
            Vue.component('login', {
                template: '<h3>登陆组件</h3>'
            })
            
            Vue.component('register', {
                template: '<h3>注册组件</h3>'
            })

            var vm = new Vue({
                el: '#app',
                data: {
                    // flag: true
                    comName: '' //当前component中 :is属性绑定的组件名称
                },
                methods: {}
            })
        </script>

 

        应用动画和模式方式，最终代码

        <style>
            .v-enter,
            .v-leave-to {
                opacity: 0;
                transform: translateX(150px);
            }

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

        <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: '<h3>登陆组件</h3>'
            })
            
            Vue.component('register', {
                template: '<h3>注册组件</h3>'
            })

            var vm = new Vue({
                el: '#app',
                data: {
                    // flag: true
                    comName: 'login' //当前component中 :is属性绑定的组件名称
                },
                methods: {}
            })
        </script>

    组件传值 - 父组件向子组件传值

    组件传值 - 父组件把方法传递给子组件

    代码如下

<!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>父组件传递子组件方法</title>
    <script src="https://cdn.staticfile.org/vue/2.4.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <com2 @func="show"></com2>
    </div>

    <template id="tmp1">
        <div>
            <h1>这是 子组件</h1>
            <input type="button" value="点击触发" @click="myclick">
        </div>
    </template>
    <script>
        var com2 = {
            template: '#tmp1',
            data() {
                return {
                    sonmsg: { name: '小头儿子', age: 6}
                }
            },
            methods: {
                myclick() {
                    // this.$emit('func', 123)
                    this.$emit('func', this.sonmsg)
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {
                datamsgFormSon: null
            },
            methods: {
                show(data) {
                    // console.log('调用了父组件上的show方法: ---' + data)
                    this.datamsgFormSon = data  
                }
            },
            components: {
                com2
            }
        }) 
    </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>组件案例-评论列表</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.staticfile.org/vue/2.4.0/vue.min.js"></script>
</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="tmp1">
        <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 = {
            template: '#tmp1',
            data() {
                return {
                    user: '',
                    content: ''
                }
            },
            methods: {
                postComment() {
                    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.$emit('func')
                }
            }
        }   

        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方法，datahe 和methods都还没有被初始化
            },
            created() {
                this.loadComments()
            },
            methods: {
                loadComments() {
                    var list =JSON.parse(localStorage.getItem('cmts') || '[]')
                    this.list = list;
                }
            },
            components: {
                'cmt-box': commentBox
            }
        }) 
    </script>
</body>
</html>

 

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

七，路由

    引入VUE路线，CDN：

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    URL中的散列（＃号）：www.cnblogs.com/joyho/articles/4430148.html

    路由器链路

    重定向路由重定向

    路由 - 设置选中路由高亮的两种方式，一是直接改写.router链路活性的样式，二是自定义.myactive类覆盖

    路由 - 为路由切换启用动画，同上，使用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>路由的基本使用</title>
    <script src="https://cdn.staticfile.org/vue/2.4.0/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        .router-link-active,
        .myactive {
            color: aquamarine;
            font-weight: 800;
            font-style: italic;
        }
        .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">
        <!-- <a href="#/login">登录</a> -->
        <!-- <a href="#/register">注册</a> -->

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

        <!-- router-view是vue-router提供的元素，作占位符，路由规则匹配到的组件，就会展示到router-view中 -->
        <transition mode="out-in">
            <router-view></router-view>            
        </transition>
    </div>

    <script>

        var login = {
            template: '<h1>登录组件</h1>'
        }
        var register = {
            template: '<h1>注册组件</h1>'
        }
        
        var routerObj = new VueRouter({
            routes: [
                // { path: '/', component: login }, 不推荐
                { path: '/', redirect: '/login' },
                { path: '/login', component: login },
                { path: '/register', component: register }
            ],
            linkActiveClass: 'myactive'
        })

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router: routerObj //将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
        })
    </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>路由的基本使用</title>
    <script src="https://cdn.staticfile.org/vue/2.4.0/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <!-- <a href="#/login">登录</a> -->
        <!-- <a href="#/register">注册</a> -->

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

        <!-- router-view是vue-router提供的元素，作占位符，路由规则匹配到的组件，就会展示到router-view中 -->
        <transition mode="out-in">
            <router-view></router-view>            
        </transition>
    </div>

    <script>

        var login = {
            template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }} </h1>',
            created() {

            },
        }
        var register = {
            template: '<h1>注册</h1>'
        }
        
        var router = new VueRouter({
            routes: [
                { path: '/', redirect: '/login' },
                { path: '/login', component: login },
                { path: '/register', component: register }
            ],
            linkActiveClass: 'myactive'
        })

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

        使用PARAMS方式传递路由参数

    代码如下

<!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>路由-使用params方式传参</title>
    <script src="https://cdn.staticfile.org/vue/2.4.0/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <!-- <a href="#/login">登录</a> -->
        <!-- <a href="#/register">注册</a> -->

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

        <!-- router-view是vue-router提供的元素，作占位符，路由规则匹配到的组件，就会展示到router-view中 -->
        <transition mode="out-in">
            <router-view></router-view>            
        </transition>
    </div>

    <script>

        var login = {
            template: '<h1>登录 --- {{ $route.params.id }} --- {{ $route.params.name }} </h1>',
            created() {
                console.log(this.$route.params.id)
            },
        }
        var register = {
            template: '<h1>注册</h1>'
        }
        
        var router = new VueRouter({
            routes: [
                { path: '/', redirect: '/login' },
                { path: '/login/:id/:name', component: login },
                { path: '/register', component: register }
            ],
            linkActiveClass: 'myactive'
        })

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router //将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
        })
    </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>路由-使用params方式传参</title>
    <script src="https://cdn.staticfile.org/vue/2.4.0/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/account">Acount</router-link>
        <router-view></router-view>
    </div>

    <template id="tmp1">
        <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: '#tmp1'
        }
        var login = {
            template: '<h3>登录</h3>'
        }
        var register = {
            template: '<h3>注册</h3>'
        }

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

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router 
        })
    </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>路由-使用params方式传参</title>
    <script src="https://cdn.staticfile.org/vue/2.4.0/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <style>
        h1,
        html,
        body {
            margin:0;
            padding: 0;
        }
        .header {
            background: orange;
            height: 80px;
        }
        .container {
            display: flex;
            height: 600px;
        }
        .left {
            background: pink;
            flex: 2;
        }
        .main {
            background: paleturquoise;
            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: '<h1 class="header">header头部区域</h1>'
        }
        var leftBox = {
            template: '<h1 class="left">left侧边栏区域</h1>'
        }
        var mainBox = {
            template: '<h1 class="main">mainBox主体区域</h1>'
        }

        var router = new VueRouter({
            routes: [
                { path: '/', components: {
                    'default': header,
                    'left': leftBox,
                    'main': mainBox
                }},

            ]
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router 
        })
    </script>
</body>
</html>

    使用KEYUP事件实时监听

    使用观看监听文本框数据

    看监听路由地址的改变

    计算计算属性的使用和三个特点