Vue学习笔记_vue example-CSDN博客

本文链接：https://blog.csdn.net/qq_42173570/article/details/81317005

Vue框架

1.Vue简介

Vue开发者是尤雨溪，是受到angular启发，是一个实现UI层的渐进式的js框架

2.什么是框架

框架是指一套非常优秀可被反复使用的代码.

3.框架优势

a.提高了代码的复用率
b.降低模块之间的耦合度
c.提高开发速度
d.提高代码质量

4.特点

a.非常好的中文文档
b.体积小
c.基于组件(web component)开发方式

MVVM

vue.js 是当前一个js的 MVVM库，它以数据驱动和组件化的思想构造而成，比其它框架，简洁，上手快.

什么是MVVM库

(1)vue实现挂载到某个元素上
(2)当vue实现创建后，形成双向绑定，上面dom listeners和data binding二个工具
(3)从view侧看，vue中datalistener工具帮助我们监听dom变化,如果dom变化更新model数据
(4)如果从model侧看,当我们更新mode数据,vue中的data bindings工具会帮我们更新view数据.
^-^具体权威解释请自行查询….哈哈

Vue指令

v-if

v-if是条件渲染指令，它根据表达式的true/false来删除或添加元素

案发现场:

    <h3>Vue指令 v-if</h3>
    <div id="app">
        <!-- view -->
        {{message}}
        <h3 v-if="yes">yes</h3>
        <h3 v-if="no">no</h3>
        <h3 v-if="age>28">age:{{age}}</h3>
        <h3 v-if="name.indexOf('o')>=0">name:{{name}}</h3>
    </div>

    <script type="text/javascript">
        // model
        var exampleData={
            message:"Hello Vue",
            yes:true,
            no:false,
            age:28,
            name:"lion"
        }
        // ViewModel
        new Vue({
            el:"#app",
            data:exampleData
        });
    </script>

v-show

v-show也是条件渲染指令，和v-if 指令不同的，使用v-show指令元素始终会渲染到html,它只设置style属性:显示与隐藏
{true}display:block/{false}display:none

案发现场:

    <h3>Vue指令 v-show</h3>
    <div id="app">
        <!-- view -->
        {{message}}
        <h3 v-show="yes">yes</h3>
        <h3 v-show="no">no</h3>
        <h3 v-show="age>=25">age:{{age}}</h3>
        <h3 v-show="name.indexOf('w')>=0">naem:{{name}}</h3>
    </div>

    <script type="text/javascript">
        // model
        var exampleData={
            message:"Hello Vue",
            yes:true,
            no:false,
            age:28,
            name:"lion"
        }
        // ViewModel
        new Vue({
            el:"#app",
            data:exampleData
        });
    </script>

v-else/v-else-if同理

v-else 指令必须跟在v-if元素后，否则不能够被识别.

案发现场:

    <h3>Vue指令 v-else</h3>
    <div id="app">
        <!-- view -->
        <h4 v-if="age>=25">age:{{age}}</h4>
        <h4 v-else>name:{{name}}</h4>
        <hr>
        <h4 v-if="name.indexOf('l')>0">name:{{name}}</h4>
        <h4 v-else>没查找到指定字符</h4>
    </div>

    <script>
        // model
        var exampleData={
            sex:"Mala",
            age:24,
            name:"lion"
        }
        // ViewModel
        new Vue({
            el:"#app",
            data:exampleData
        });
    </script>

v-for

v-for 指令基于一个数组泻染,它语法与js遍历相似

案发现场:

    <h3>Vue指令 v-for</h3>
    <div id="app">
        <!-- view -->
        <h4>显示数组中内容</h4>
        <ul>
            <li>{{mylist[0]}}</li>
            <li>{{mylist[1]}}</li>
            <li>{{mylist[2]}}</li>
            <li>{{mylist[3]}}</li>
            <li>{{mylist[4]}}</li>
        </ul>

        <hr>

        <!-- 循环指令 -->
        <ul>
            <li v-for="item in mylist">{{item}}</li>
        </ul>

        <hr>

        <ul>
            <li v-for="(value,key) in mylist">下标{{key}}:{{value}}</li>
        </ul>
    </div>

    <script>
        // model
        var exampleData={
            mylist:[101,102,103,104,105]
        }
        // ViewMode
        new Vue({
            el:"#app",
            data:exampleData
        });
    </script>

