js通过路由实现经典的三栏布局实例代码,0仿饿了么webapp单页面应用详细步骤

经典的三栏布局效果图如下:

部分截图

本文实例讲述了vue.js使用v-pre与v-html输出HTML操作。分享给大家供大家参考,具体如下:

图片 1

图片 2

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>www.jb51.net vue.js输出HTML</title>
  <!-- Vue.js -->
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
  <!--# 如果想显示{{ }}标签,而不进行替换,使用v-pre即可调过这个元素和它的子元素的编译过程 #-->
  {{ 这里的内容不会被编译 }}

</div>
</body>
</html>
<script>
  var myData = {
    link:'<a href="#" rel="external nofollow" >这是一个连接</a>'
  };
  var app = new Vue({
    el:'#app',
    data:myData
  })
</script>

三栏布局

图片 3

使用本站HTML/CSS/JS在线运行测试工具:,可得到如下测试运行效果:

•将布局的各个区块定义成组件

图片 4

图片 5

<template id="header">
  <div class="header bg-primary text-center">
    <h3>头部区域</h3>
  </div>
</template>
<template id="left">
  <div class="left bg-danger col-lg-2">
    <h3>侧边栏区域</h3>
  </div>
</template>
<template id="main">
  <div class="main bg-info col-lg-10">
    <h3>主体区域</h3>
  </div>
</template>

安装&&运行:

希望本文所述对大家vue.js程序设计有所帮助。

•用router-view显示相应的组件

1、安装 node:

您可能感兴趣的文章:

  • 用v-html解决Vue.js渲染中html标签不被解析的问题
  • vue学习笔记之指令v-text && v-html &&
    v-bind详解
  • vue 插值 v-once,v-text,
    v-html详解
  • web前端vue实现插值文本和输出原始html
  • VUE页面中加载外部HTML的示例代码
  • Vue 将后台传过来的带html字段的字符串转换为
    HTML
  • 在vue中,v-for的索引index在html中的使用方法
  • Vue使用枚举类型实现HTML下拉框步骤详解
  • Vue.js 中取得后台原生HTML字符串
    原样显示问题的解决方法
<div id="app">
  <router-view name="header"></router-view>
  <router-view name="left"></router-view>
  <router-view name="main"></router-view>
</div>

安装 git:

•定义路由规则

2、从我的仓库克隆代码:

发表评论

电子邮件地址不会被公开。 必填项已用*标注