zoukankan      html  css  js  c++  java
  • 一个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>Document</title>
        <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <router-link to="/goodslist">商品列表</router-link>
            <router-link to="/newslist">新闻列表</router-link><br/>
    
            <!-- 路由出口 -->
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </body>
    <script>
        //1.定义好组件
        const newsListComponent = Vue.extend({
            template:'<ul><li>美、英、法联合侵略叙利亚</li><li><router-link to="/newsdetail/10001">乘客用钢笔把飞机逼停了</router-link></li><li><router-link to="/newsdetail/10006">韩国戴眼镜女主播</router-link></li></ul>'
        })
    
        const goodsListComponent = {
            template:'<ul><li>卫龙辣条</li><li>麻辣小龙虾</li><li>长沙臭豆腐</li></ul>'
        }
    
        //新闻详情组件
        //拿到路径中的参数,可以参考https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html
        const newsDetailComponent = {
            template:'<div>我是新闻详情 传递过来的id是 {{$route.params.newsId}}</div>'
        }
    
        //2.创建路由对象,设置路由规则
        const router = new VueRouter({
            routes:[//其中routes很容易写错,建议拷贝
                { path: '/', redirect: '/goodslist' },
                {path:'/goodslist',component:goodsListComponent},
                {path:'/newslist',component:newsListComponent},
                {path:'/newsdetail/:newsId',component:newsDetailComponent}
            ]
        })
    
        //3. 注入到根实例,从而让整个应用都有路由功能
        const vm = new Vue({
            router
        }).$mount('#app')
    </script>
    </html>

    很好理解吧

  • 相关阅读:
    swift3.0 运行时获取类的属性
    Runloop与autoreleasePool联系
    iOS 加载Image的两种方式
    iOS strong与weak的使用
    iOS 自定义layer的两种方式
    iOS 手势识别
    iOS Quartz2D画图
    iOS 通知的使用
    UITableViewController
    UITableView移动
  • 原文地址:https://www.cnblogs.com/DZzzz/p/8951425.html
Copyright © 2011-2022 走看看