vue和vue-router结合构建web页面

最新推荐文章于 2024-06-23 20:46:47 发布

置顶

码农转地产中介

最新推荐文章于 2024-06-23 20:46:47 发布

阅读量728

点赞数 1

分类专栏： web前端文章标签： vue VueRouter router.go

本文链接：https://blog.csdn.net/jeofey/article/details/79909369

版权

本文介绍如何结合Vue.js和Vue Router构建Web页面，重点在于数据双向绑定和DOM操作的简化。通过示例代码展示从列表页到详情页的跳转，涉及的关键文件包括first_demo.vm、first_demo_api.js、first_demo_router.js和first_demo_components.js。

摘要由CSDN通过智能技术生成

简介

核心：采用模板语法来声明式地将数据渲染进 DOM 的系统；
特色：实现数据的双向绑定-->数据和 DOM 已经被建立了关联，所有东西都是响应式的,省去了传统JavaScript对dom的遍历，事件绑定等过程。

vue文档：https://cn.vuejs.org/v2/guide/
vue-router文档：https://cn.vuejs.org/v2/guide/migration-vue-router.html

库：
https://unpkg.com/vue-router/dist/vue-router.js
https://cdn.jsdelivr.net/npm/vue

尝试 Vue.js 的工具：https://jsfiddle.net/chrisvfritz/50wL7mdz/

示例

简单的演示vue和vue-router在项目中的使用，关键操作在代码中会有相应注释说明

实现列表页和详情页的关键代码

vm页面

first_demo.vm 这里用velocity模板引擎

<template id="list" style="display: none;">#*列表模板*#
    <div id="allQuery">#*引入查询条件*#
        <form>
            <row>
                <pinput type="text" :value.sync="query.id" placeholder="请输入编号"></pinput>
                <pinput type="text" :value.sync="query.name" placeholder="请输入姓名"></pinput>
                <pinput type="text" :value.sync="query.age" placeholder="请输入年龄"></pinput>
            </row>
        </form>
    </div>
    <table border="1">#*列表内容*#
        <tr>
            <th>编号</th>
            <th>姓名