v-bind

v-bind指令后带一个参数,中间放一个冒号分，这个参数通常html特性
语法:
v-bind:argumetns=”expression”
简写:
:argumetns=”expression”

案发现场:

    <h3>Vue指令 v-bind</h3>
    <div id="app">
        <p v-bind:class="{myRed:yes}">我是文本</p>  <!-- yes的值为ture才能添加到class属性里 -->
        <p v-bind:style="{backgroundColor:bgColor}">我有背景色</p>
        <!-- 简写 -->
        <p :class="{myRed:yes}">我是文本</p>
        <p :style="{backgroundColor:bgColor}">我有背景色</p>
    </div>

    <script>
        var exampleData={
            bgColor:"#e4393c",
            yes:true
        };
        new Vue({
            el:"#app",
            data:exampleData,       
        });
    </script>

v-on

v-on指令用于监听dom事件,用法与v-model相似
简写:
@事件=”方法命”

修饰指令:

.stop —– 停止事件冒泡
.prevent —– 阻止事件默认行为
.13/.enter —– 键盘回车
.once —– 只触发一次
.left —– 鼠标左键触发(版本2.2.0+)
.right —– 鼠标右键触发(版本2.2.0+)
.middle —– 鼠标中键触发(版本2.2.0+)

案发现场:

  <div id="app">
    <input type="text" v-model="message"/>
    <br/>
    <button v-on:click="say">点一下1</button>
    <br/>
    <button @click="say">点一下2</button><!-- 简写 -->
    <br/>
    <button @click="run('vue')">点一下3</button>
    <br/>
    <input type="button" @click="clickMe" value="btn1"/>
    <br/>
    <input type="button" @click.stop="clickMe" value="btn2"/>
    <br/>
    <input type="text" @keydown.enter="clickMe"/>
    <br/>
    <input type="text" @keydown.13="clickMe"/>
    <br/>
    <form action="#" @submit.prevent="handleSubmit">
        <button>login</button>
    </form>
    <select @change="handleChange">
        <option value="red">红色</option>
        <option value="green">绿色</option>
        <option value="blue">蓝色</option>
    </select>

  </div>
  <script src="js/vue.js"></script>
  <script>
    //1:model
    var exampleData = {
      message:"hello"
    }
    //2:viewmodel
    var app = new Vue({
      el:"#app",
      data:exampleData,
      methods:{
        say:function(){
          alert(this.message);
        },
        clickMe:function(){
          alert(this.message);
        },
        run:function(mes){
          this.message = mes;
        },
        handleSubmit:function(){
          console.log("提交事件被触发了.....");
        },handleChange:function(e){
          var target = e.target;
          console.log(target.value);
        }
      }
    });
  </script>

v-model

v-model指令用于与当前元素绑定,value值
子指令:
v-mode.lazy=”变量” ——– #懒惰回车,onblur触发
v-mode.number=”变量” ——– #输入数值
v-mode.trim=”变量” ——– #去除字符串前后空格

案发现场:

    <div id="app">
        <p>|{{message}}|</p>
        <hr>
        <!-- lazy懒惰模式在按下回车或失去焦点时才会更新数据 -->
        <input type="text" name="" v-model.lazy="message">
        <input type="number" name="" v-model.number="message">
        <!-- trim会自动去处文本开始和结尾的空子符 -->
        <input type="text" name="" v-model.trim="message">
    </div>

    <script>
        var exampleData={
            message:"Hello Vue"
        };
        new Vue({
            el:"#app",
            data:exampleData
        });
    </script>

自定义指令

Vue自带了很多指令，但是这些指令都是比较偏向于工具化，有时候在实现具体业务时，发现指令不够用，这时需要创建自定义指令

语法:

new Vue({
    ...
    directives:{
        change:{
            bind:function(el,bindings){},
            update:function(el,bindings){},
            unbind:function(el,bindings){}
        }
    }
});
在自定义指令时3个处理函数
    bind:在自定义指令绑定元素时执行此函数
    update:如果调用指令传入参数，参数发生变化时执行此函数
    unbind:解除绑定时执行此函数
