第7章 Vue.js常用插件

来源：互联网发布：淘宝领取的优酷会员编辑：程序博客网时间：2024/05/22 10:46

vue本身只提供了数据与视图绑定及组件化等功能。

7.1 Vue-router
Vue-router是给Vue.js提供路由管理的插件，利用hash的变化控制动态组件的切换。
后端控制路由：
由后端MVC中的Controller层控制，通过标签的href或者直接修改location.href，向服务器发起一个请求，服务端响应后根据所接收到的信息去获取数据和指派对应的模板，渲染成HTML再返回给浏览器，解析成我们可见的页面。
前端控制路由：
Vue.js+Vue-router的组合将这一套逻辑放在了前端去执行，切换到对应的组件后再向后端请求数据，填充进模板来，在浏览器端完成HTML的渲染。

7.1.1 引用方式

<script src='https://cdn.jsdelivr.net/vue.router/0.7.10/vue-router.min.js'></script>

7.1.2 基本用法
vue-router的基本作用就是将每个路径映射到对应的组件，并通过修改路由进行组件间的切换。
常规路劲规则为当前url路径后面加上#!/path，path即为设定的前端路由路径。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"></head><body><div id="app">    <nav class="navbar navbar-inverse">        <div class="container">            <div class="collapse navbar-collapse">                <ul class="nav navbar-nav">                    <li>                        <router-link to="/home">                            Home                        </router-link>                    </li>                    <li>                        <router-link to="/list">                            List                        </router-link>                    </li>                </ul>            </div>        </div>    </nav>    <div class="container">        <!-- 路由切换组件template插入的位置 -->        <router-view></router-view>    </div></div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><script>    //创建子组件，相当于路径对应的页面    const Home = {        template : '<h1>This is the home page</h1>'    };    const List = {        template : '<h1>This is the List page</h1>'    }    //创建路由器实例    const router  = new VueRouter({        routes : [            { path : '/home',component : Home},            { path : '/list',component : List}        ]    })    const app = new Vue({        router : router    }).$mount('#app')</script></body></html>

变化太多，没法看, 还是看官网吧。
官网

7.2 Vue-resource
Vue-resource对异步请求进行了封装，方便我们同服务器进行数据的交互。
Vue-resource官网

7.3 Vue-devtools
在chrome的开发者模式下直接查看当前页面的Vue实例的组件结构和内部属性，方便我们直接观察。
这里写图片描述

阅读全文

0 0