创建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仿抽屉的更多相关文章

  1. vue-resource使用 (vue仿百度搜索)

    1.this.$http.get()方法2.this.$http.post()方法3.this.$http.jsonp()方法 (vue仿百度搜索) 在输入框中输入a, 然后在百度f12 ==> ...

  2. vue 仿今日头条

    vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...

  3. Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果

    探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...

  4. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  5. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  6. Vue仿微信app页面跳转动画

    10:14:11独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android.iOS.H5,稍加改动还可适配微信小程序. 在使用Vue.js开发移动端页面 ...

  7. 使用 vue 仿写的一个购物商城

    在学习了 vue 之后,决定做一个小练习,仿写了一个有关购物商城的小项目.下面就对项目做一个简单的介绍. 项目源码: github 项目的目录结构 -assets 与项目有关的静态资源,包括 css, ...

  8. vue 仿zTree折叠树

    需求: vue实现仿zTree折叠树,此文章仅作为记录文档. 实现: <template> <div class="line-tree"> <div ...

  9. Vue 仿B站滑动导航

    仿照B站制作的滑动导航功能,进行了部分优化,例如可定制默认选中元素,并将选中元素居中显示,可动态更改数据,可定制回调函数取的下标和选中元素内容,可根据需求制作N级联动 已开发成插件,使用方法与源码请前 ...

随机推荐

  1. checkbox在vue中的用法总结

    前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...

  2. 绕过边界防火墙之ICMP隧道、HTTP隧道、UDP隧道

    一.ICMP隧道 背景:已经通过某种手段拿到了园区网A主机的控制权,但是边界防火墙只放行该主机向外的ICMP流量,此时怎样才能让A主机和公网主机C建立TCP连接呢? 方案:将TCP包内容包裹在ICMP ...

  3. CRC 校验原理及步骤

    什么是 CRC 校验? CRC 即循环冗余校验码:是数据通信领域中最常用的一种查错校验码,其特征是信息字段和校验字段的长度可以任意选定.循环冗余检查(CRC)是一种数据传输检错功能,对数据进行多项式计 ...

  4. [翻译]EntityFramework Core 2.2 发布

    原文来源 TechViews 今天我们将推出EF Core 2.2的最终版本,以及ASP.NET Core 2.2和.NET Core 2.2 .这是我们的开源和跨平台对象数据库映射技术的最新版本. ...

  5. Java并发编程:JMM (Java内存模型) 以及与volatile关键字详解

    目录 计算机系统的一致性 Java内存模型 内存模型的3个重要特征 原子性 可见性 有序性 指令重排序 volatile关键字 保证可见性和防止指令重排 不能保证原子性 计算机系统的一致性 在现代计算 ...

  6. Web设计中打开新页面或页面跳转的方法

    一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打 ...

  7. python爬虫实例--网易云音乐排行榜爬虫

    网易云音乐,以前是有个api 链接的json下载的,现在没了, 只有音乐id,title , 只能看播放请求了, 但是播放请求都是加密的值,好坑... 进过各种努力, 终于找到了个大神写的博客,3.6 ...

  8. 【代码笔记】Web-ionic-toggle(切换开关)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. 02--css背景与边框--css揭秘

    背景与边框 一 半透明边框 rgba/hsla颜色 1.难题 假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body 的背景会从它的半透明边框透上来.我们最开始的尝试可能是这样的: #bo ...

  10. importToMbtiles

    import sqlite3, sys, logging, time, os, json, zlib, re ''' MapDBImporter-latest -f png -mName " ...