完成props的学习

2 years ago · f42eb51742
parent dfdde18ab2
commit f42eb51742
12 changed files with 230 additions and 1 deletions
--- a/19_单文件组件/index.html
+++ b/19_单文件组件/index.html
@ -2,7 +2,7 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
-    <title>联系单文件组件</title>
+    <title>单文件组件</title>
 </head>
 <body>
 <div id="root"></div>
--- a/20_脚手架/vue_code/01.src_ref属性解析/App.vue
+++ b/20_脚手架/vue_code/01.src_ref属性解析/App.vue
@ -0,0 +1,40 @@
+<template>
+  <div>
+    <h2 v-text="msg" ref="title"></h2>
+    <h2 v-text="msg" id="title2"></h2>
+    <button @click="showDOM">点击打印上面DOM</button>
+    <School ref="sch"/>
+    <School id="sch2"/>
+  </div>
+</template>
+
+<script>
+import School from "./components/School.vue";
+export default {
+  name: "App",
+  components: {
+    School
+  },
+  data() {
+    return {
+      msg: "Hello!"
+    }
+  },
+  methods:{
+    showDOM() {
+      // 获取html标签对应的DOM
+      console.log("title", this.$refs.title)
+      // 获取html标签对应的DOM
+      console.log("title2", document.getElementById('title2'))
+      // 获取VueComponent对应实例
+      console.log("sch", this.$refs.sch)
+      // 获取html标签对应的DOM
+      console.log("sch2", document.getElementById('sch2'))
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/20_脚手架/vue_code/01.src_ref属性解析/assets/logo.png
+++ b/20_脚手架/vue_code/01.src_ref属性解析/assets/logo.png
--- a/20_脚手架/vue_code/01.src_ref属性解析/components/School.vue
+++ b/20_脚手架/vue_code/01.src_ref属性解析/components/School.vue
@ -0,0 +1,24 @@
+<template>
+  <div class="school">
+    <h2>学校名称：{{ name }}</h2>
+    <h2>学校地址：{{ address }}</h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "School",
+  data() {
+    return {
+      name: "修仙学院",
+      address: "天山"
+    }
+  }
+}
+</script>
+
+<style scoped>
+.school {
+  background-color: gray
+}
+</style>
--- a/20_脚手架/vue_code/01.src_ref属性解析/main.js
+++ b/20_脚手架/vue_code/01.src_ref属性解析/main.js
@ -0,0 +1,9 @@
+import Vue from "vue";
+import App from "./App";
+
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App)
+}).$mount('#app')
--- a/20_脚手架/vue_code/02.src_props配置/App.vue
+++ b/20_脚手架/vue_code/02.src_props配置/App.vue
@ -0,0 +1,16 @@
+<template>
+  <div>
+    <Student name="小强" sex="男" :age="18"/>
+  </div>
+</template>
+
+<script>
+import Student from "./components/Student.vue";
+
+export default {
+  name: "App",
+  components: {
+    Student
+  }
+}
+</script>
--- a/20_脚手架/vue_code/02.src_props配置/assets/logo.png
+++ b/20_脚手架/vue_code/02.src_props配置/assets/logo.png
--- a/20_脚手架/vue_code/02.src_props配置/components/Student.vue
+++ b/20_脚手架/vue_code/02.src_props配置/components/Student.vue
@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h1>{{ msg }}</h1>
+    <h2>学生名称：{{ name }}</h2>
+    <h2>学生性别：{{ sex }}</h2>
+    <h2>学生年龄：{{ localAge + 1 }}</h2>
+    <button @click="changeAge">点击年龄+1</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Student",
+  data() {
+    return {
+      msg: "欢迎",
+      localAge: this.age
+    }
+  },
+  methods: {
+    changeAge() {
+      this.localAge++
+    }
+  },
+
+  // 数组形式
+  // props: ['name', 'age', 'sex']
+
+  // 简单对象形式(限定数据类型)
+  // props: {
+  //   name: String,
+  //   age: Number,
+  //   sex: String
+  // }
+
+  //  完全对象形式
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    age: {
+      type: Number,
+      default: 99
+    },
+    sex: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
--- a/20_脚手架/vue_code/02.src_props配置/main.js
+++ b/20_脚手架/vue_code/02.src_props配置/main.js
@ -0,0 +1,9 @@
+import Vue from "vue";
+import App from "./App";
+
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App)
+}).$mount('#app')
--- a/20_脚手架/vue_code/src/App.vue
+++ b/20_脚手架/vue_code/src/App.vue
@ -0,0 +1,16 @@
+<template>
+  <div>
+    <Student name="小强" sex="男" :age="18"/>
+  </div>
+</template>
+
+<script>
+import Student from "./components/Student.vue";
+
+export default {
+  name: "App",
+  components: {
+    Student
+  }
+}
+</script>
--- a/20_脚手架/vue_code/src/components/Student.vue
+++ b/20_脚手架/vue_code/src/components/Student.vue
@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h1>{{ msg }}</h1>
+    <h2>学生名称：{{ name }}</h2>
+    <h2>学生性别：{{ sex }}</h2>
+    <h2>学生年龄：{{ localAge + 1 }}</h2>
+    <button @click="changeAge">点击年龄+1</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Student",
+  data() {
+    return {
+      msg: "欢迎",
+      localAge: this.age
+    }
+  },
+  methods: {
+    changeAge() {
+      this.localAge++
+    }
+  },
+
+  // 数组形式
+  // props: ['name', 'age', 'sex']
+
+  // 简单对象形式(限定数据类型)
+  // props: {
+  //   name: String,
+  //   age: Number,
+  //   sex: String
+  // }
+
+  //  完全对象形式
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    age: {
+      type: Number,
+      default: 99
+    },
+    sex: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
--- a/20_脚手架/vue_code/src/main.js
+++ b/20_脚手架/vue_code/src/main.js
@ -0,0 +1,9 @@
+import Vue from "vue";
+import App from "./App";
+
+new Vue({
+    components: {
+        App
+    },
+    render: h => h(App)
+}).$mount('#app')