注意事项：
建议以驼峰命名法给指令命名:比如 changeBackgroundColor
应用时以"烤串式书写法"应用:比如 <h3 v-change-background-color="myBgcolor">Text</h3>

案发现场:

    <div id="app">
        {{count}}
        <br>
        <input type="button" name="" value="+1" @click="updateCount" v-if="count<6" v-change-background-color="count">
    </div>
    <script>
        var exampleData={
            message:"hello vue",
            count:0
        };
        new Vue({
            el:"#app",
            data:exampleData,
            methods:{
                updateCount:function(){
                    this.count++;
                }
            },
            directives:{
                changeBackgroundColor:{
                    bind:function(el,bindings){
                        console.log(el);
                        console.log(bindings);
                        console.log("初始化指令");
                    },
                    update:function(){
                        console.log("指令绑定数值发生了变化");
                    },
                    unbind:function(){
                        console.log("解除绑定");
                    }
                }
            }
        });
    </script>

自定义过滤器

过滤器的基本功能是实现数据筛选，过滤，格式化等操作。在vue1.*版本中内置了很多过滤器，但是在vue2版本中未内置过滤器所以需要自定义过滤器

语法:

new Vue({
    filters:{
        myFilter:function(vaule,parameter){
            //处理数据
            return 处理后的数据;
        }
    }
});
使用:
    示例：
        <any>{{表达式|过滤器}}<any>
        <h1>{{price | myCurency}}</h1>

案发现场:

<div id="app">
    价格{{price}}
    <h3>{{price | myCurrency('$')}}</h3>
    <h3>{{price | myCurrency('￥')}}</h3>
</div>
<script>
    var exampleData={
        price:250
    };
    new Vue({
        el:"#app",
        data:exampleData,
        filters:{
            myCurrency:function(vaule,parameter){
            return this.price=parameter+vaule;
        }
    }
});

组件

创建组件

Vue.component("组件名称",{组件内容,template:'<h3>模块</h3>'});
示例:
Vue.component("my-component",{
    template:'<h3>模块</h3>'
});

组件的使用

组件的使用就像一个普通html标签一样

<div id="app">
    <my-component></my-component>   
</div>

注意事项: 
(1)组件的命名和使用建议使用烤串命名规则 
(2)如果一个组件中渲染多个元素，将多个元素放到一个根标签，否则报错

创建复合组件

复合组件并不是一个新概念，就是一个组件，只不过该组件又调其它组件。

案发现场:

<h3>复合组件</h3>
<div id="app">
    <my-article></my-article>
</div>
<script>
    //复合组件三部分组件: 复合组件 article[title/detail]
    //创建title
    Vue.component("my-title",{
        template:`<h4>副标题</h4>`
    });
    //创建detail
    Vue.component("my-detail",{
        template:`<p>详细信息</p>`
    });
    //创建article {复合组件}
    Vue.component("my-article",{
        template:`
            <div>
                <my-title></my-title>
                <my-detail></my-detail>
            </div>
        `
    });
    new Vue({
        el:"#app"
    });
</script>

组件的生命周期

4个阶段8个处理函数，每个阶段都有对应的处理函数;分为create/mount(挂载)/update/destroy 4个阶段
其实Vue对象也可以看做一个根组件，也拥有生命周期

create:
    beforeCreate    created    #{创建->初始化操作}
mount:
    beforeMount    mounted    #{挂载DOM树}
update:
    beforeUpdate    updated    #{数据更新->操作或逻辑判断}
destroy:
    beforeDestroy    destroyed    #{销毁->清理工作}

案发现场:

<div id="app">
  <button @click="isShow=!isShow">切换组件是否显示</button>
  <my-component v-if="isShow"></my-component>
</div>

<script>
    //组件的创建--生命周期
    Vue.component("my-component",{
        template:`
            <div>
                <button @click="handleClick">clickMe</button>
                <h4>Hello {{count}}</h4>
            </div>
        `,
        data:function(){
            return {count:0}
            //小心:写法特殊:确保每个模板对象中数据独立
        },
        methods:{
            handleClick:function(){
                this.count++;
            }
        },
        beforeCreate:function(){console.log("1:创建前")},
        created:function(){console.log("2:创建后")},
        beforeMount:function(){console.log("3:挂载前")},
        mounted:function(){console.log("4:创建后")},
        beforeUpdate:function(){console.log("5:更新前")},
        updated:function(){console.log("6:创建后")},
        beforeDestroy:function(){console.log("7:消毁前")},
        destroyed:function(){console.log("8:消毁后")}
    });

    var exampleData = {
        isShow:true
    };
    new Vue({
        el:"#app",
        data:exampleData
    });
