vue.js常用插件

1. Vue-router

Vue.js + Vue-router 的组合将这一套逻辑放在了前端去执行,切换到对应的组件后再向后端请求数据, 填充进模板来,在浏览器端完成 HTML 的渲染。

引用方式

npm 的方式安装 npm install vue-router
引用

import Vue from 'vue';
import VueRouter from 'vue-router'; 
Vue.use(VueRouter);

基本用法

// vue代码

<!—使用 v-link 指令,path 的值对应跳转的路径,即 #!/home -->
<a v-link="{ path : '/home'}">Home</a>
<a v-link="{ path : '/list'}">List</a>
<!—路由切换组件template插入的位置 -->
<router-view></router-view>

// js代码

// 创建子组件,相当于路径对应的页面
var Home = Vue.extend({
    template : '<h1>This is the home page</h1>'
});
// 创建根组件
var App = Vue.extend({})
// 创建路由器实例
var router = new VueRouter()
// 通过路由器实例定义路由规则(需要在启动应用前定义好)
// 每条路由会映射到一个组件。这个值可以是由Vue.extend创建的组件构造函数(如Home) // 也可以直接使用组件选项对象(如'/list'中component对应的值)
router.map({
'/home': {
component: Home },
'/list': { component : {
template: '<h1>This is the List page</h1>' }
} })
// 路由器实例会创建一个Vue实例,并且挂载到第二个参数元素选择器匹配的DOM上 router.start(App, '#app')
阅读更多
文章标签: vue vue常用插件
个人分类: Vue.js
上一篇Vue开发常见问题及解决方法
下一篇js模块化编程之-CommonJS和AMD/CMD
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