夜光序言:
你注定是我一生的沧桑。正如枯枫散落,难以抚平心伤。笑靥如花,我用一生追逐,而我,却成就了你手上无法自拔的倒刺,一碰就痛,多余又长在你的肉里。
正文:
实现下面这个功能,点击首页和新闻分别可以跳转到所在页面嗯
功能二:点击列表里面一条数据,会跳转到另外一个页面
首先package.js如下:
{
"name": "demo",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "",
"license": "MIT",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"axios": "^0.19.0",
"vue": "^2.5.11",
"vue-resource": "^1.5.1",
"vue-router": "^3.1.3"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
其次:APP.vue
<template>
<div id="app">
<!-- {{msg}}
<h2>这是一个首页组件----{{msg}}</h2>
<v-home></v-home> <!–使用组件,在模板中–>
<br>
<br>
<hr>
<v-news></v-news>-->
<!--动态路由的出口-->
<router-link to="/home">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-view></router-view>
</div>
</template>
<script>
/*import Home from './components/Home.vue'; //1. 首先引入这个组件
import News from './components/News.vue';*/
export default {
name: 'app',
data () {
return {
msg: 'hy', //文本框里面输入的内容样式
}
},
/* components:{ //2. 挂载组件
'v-home':Home, //这样就可以了嗯
'v-news':News //这样就可以了嗯
}*/
}
</script>
<style>
</style>
其次:Home.vue
<template>
<!--这个里面写的是html-->
<div id="home"> <!--所有的东西需要被一个根节点包含起来,否则会有错误-->
我是首页组件
<br>
<button @click="emitNews()">给news组件广播数据</button>
<br>
<hr>
<ul>
<li v-for="(item,key) in list">
<router-link :to="'/pcontent?id='+key">{{key}}--{{item}}</router-link>
</li>
</ul>
</div>
</template>
<script>
import Header from './Header.vue';
import Life from './Lify.vue';
/* import Axios from 'axios';*/
// 引入vue实例 , 发送广播
import VueEvent from '../model/VueEvent.js';
export default {
data(){
return{
msg: '夜光:我是一个home组件',
list:['商品1111','商品2222','商品3333']
}
},methods:{
emitNews(){
//广播数据
VueEvent.$emit('to-news',this.msg)
}
},
mounted() {
//监听广播的数据
VueEvent.$on('to-home',function (data) {
console.log(data)
})
}
}
</script>
<style lang="css" scoped>
/* 这个里面主要写一些样式*/
/*scoped表示作用域*/
</style>
其次:news.vue
<template>
<div id="news">
我是新闻组件
<br>
<button @click="emitHome()">给home组件广播数据</button>
<br>
<hr>
<ul>
<li v-for="(item,key) in list">
<router-link :to="'/content/'+key">{{key}}--{{item}}</router-link>
</li>
</ul>
</div>
</template>
<script>
// 引入vue实例 , 接受广播
import VueEvent from '../model/VueEvent.js';
export default {
data(){
return {
msg: '夜光:我是一个新闻组件',
list:['1111','2222','3333']
}
},
methods:{
emitHome(){
//hy:广播
VueEvent.$emit('to-home',this.msg)
},
requestData(){//hy: jsonp请求的话,后台api接口要支持jsonp
var api = 'http://api.wangshuwen.com/getNewsNews';
this.$http.jsonp(api).then((response)=> {
console.log(response);
// 注意:用到this,要注意this指向
this.list = response.status;
},function (err) {
console.log(err)
})
}
},
mounted() {
VueEvent.$on('to-news',function (data) {
console.log(data);
});
this.requestData();
}
}
</script>
<style>
</style>
//hy:封装操作localStorage本地化存储的方法
//这是一个模块化的东西
//node.js基础有详细的讲解,这里我就直接写出来了
var storage={
set(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
},remove(key){
localStorage.removeItem(key);
}
};
export default storage;
import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;