</script>

watch

监听属性，当监听的数据发生改变即刻执行相应的自定义操作

案发现场:

<div id="app">
    <my-component></my-component>
</div>
<script>
    Vue.component("my-component",{
        data:function(){
            return {
                myAddress:"",
                myPhone:139
            }
        },
        template:`
            <div>
                <input type="text" v-model="myAddress" />
                <input type="text" v-model="myPhone" />
                <h5>{{myAddress}}</h5>
                <h5>{{myPhone}}</h5>
            </div>
        `,
        watch:{//监听属性
            //前面属性名称:函数
            myAddress:function(){
                console.log("数据发生修改:"+this.myAddress);
            },
            myPhone:function(){
                console.log("数据发生修改:"+this.myPhone);
            }
        }
    });
    new Vue({
      el:"#app"
   });
</script>

组件之间的通信(父组件传递数据到子组件)

步骤:

(1)父组件在调用子组件 (传值)
    ...
    <child :myValue="money"></child>
    ...
(2)子组件中获取父组件传来的值
    Vue.component("child",{
        props:["myValue"],      //声明:父组件传递参数名
        template:`<div>{{myValue}}</div>`
    });

案发现场1:

<div id="app">
    <parent></parent>
</div>
<script>
// 创建父组件
Vue.component('parent',{
    template: `
        <div>
            <h4>父组件</h4>
            <child :money="num"></child>
        </div>
    `,
    data:function(){
        return {num:3000};
    }
});
// 创建子组件
Vue.component('child',{
    template:`
        <div>
            <h3>子组件{{money}}</h3>
            <input type="text" :placeholder="money">
        </div>
    `,
    props:["money"]     //声明变量保存父组件数据
});
// 创建Vue实例
new Vue({
    el: "#app"
});
</script>

案发现场2:

<div id="app">
    <my-login></my-login>
</div>
<script>
// 创建父组件
Vue.component('my-login', {
    template: `
        <div>
            <h3>父组件</h3>
            userName:
            <my-input tips="用户名"></my-input>
            passWord:
            <my-input tips="密码"></my-input>
        </div>
    `,
});
// 创建子组件
Vue.component('my-input', {
    template: `
        <input type="text" :placeholder="tips">
    `,
    props: ['tips']
});
// 创建Vue实例
new Vue({
    el: "#app"
});
</script>

组件之间的通信(子组件传递数据到父组件)

子组件像父组件发送数据通过事件的方式来完成数据的传输
    (1)在父组件中先定义一个方法，用于接收子组件通过事件发送来的数据.
    methods:{
        getData:function(msg){
            //参数msg:就是子组件通过事件传递过来的数据
        }
    }
    (2)在父组件模板:绑定事件处理函数
        <child  @自定义事件名="方法名"></child>
        示例:
        <child  @dataEvent="getData"></child>
    (3)在子组件中触发事件,并且传递数据
        this.$emit("触发事件名",传递数据);
        示例:
        this.$emit("dataEvent","交话费");

案发现场:

<div id="app">
    <parent></parent>
</div>
<script>
// 创建父组件
Vue.component('parent',{
    template:`
        <div>
            <h4>父组件</h4>
            <child @dataEvent="getData"></child>
        </div>
    `,
    methods:{
        getData:function(msg){
            alert('父组件接受到子组件数据'+'----'+msg);
        }
    }
});
// 创建子组件
Vue.component('child',{
    template:`
        <div>
            <h3>子组件</h3>
            <button @click="sendData">点击按钮发送数据给父组件</button>
        </div>
    `,
    methods:{
        sendData:function(){
            this.$emit('dataEvent','老爸我要交话费');
            //通过预定义字符触发自定义事件，传递数据
        }
    }
});
// 创建Vue实例
new Vue({
    el:"#app"
});
</script>

组件之间的通信($parent;$refs)

