开始学习脚手架

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
    }
 })