完成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')