$parent,$refs与上叙通信方法的区别是，$parent$refs预定义字符只能获取到组件的data数据，无法获取data以外的数据，如果ref作用html标签上则获取的是标签对应的DOM元素，在开发时应以具体业务为准，选择合适的方法。

父组件要想获取子组件的(数据)——$refs

(1)在父组件调用子组件时候，指定属性ref 
    <child ref="子组件变量名"></child>   //表示子组件对象
    示例:
    <chlid ref="mySon"></child>
(2)根据指定名称，找到子组件实例对象
    this.$refs.mySon

案发现场:

<div id="app">
    <parent></parent>
</div>
<script>
// 创建父组件
Vue.component('parent',{
    template:`
        <div>
            <h4>父组件通过$refs方法调用子组件data中的数据</h4>         
            <button @click="getData">获取子组件中的data数据</button>
            <child ref="mySon"></child>
        </div>
    `,
    methods:{
        getData:function(){
            console.log('获取子组件data中的数据：'+this.$refs.mySon.name);
        }
    }
});
// 创建子组件
Vue.component('child',{
    template:`<h4>子组件</h4>`,
    data:function(){
        return {name:'红孩儿'};
    }
});
// 创建Vue实例
new Vue({el:"#app"});
</script>

子组件要想获取父组件的(数据)——$parent

(1)在父组件调用子组件时候，指定属性ref 
    <child ref="子组件变量名"></child>   //表示子组件对象
    示例:
    <chlid ref="mySon"></child>
(2)根据指定名称，找到子组件实例对象
    this.$refs.mySon
(3)子组件想获取父组件数据
    this.$parent

继上一个案发现场:

<div id="app">
    <parent></parent>
</div>
<script>
// 创建父组件
Vue.component('parent',{
    template:`
        <div>
            <h4>父组件通过$refs方法调用子组件data中的数据</h4>
            <button @click="getData">获取子组件中的data数据</button>
            <child ref="mySon"></child>
        </div>
    `,
    methods:{
        getData:function(){
            console.log('获取子组件data中的数据：'+this.$refs.mySon.name);
        }
    },
    data:function(){
        return {name:'牛魔王'};
    }
});
// 创建子组件
Vue.component('child',{
    template:`
        <div>
            <h4>子组件</h4>
            <button @click="getData">获取父组件中的data数据</button>
        </div>
    `,
    data:function(){
        return {name:'红孩儿'};
    },
    methods:{
        getData:function(){
            console.log('获取父组件data中的数据：'+this.$parent.name);
        }
    }
});
// 创建Vue实例
new Vue({el:"#app"});
</script>

组件之间通信 (兄弟之间)

借助于一个公共vue实例对象，不同的组件可以通过该对象完成事件绑定和触发.
    var public = new Vue();
    public.$on();   //绑定事件
    public.$emit();  //发送事件
    熊大(发)想发消息给熊二(收)
    接收方(熊二):事件绑定
    public.$on("dataEvent",function(msg){
        //msg就是通过事件，传递来的数据
    });
    发送方(熊大):触发事件
    bus.$emit("dataEvent ","发送内容");

案发现场(熊大呼叫熊二)1:

<div id="app">
    <xiong-da></xiong-da>
    <xiong-er></xiong-er>
</div>
<script>
//实例化公共Vue对象
var public=new Vue();
//创建组件xiong-da
Vue.component('xiong-da',{
    template:`
        <div>
            <h4>熊大</h4>
            <button @click="sendData">紧急呼叫熊二</button>
        </div>
    `,
    methods:{
        sendData:function(){
            public.$emit('dataEvent','熊二熊二光头强又来砍树了！');
        }
    }
});
//创建组件xiong-er
Vue.component('xiong-er',{
    template:`
        <div>
            <h4>熊二</h4>
        </div>
    `,
    mounted:function(){
        public.$on('dataEvent',function(msg){
            console.log('熊大发来消息：'+msg);
        });
    }
});
//实例化Vue对象
new Vue({el:"#app"});
</script>

案发现场(熊大呼叫熊二，熊二回复)2:

<div id="app">
    <xiong-da></xiong-da>
    <xiong-er></xiong-er>
