Vue仿抽屉
创建VUE项目的步骤:
npm install vue-cli -g
vue init webpack myproject
cd myproject
npm run dev
组件:它是可扩展的html
里面包括:
<template></template>
<script></script>
<style></style>
VUE框架的特性:能够实现热重载
import 和require的区别:
import 一定要放在文件顶部
它相当于一个指针引用了文件,并没有把文件包含进来了,需要调用时才引入
require:
可以放在文件中任何位置
它是把文件直接包含进来
设置文件路由的流程:
1)建立组件(.vue文件)
2)配置路由(index.js 文件中的配置)
3)<router-link></router-link>
4)<router-view></router-view>
5)import 包名 from ‘’组件路径''
6)components 进行注册
vue-resource:实现异步数据加载(已经弃用)
axios:实现异步数据加载
Vue组件的生命周期:
1)定义Vue对象并实例化
2)created函数
3)编译muban
4)把HTML元素渲染到页面当中
5)mounted函数
6)如果有元素的更新,就执行updated函数
7)销毁实例
代码如下:(有点小bug)
ALL.vue
<template>
<div class='box'>
<ul>
<li v-for='item in arr'>
<div class='p1'>
<router-link :to="{path:'/detail',query:{ids:item.id}}">{{item.content}} </router-link>
</div>
<div class="p2">
<img :src="item.imgUrl">
</div>
</li> </ul> </div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
arr: []
}
},
mounted () {
var url = '../../static/news.json'
var self=this;
this.$axios.get(url)
.then(function (response) {
console.log(response.data.result.data);
self.arr = response.data.result.data;
})
.catch(function (error) {
console.log(error);
})
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: 0;
} li {
display: inline-block;
margin: 0 10px;
} a {
color: #42b983;
}
.box{
width: 980px;
}
.p1{
float:left;
width:780px;
}
img{
float:right;
}
</style>
DETAIL.vue
<template>
<div class="box">
<h1>我是详情页{{id}}</h1>
<ul>
<li>
<div class="p1">
{{obj.content}}
</div>
<div class="p2">
<img :src="obj.imgUrl">
</div>
</li> </ul>
</div>
</template> <script>
export default {
name: 'Detail',
data () {
return { obj: {},
id: this.$route.query.ids
}
},
mounted () {
var url = '../../static/news.json'
var self = this;
this.$axios.get(url, {
params: {id: this.id}
})
.then(function (response) {
console.log(response.data.result.data[0])
self.obj = response.data.result.data[0];
})
.catch(function (error) {
console.log(error); })
} }
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
} ul {
list-style-type: none;
padding: 0;
} li {
display: inline-block;
margin: 0 10px;
} a {
color: #42b983;
}
</style>
DUANZI.vue
<template>
<div>
<h>我是段子</h>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
NaveList.vue
<template>
<div>
<router-link to='/'>首页</router-link>
<router-link to='/news'>新闻</router-link>
<router-link to='/duanzi'>段子</router-link>
<router-link to='/detail'>详情页</router-link>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
NEWS.vue
<template>
<div>
<h>我是新闻</h>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ALL from '@/components/All'
import NEWS from '@/components/NEWS'
import DUANZI from '@/components/DUANZI'
import DETAIL from '@/components/DETAIL' Vue.use(Router) export default new Router({
routes: [
{
path: '/ll',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/',
name: 'ALL',
component: ALL
},
{
path: '/news',
name: 'news',
component: NEWS
}
,
{
path: '/duanzi',
name: 'duanzi',
component: DUANZI
},
{
path: '/detail',
name: 'detail',
component: DETAIL
}
]
})
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<NaveList></NaveList> <router-view></router-view>
</div>
</template> <script>
import NaveList from './components/NaveList'
export default {
name: 'App',
components: {NaveList} }
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios' Vue.prototype.$axios = axios //Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {App},
template: '<App/>'
})
Vue仿抽屉的更多相关文章
- vue-resource使用 (vue仿百度搜索)
1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...
- vue 仿今日头条
vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...
- Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果
探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...
- vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...
- vue聊天室|h5+vue仿微信聊天界面|vue仿微信
一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...
- Vue仿微信app页面跳转动画
10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...
- 使用 vue 仿写的一个购物商城
在学习了 vue 之后,决定做一个小练习,仿写了一个有关购物商城的小项目.下面就对项目做一个简单的介绍. 项目源码: github 项目的目录结构 -assets 与项目有关的静态资源,包括 css, ...
- vue 仿zTree折叠树
需求: vue实现仿zTree折叠树,此文章仅作为记录文档. 实现: <template> <div class="line-tree"> <div ...
- Vue 仿B站滑动导航
仿照B站制作的滑动导航功能,进行了部分优化,例如可定制默认选中元素,并将选中元素居中显示,可动态更改数据,可定制回调函数取的下标和选中元素内容,可根据需求制作N级联动 已开发成插件,使用方法与源码请前 ...
随机推荐
- checkbox在vue中的用法总结
前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...
- 绕过边界防火墙之ICMP隧道、HTTP隧道、UDP隧道
一.ICMP隧道 背景:已经通过某种手段拿到了园区网A主机的控制权,但是边界防火墙只放行该主机向外的ICMP流量,此时怎样才能让A主机和公网主机C建立TCP连接呢? 方案:将TCP包内容包裹在ICMP ...
- CRC 校验原理及步骤
什么是 CRC 校验? CRC 即循环冗余校验码:是数据通信领域中最常用的一种查错校验码,其特征是信息字段和校验字段的长度可以任意选定.循环冗余检查(CRC)是一种数据传输检错功能,对数据进行多项式计 ...
- [翻译]EntityFramework Core 2.2 发布
原文来源 TechViews 今天我们将推出EF Core 2.2的最终版本,以及ASP.NET Core 2.2和.NET Core 2.2 .这是我们的开源和跨平台对象数据库映射技术的最新版本. ...
- Java并发编程:JMM (Java内存模型) 以及与volatile关键字详解
目录 计算机系统的一致性 Java内存模型 内存模型的3个重要特征 原子性 可见性 有序性 指令重排序 volatile关键字 保证可见性和防止指令重排 不能保证原子性 计算机系统的一致性 在现代计算 ...
- Web设计中打开新页面或页面跳转的方法
一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打 ...
- python爬虫实例--网易云音乐排行榜爬虫
网易云音乐,以前是有个api 链接的json下载的,现在没了, 只有音乐id,title , 只能看播放请求了, 但是播放请求都是加密的值,好坑... 进过各种努力, 终于找到了个大神写的博客,3.6 ...
- 【代码笔记】Web-ionic-toggle(切换开关)
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 02--css背景与边框--css揭秘
背景与边框 一 半透明边框 rgba/hsla颜色 1.难题 假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body 的背景会从它的半透明边框透上来.我们最开始的尝试可能是这样的: #bo ...
- importToMbtiles
import sqlite3, sys, logging, time, os, json, zlib, re ''' MapDBImporter-latest -f png -mName " ...