夜光带你走进Vue.js（四）擅长的领域

夜光序言：

你注定是我一生的沧桑。正如枯枫散落，难以抚平心伤。笑靥如花，我用一生追逐，而我，却成就了你手上无法自拔的倒刺，一碰就痛，多余又长在你的肉里。

 

 

 

 

 

 

正文：

实现下面这个功能，点击首页和新闻分别可以跳转到所在页面嗯

 

功能二：点击列表里面一条数据，会跳转到另外一个页面

首先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>这是一个首页组件&#45;&#45;&#45;&#45;{{msg}}</h2>
    <v-home></v-home>  &lt;!&ndash;使用组件，在模板中&ndash;&gt;
    <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;