</div>
<script>
//实例化公共Vue对象
var public=new Vue();
//创建组件xiong-da
Vue.component('xiong-da',{
    template:`
        <div>
            <h4>熊大</h4>
            <button @click="sendData">紧急呼叫熊二</button>
        </div>
    `,
    methods:{
        sendData:function(){
            public.$emit('dataEvent','熊二熊二光头强又来砍树了！');
        }
    },
    mounted:function(){
        public.$on('replyDataEvent',function(msg){
            console.log('熊二回复：'+msg);
        });
    }
});
//创建组件xiong-er
Vue.component('xiong-er',{
    template:`
        <div>
            <h4>熊二</h4>
            <button @click="reply">回复熊大</button>
        </div>
    `,
    mounted:function(){
        public.$on('dataEvent',function(msg){
            console.log('熊大发来消息：'+msg);
        });
    },
    methods:{
        reply:function(){
            public.$emit('replyDataEvent','快跑！');
        }
    }
});
//实例化Vue对象
new Vue({el:"#app"});
</script>

Vue Router(路由)

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

SPA(single page application)

SPA(single page application)单页面应用程序，在一个完成的应用或者站点中，只有一个完整的HTML页面，这个页面有一个容器，可以把需要加载的代码插入到该容器中.

SPA的工作原理

示例:

http://127.0.0.1/index.html#/start

(1)根据地址栏中url解析完的页面index.html 加载index.html
(2)根据地址栏解析#后的路由地址:start，根据路由地址，去当前应用的配置中找路由地址配置对象去查找路由地址，所对
应的模块页面地址发起异步请求加载该页面地址
(3)把请求来的数据加载到指定容器中

SPA的实现步骤

(1)引入对应 vue-router.js 文件
(2)显示组件
    <div id="app">
        <router-view></router-view>  渲染不同组件
    </div>
(3)创建各个组件
(4)配置信息(路由词典)
    每一个路由地址配置对象(组件)
        const myRoutes=[
            {path:"/start",component:myStart},
            {path:"/list",component:myList},
        ];
(5)创建路由表对象(语法标签)
    const myRouter = new VueRouter({
        routes: myRoutes
    });
(6)在Vue对象添加现在应用路由表对象
    new Vue({
        el:"#app",
        router: myRouter
    });
(7)测试——地址栏测试
    在地址中输入对应的不同路由地址中，显示不同组件

