zoukankan      html  css  js  c++  java
  • (17)打鸡儿教你Vue.js

    vue-router

    image.png

    <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    <a class="list-group-item" v-link="{ path: '/about'}">About</a>
    
    /* 创建路由器  */
    var router = new VueRouter()
    

    image.png

    创建组件:

    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    

    创建Router:

    var router = new VueRouter()
    

    映射路由:

    router.map({
    	'/home': { component: Home },
    	'/about': { component: About }
    })
    

    key是路径,value是组件

    <div class="list-group">
    	<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    	<a class="list-group-item" v-link="{ path: '/about'}">About</a>
    </div>
    

    v-link指令跳转到指定路径

    <router-view></router-view>
    

    启动路由

    var App = Vue.extend({})
    router.start(App, '#app')
    

    router.start(App, ‘#app’) 表示router会创建一个App实例

    创建组件:创建单页面应用需要渲染的组件
    创建路由:创建VueRouter实例
    映射路由:调用VueRouter实例的map方法
    启动路由:调用VueRouter实例的start方法

    使用v-link指令
    使用标签

    router.redirect

    html

    使用v-link指令
    使用标签

    router.redirect

    router.redirect({
    '/': '/home'
    })
    

    router.redirect方法用于为路由器定义全局的重定向规则

    路径/home/news和/home/message
    

    一个路径映射一个组件

    <div>
    <h1>home</h1>
    <p>{{msg}}</p>
    </div>
    
    <ul class="nav nav-tabs">
    <li>
    <a v-link="{path: '/home/news'}"> News </a>
    </li>
    
    </ul>
    

    组件构造器:

    var Home = Vue.extend({
    template: '#home',
    data: function(){
     return {
     msg: 'hello'
     }
     }
    })
    
    var News = Vue.extend({
     template: '#news'
    })
    
    var Message = Vue.extend({
     template: '#message'
    })
    

    路由映射

    router.map({
    '/home': {
    component: Home,
    // 定义子路由
    subRoutes: {
    '/news': {
     component: News
     },
     '/message': {
     component: Message
     }
     }
    },
    '/about': {
     component: About
    }
    })
    
     <!DOCTYPE html> 
     <html> 
     
      <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <link rel="stylesheet" href="//bootswatch.com/flatly/bootstrap.css"/> 
     <link rel="stylesheet" href="assets/css/custom.css" /> 
     </head> 
     
      <body> 
     <div id="app"> 
     <div class="row"> 
     <div class="col-xs-offset-2 col-xs-8"> 
     <div class="page-header"> 
     <h2>Router Basic - 02</h2> 
     </div> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-xs-2 col-xs-offset-2"> 
     <div class="list-group"> 
     <a class="list-group-item" v-link="{ path: '/home'}">Home</a> 
     <a class="list-group-item" v-link="{ path: '/about'}">About</a> 
     </div> 
     </div> 
     <div class="col-xs-6"> 
     <div class="panel"> 
     <div class="panel-body"> 
     <router-view></router-view> 
     </div> 
     </div> 
     </div> 
     </div> 
     </div> 
     
      <template id="home"> 
     <div> 
     <h1>Home</h1> 
     <p>{{msg}}</p> 
     </div> 
     <div> 
     <ul class="nav nav-tabs"> 
     <li> 
     <a v-link="{ path: '/home/news'}">News</a> 
     </li> 
     <li> 
     <a v-link="{ path: '/home/message'}">Messages</a> 
     </li> 
     </ul> 
     <router-view></router-view> 
     </div> 
     </template> 
     
      <template id="news"> 
     <ul> 
     <li>News 01</li> 
     <li>News 02</li> 
     <li>News 03</li> 
     </ul> 
     </template> 
     <template id="message"> 
     <ul> 
     <li>Message 01</li> 
     <li>Message 02</li> 
     <li>Message 03</li> 
     </ul> 
     </template> 
     
      <template id="about"> 
     <div> 
     <h1>About</h1> 
     <p>This is the tutorial about vue-router.</p> 
     </div> 
     </template> 
     
      </body> 
     <script src="js/vue.js"></script> 
     <script src="js/vue-router.js"></script> 
     <script> 
     var Home = Vue.extend({ 
     template: '#home', 
     data: function() { 
     return { 
     msg: 'Hello, vue router!' 
     } 
     } 
     }) 
     
      var News = Vue.extend({ 
     template: '#news' 
     }) 
     
      var Message = Vue.extend({ 
     template: '#message' 
     }) 
     
      var About = Vue.extend({ 
     template: '#about' 
     }) 
     
      var router = new VueRouter() 
     router.redirect({ 
     '/': '/home' 
     }) 
     router.map({ 
     '/home': { 
     component: Home, 
     // 定义子路由 
     subRoutes: { 
     '/news': { 
     component: News 
     }, 
     '/message': { 
     component: Message 
    
    <a v-link="'home'"> home </a>
    
    <a v-link="{ path: 'home' }">home</a>
    
    <a v-link="{name: 'detail', params: {id: '01'} }">home</a>
    
    $route.path 
    当前路由对象的路径
    
    $route.params 
    包含路由中的动态片段和全匹配片段的键值对
    
    $route.query 
    包含路由中查询参数的键值对
    
    $route.router 
    路由规则所属的路由器
    
    $route.name 
    当前路径的名字
    

    执行以下命令安装vue cli

    npm install -g vue-cli
    

    使用vue-webpack-simple模板

    运行Git Bash Here

    vue init webpack-simple my-webpack-simple-demo
    

    image.png

    image.png

    安装项目依赖

    cd my-webpack-simple-demo
    npm install
    

    运行示例

    npm run dev
    

    发布

    npm run build
    

    使用vue-webpack模板

    vue init webpack my-webpack-demo
    

    安装依赖

    cd my-webpack-demo
    npm install
    

    运行示例

    npm run dev
    

    发布

    npm run build
    

    请点赞!因为你的鼓励是我写作的最大动力!

    官方微信公众号

    吹逼交流群:711613774

    吹逼交流群

  • 相关阅读:
    hdu 5723 Abandoned country 最小生成树 期望
    OpenJ_POJ C16G Challenge Your Template 迪杰斯特拉
    OpenJ_POJ C16D Extracurricular Sports 打表找规律
    OpenJ_POJ C16B Robot Game 打表找规律
    CCCC 成都信息工程大学游记
    UVALive 6893 The Big Painting hash
    UVALive 6889 City Park 并查集
    UVALive 6888 Ricochet Robots bfs
    UVALive 6886 Golf Bot FFT
    UVALive 6885 Flowery Trails 最短路
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140186.html
Copyright © 2011-2022 走看看