VUE组件学习。

Advanced/vuedemo02/package.json

@@ -26,6 +26,7 @@
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.7",
     "file-loader": "^1.1.4",
+    "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
     "vue-loader": "^13.0.5",
     "vue-template-compiler": "^2.4.4",

Advanced/vuedemo02/src/App.vue

@@ -1,11 +1,12 @@
 <template>
 	<div id="app">
-		<h2>{{msg}}</h2>
-		<div v-bind:title="title1">鼠标瞄上去看下效果</div>
+		<h2 class="css_title">{{msg}}</h2>
+		<v-home></v-home>
 	</div>
 </template>
 
 <script>
+	import Home from './components/Home.vue';
 	export default {
 		name: 'app',
 		data() {
@@ -16,12 +17,21 @@
 		},
 		methods: {
 
+		},
+		components: {
+			'v-home': Home,
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.css_title2 {
-		color: #008000;
+/*css  局部作用域  scoped*/
+	#app {
+		.css_title {
+			color: red;
+		}
+		.css_title2 {
+			color: #008000;
+		}
 	}
-</style>
+</style>

Advanced/vuedemo02/src/components/Home.vue

@@ -0,0 +1,35 @@
+<template>
+	<!-- 所有的内容要被根节点包含起来 -->
+	<div id="home">
+		<v-header ref="header"></v-header>
+		<hr>
+		首页组件
+		<button @click="getChildData()">获取子组件的数据和方法</button>
+	</div>
+</template>
+
+<script>
+	import Header from './Home/Header.vue';
+	export default {
+		data() {
+			return {
+				msg: '我是一个home组件',
+				title: '首页111'
+			}
+		},
+		components: {
+
+			'v-header': Header
+		},
+		methods: {
+			run() {
+				alert('我是Home组件的run方法');
+			},
+			getChildData() {
+				//父组件主动获取子组件的数据和方法：
+				// alert(this.$refs.header.msg);
+				this.$refs.header.run();
+			}
+		}
+	}
+</script>

Advanced/vuedemo02/src/components/Home/Header.vue

@@ -1,11 +1,32 @@
 <template>
-	<div>
-		Header
-	</div>
+    <div>
+        <h2>我是头部组件</h2>
+          <button @click="getParentData()">获取子组件的数据和方法</button>
+    </div>
 </template>
-
 <script>
-</script>
-
-<style>
-</style>
+    
+export default{
+    data(){
+        return{
+            msg:'子组件的msg'
+        }
+    },
+    methods:{
+       
+            run(){
+                alert('我是子组件的run方法')
+            },
+            getParentData(){
+                /*
+                子组件主动获取父组件的数据和方法：  
+                this.$parent.数据
+                this.$parent.方法
+                
+                */
+                // alert(this.$parent.msg);
+                //this.$parent.run();
+            }
+    }
+}
+</script>

Advanced/vuedemo02/src/main.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
+
 //导入路由
 import routers from './router/routers'
 import VueRouter from 'vue-router'
 import * as Api from './common/api'
+import * as common from './common/common'
 
 new Vue({
   el: '#app',
   render: h => h(App)
-})
+})

Advanced/vuedemo02/src/model/storage.js

@@ -0,0 +1,16 @@
+//封装操作localstorage本地存储的方法   模块化的文件
+// nodejs  基础
+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;
+
+

Advanced/vuedemo02/src/router/routers.js

@@ -20,7 +20,8 @@ const routers = [
             tabShow: true,
             keepAlive: true
         }
-    }
+    },
+	{ path: '*', redirect: '/home' }   /*默认跳转路由*/
 ]
 
 export default routers