开始学习脚手架

2 years ago · 38b064a3b0
parent 80fa552902
commit 38b064a3b0
6 changed files with 190 additions and 1 deletions
--- a/18_非单文件组件/5.一个重要的内置关系.html
+++ b/18_非单文件组件/5.一个重要的内置关系.html
@ -2,9 +2,72 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title>Title</title>
+    <title>一个重要的内置关系</title>
+    <script type="text/javascript" src="../vue.js"></script>
 </head>
 <body>
+<div id="root">
+    <!--
+    1、 VueComponent.prototype.__proto__ === Vue.prototype
+    -->
+    <school></school>
+</div>
+<script type="text/javascript">
+    Vue.config.productionTip = false  // 组织开发环境提示
+
+    // 为Vue的原型添加属性x
+    Vue.prototype.x = 100
+
+    const school = Vue.extend({
+        name: 'school',
+        template: `
+          <div>
+          <h2>学校名称： {{ name }}</h2>
+          <h2>学校地址： {{ address }}</h2>
+          <button @click="showX">点击触发showX</button>
+          </div>`,
+        data() {
+            return {
+                name: "修仙学院",
+                address: "天山"
+            }
+        },
+        methods: {
+            showX() {
+                console.log(this)
+                console.log(this.x)
+            }
+        }
+    })
+
+    // 创建Vue实例
+    const vm = new Vue({
+        el: '#root',
+        data: {
+            msg: 'Hello',
+        },
+        components: {
+            school:school
+        }
+    })
+
+    // 创建一个Demo构造方法
+    function Demo() {
+        this.a = 1
+        this.b = 2
+    }
+
+    // 创建一个Demo实例
+    const d = new Demo()
+
+    console.log(Demo.prototype)  // 显示原型属性
+    console.log(d.__proto__)  // 隐式原型属性
+    console.log(Demo.prototype === d.__proto__)
+    Demo.prototype.x = 99
+    console.log(d.__proto__.x)
+    console.log(d.x)
+
+</script>

 </body>
 </html>
--- a/19_单文件组件/App.vue
+++ b/19_单文件组件/App.vue
@ -0,0 +1,19 @@
+<template>
+  <div>
+    <School/>
+    <Student/>
+  </div>
+</template>
+
+<script>
+  // 引入模块
+  import School from './School'
+  import Student from './Student'
+  export default {
+    name: "App",
+    components: {
+      School,
+      Student
+    }
+  }
+</script>
--- a/19_单文件组件/School.vue
+++ b/19_单文件组件/School.vue
@ -0,0 +1,49 @@
+<template>
+  <!--  组件的模板标签  -->
+  <div class="demo">
+    <h2>学校名称：{{ schoolName }}</h2>
+    <h2>学校地址：{{ address }}</h2>
+    <button @click="showName">点我提示学校名</button>
+  </div>
+</template>
+
+<!--  组件的交互标签  -->
+<script>
+  export default {
+    name: 'School',
+    data() {
+      return {
+        schoolName: '尚硅谷',
+        address: '北京'
+      }
+    },
+    methods: {
+      showName() {
+        alert(this.schoolName)
+      }
+    }
+  }
+
+// const school = Vue.extend({
+//   data() {
+//     return {
+//       schoolName: '尚硅谷',
+//       address: '北京'
+//     }
+//   },
+//   methods: {
+//     showName(){
+//       alert(this.schoolName)
+//     }
+//   }
+// })
+// 默认暴露
+// export default school
+</script>
+
+<!--  组件的样式标签  -->
+<style>
+.demo {
+  background-color: orange;
+}
+</style>
--- a/19_单文件组件/Student.vue
+++ b/19_单文件组件/Student.vue
@ -0,0 +1,36 @@
+<template>
+  <!--  组件的模板标签  -->
+  <div>
+    <h2>学生名称：{{ name }}</h2>
+    <h2>学生年龄：{{ age }}</h2>
+  </div>
+</template>
+
+<!--  组件的交互标签  -->
+<script>
+  export default {
+    name: 'Student',
+    data() {
+      return {
+        name: '小强',
+        age: '18'
+      }
+    },
+  }
+
+// const school = Vue.extend({
+//   data() {
+//     return {
+//       schoolName: '尚硅谷',
+//       address: '北京'
+//     }
+//   },
+//   methods: {
+//     showName(){
+//       alert(this.schoolName)
+//     }
+//   }
+// })
+// 默认暴露
+// export default school
+</script>
--- a/19_单文件组件/index.html
+++ b/19_单文件组件/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>联系单文件组件</title>
+</head>
+<body>
+<div id="root"></div>
+<script type="text/javascript" src="../vue.js"></script>
+<script type="text/javascript" src="./main.js"></script>
+</body>
+</html>
--- a/19_单文件组件/main.js
+++ b/19_单文件组件/main.js
@ -0,0 +1,10 @@
+import App from './App.vue'
+
+new Vue({
+    el: "#root",
+    template: `
+    <App/>`,
+    components: {
+        App
+    }
+})