案发现场:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
    <style>
        .base{
            width:320px;
            height:300px;
            background:#ddd;
            border:3px solid #1b6d85;
            padding:12px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <!--router视图-->
    <router-view></router-view>
</div>
<script>
    // 创建多组件
    var collect=Vue.component('collect',{
        template:`
            <div class="base">
                <h1>收藏页面</h1>
            </div>
        `
    });
    var detail=Vue.component('detail',{
        template:`
            <div class="base">
                <h1>详情页面</h1>
            </div>
        `
    });
    var order=Vue.component('order',{
        template:`
            <div class="base">
                <h1>订单页面</h1>
            </div>
        `
    });
    // 创建路由词典
    const routerDictionary=[
        {path:'',component:collect},
        {path:'/collect',component:collect},
        {path:'/detail',component:detail},
        {path:'/order',component:order}
    ];
    // 创建路由对象
    const routerObject=new VueRouter({
        routes:routerDictionary
    });
    // 创建Vue对象
    new Vue({
        el:"#app",
        router:routerObject
    });
</script>
</body>
</html>

SPA 通过VueRouter来实现组件之间跳转

VueRouter提供了3种方式实现跳转
    (1)直接修改地址栏中路由地址
    (2)通过router-link标签实现跳转
        <router-link  to="/order">订单</router-link>
    (3)通过js的编程方式来实现
        jumpToLogin:function(){
           this.$router.push("/login");
        }

案发现场:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
    <style>
        .base{
            width:320px;
            height:300px;
            background:#ddd;
            border:3px solid #1b6d85;
            padding:12px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <!--router视图-->
    <router-view></router-view>
</div>
<script>
    // 创建多组件
    var collect=Vue.component('collect',{
        template:`
            <div class="base">
                <h1>收藏页面</h1>
                <button @click="jumpDetail">详细</button>
                <button @click="jumpOrder">订单</button>
            </div>
        `,
        methods:{
            jumpDetail:function(){
                this.$router.push('/detail');
            },
            jumpOrder:function(){
                this.$router.push('/order');
            }
        }
    });
    var detail=Vue.component('detail',{
        template:`
            <div class="base">
                <h1>详情页面</h1>
                <router-link to="/collect">收藏</router-link>
            </div>
        `
    });
    var order=Vue.component('order',{
        template:`
            <div class="base">
                <h1>订单页面</h1>
                <router-link to="/detail">详情</router-link>
            </div>
        `
    });
    // 创建路由词典
    const routerDictionary=[
        {path:'',component:collect},
        {path:'/collect',component:collect},
        {path:'/detail',component:detail},
        {path:'/order',component:order}
    ];
    // 创建路由对象
    const routerObject=new VueRouter({
        routes:routerDictionary
    });
    // 创建Vue对象
    new Vue({
        el:"#app",
        router:routerObject
    });
</script>

</body>
</html>

SPA 通过VueRouter来实现组件之间跳转传递参数

(1)明确发送方和接收方
(2)配置接收方法路由地址
    {path:"/main/:uname/:upwd", component:MainComponent }
(3)接收方法获取传递的数据
    this.$route.params   //params 数据里面多个参数对象
    this.$route.params.uname
    this.$route.params.upwd
(4)跳转时,发送参数
    this.$router.push("/main/tom");
    <router-link to="/main/jerry">跳转</router-link>

案发现场1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
    <style>
        .base{
            width:320px;
            height:300px;
            background:#ddd;
            border:3px solid #1b6d85;
            padding:12px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <!--router视图-->
    <router-view></router-view>
</div>
<script>
    // 创建多组件
    var login=Vue.component('my-login',{
        template:`
            <div class="base">
                用户名：<input type="text" v-model="user_name">
                <br>
                密码：<input type="text" v-model="user_pwd">
                <br>
                <button @click="login">登录</button>
                <router-link :to="'/main/'+yklogin+'/'+ykpwd">游客登录</router-link>
            </div>
        `,
        data:function(){
            return {user_name:'',user_pwd:'',yklogin:'游客',ykpwd:'无'}
        },
        methods:{
            login:function(){
                this.$router.push('/main/'+this.user_name+'/'+this.user_pwd);
            }
        }
    });
    var main=Vue.component('my-main',{
        template:`
            <div class="base">
                <h3>首页</h3>
                <p>用户：{{uname}}</p>
                <p>密码：{{upwd}}</p>
            </div>
        `,
        data:function(){
            return {uname:'',upwd:0};
        },
        mounted:function(){
            this.uname=this.$route.params.userName;
            this.upwd=this.$route.params.userPwd;
        }
    });
    var notFound=Vue.component('not-found',{
        template:`
            <div class="base">
                <h1>404 Page Not Found</h1>
                <router-link to="/login">返回登录页</router-link>
            </div>
        `
    });
    // 创建路由词典
    const routerDictionary=[
        {path:'',component:login},
        {path:'/login',component:login},
        {path:'/main/:userName/:userPwd',component:main},
        // *表示没有匹配到上述任何一个路由地址
        {path:'*',component:notFound}
    ];
    // 创建路由对象
    const routerObject=new VueRouter({
        routes:routerDictionary
    });
    // 创建Vue对象
    new Vue({
        el:"#app",
        router:routerObject
    });
</script>

</body>
</html>

案发现场2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
    <style>
        .base{
            width:320px;
            height:300px;
            background:#ddd;
            border:3px solid #1b6d85;
            padding:12px;
            text-align: center;
        }
        .base>ul{
            list-style: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!--路由视图-->
    <router-view></router-view>
</div>
<script>
    // 创建各个组件
    var list=Vue.component('my-list',{
        template:`
            <div class="base">
                <ul>
                    <li v-for="(item,idx) in lists">
                        <router-link :to="'/detail/'+idx">{{item}}</router-link>
                    </li>
                </ul>
            </div>
        `,
        data:function(){
            return {lists:['Mac','MacPro','Surface','Lenovo']};
        }
    });
    var detail=Vue.component('my-detail',{
        template:`
            <div class="base">
                <h1>详情页(接收list组件传过来的商品下标)</h1>
                <p>产品下标：{{productId}}</p>
            </div>
        `,
        data:function(){
            return {productId:0};
        },
        mounted:function(){
            this.productId=this.$route.params.pid;
        }
    });
    var notFound=Vue.component('not-found',{
        template:`
            <div class="base">
                <h1>404 Page Not Found</h1>
                <router-link to="/list">返回首页</router-link>
            </div>
        `
    });
    // 创建路由词典
    const routerDictionary=[
        {path:'',component:list},
        {path:'/list',component:list},
        {path:'/detail/:pid',component:detail},
        {path:'*',component:notFound}
    ];
    // 创建路由对象
    const routerObject=new VueRouter({
        routes:routerDictionary
    });
    // 创建Vue对象
    new Vue({
        el:"#app",
        router:routerObject
    });
</script>
</body>
</html>

SPA 路由设置高级用法

alias 别名(访问路径)
{path:"/list",component:MyList,alias:"/lists"}
redirect 重定向
{path:"/productList",redirect:"/list"}
path:"*" 异常处理
{path:"*", component:NotFound}

路由嵌套

路由嵌套的SPA实现的步骤:
栗子:A(/a)组件跳转到B组件(/c /d)，B组件包含嵌套/c,/d组件
(1)准备嵌套其它组件的父组件指定一个容器在B组件指定容器:模板
<router-view></router-view>
(2)在B组件的路由配置(路由词典)对象中指定 children属性
{
    path:"/b",component:B，
    children:[
        {path:"/c",component:C},
        {path:"/d",component:D}
    ]
}

案发现场:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
    <style>
        .base{
            width:320px;
            height:300px;
            background:#ddd;
            border:3px solid #1b6d85;
            padding:12px;
            text-align: center;
        }
        .base>ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <!--路由视图-->
    <router-view></router-view>
</div>
<script>
    // 创建各个组件
    var login=Vue.component('my-login',{
        template:`
            <div class="base">
                <h1>登录组件</h1>
                <button @click="jumpMain">登录</button>
            </div>
        `,
        methods:{
            jumpMain:function(){
                this.$router.push('/main');
            }
        }
    });
    var main=Vue.component('my-main',{
        template:`
            <div>
                <h1>邮箱主页面</h1>
                <ul>
                    <li>
                        <router-link to="/inbox">收件箱</router-link>
                    </li>
                    <li>
                        <router-link to="/outbox">发件箱</router-link>
                    </li>
                </ul>
                <router-view></router-view>
            </div>
        `
    });
    var inbox=Vue.component('my-inbox',{
        template:`
            <div>
                <ul>
                    <li>未读邮件1</li>
                    <li>未读邮件2</li>
                    <li>未读邮件3</li>
                    <li>未读邮件4</li>
                </ul>
            </div>
        `
    });
    var outbox=Vue.component('my-outbox',{
        template:`
            <div>
                <ul>
                    <li>已发邮件1</li>
                    <li>已发邮件2</li>
                    <li>已发邮件3</li>
                    <li>已发邮件4</li>
                </ul>
            </div>
        `
    });
    var notFound=Vue.component('not-found',{
        template:`
            <div class="base">
                <h1>404 Page Not Found</h1>
                <router-link to="/lg">返回首页</router-link>
            </div>
        `
    });
    // 创建路由词典
    const routerDictionary=[
        {path:'',redirect:'/login'},
        {path:'/login',component:login,alias:'/lg'},
        {
            path:'/main',component:main,
            children:[
                {path:'/inbox',component:inbox},
                {path:'/outbox',component:outbox}
            ]
        },
        {path:'*',component:notFound}
    ];
    // 创建路由对象
    const routerObject=new VueRouter({
        routes:routerDictionary
    });
    // 创建Vue对象
    new Vue({
        el:'#app',
        router:routerObject
    });
</script>
</body>
</html>

vue-resource

vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为.

vue-resource特点

vue-resource插件具有以下特点：
1. 体积小
vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
2. 支持主流的浏览器
和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。
3. 支持Promise API和URI Templates
Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。
4. 支持拦截器
拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

vue-resource的使用

引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。

// 基于全局Vue对象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一个Vue实例内使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：

// 传统写法
this.$http.get('/someUrl', [options]).then(function(response){
    // 响应成功回调
}, function(response){
    // 响应错误回调
});


// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
    // 响应成功回调
}, (response) => {
    // 响应错误回调
});