From 80fa55290298e4dd7be451de9643a45384e651c9 Mon Sep 17 00:00:00 2001
From: roger <roger_sun@outlook.com>
Date: Tue, 10 Jan 2023 18:28:33 +0800
Subject: [PATCH] VueComponent1

---
 01_初识Vue/基础模板.html                |  2 +-
 18_非单文件组件/1.基本使用.html     | 79 ++++++++++++++++
 18_非单文件组件/2.几个注意点.html  | 67 +++++++++++++
 18_非单文件组件/3.组件的嵌套.html  | 94 +++++++++++++++++++
 18_非单文件组件/4.VueComponent.html     | 79 ++++++++++++++++
 .../5.一个重要的内置关系.html        | 10 ++
 6 files changed, 330 insertions(+), 1 deletion(-)
 create mode 100644 18_非单文件组件/1.基本使用.html
 create mode 100644 18_非单文件组件/2.几个注意点.html
 create mode 100644 18_非单文件组件/3.组件的嵌套.html
 create mode 100644 18_非单文件组件/4.VueComponent.html
 create mode 100644 18_非单文件组件/5.一个重要的内置关系.html
diff --git a/01_初识Vue/基础模板.html b/01_初识Vue/基础模板.html
index 09c4431..8936d13 100644
--- a/01_初识Vue/基础模板.html
+++ b/01_初识Vue/基础模板.html
@@ -13,7 +13,7 @@
   Vue.config.productionTip = false  // 组织开发环境提示
 
   // 创建Vue实例
-  const vmx = new Vue({
+  const vm = new Vue({
     el: '#root',
     data: {
       name: '尚硅谷',
diff --git a/18_非单文件组件/1.基本使用.html b/18_非单文件组件/1.基本使用.html
new file mode 100644
index 0000000..66e837b
--- /dev/null
+++ b/18_非单文件组件/1.基本使用.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>基本使用</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <h1>{{msg}}</h1>
+    <!--  第三步：编写组件标签  -->
+    <xuexiao></xuexiao>
+    <hr/>
+    <!--  第三步：编写组件标签  -->
+    <xuesheng></xuesheng>
+</div>
+<script type="text/javascript">
+    Vue.config.productionTip = false  // 组织开发环境提示
+
+    // 步骤一： 创建school组件
+    const school = Vue.extend({
+        // 组件定义时一定不要写el配置项，el项仅由一个Vue实例配置
+        //   el: '#root',
+        template: `
+          <div>
+            <h2>学校名称：{{schoolName}}</h2>
+            <h2>学校地址：{{address}}</h2>
+            <button @click="showName">点我提示学校名</button>
+          </div>
+        `,
+        data() {
+            return {
+                schoolName: '尚硅谷',
+                address: '北京'
+            }
+        },
+        methods: {
+            showName(){
+                alert(this.schoolName)
+            }
+        }
+    })
+    // 步骤一： 创建student组件
+    const student = Vue.extend({
+        template: `
+        <div>
+          <h2>学生姓名：{{studentName}}</h2>
+          <h2>学生年龄：{{age}}</h2>
+        </div>
+        `,
+        data() {
+            return {
+                studentName: '小强',
+                age: 18,
+            }
+        }
+    })
+
+    // 步骤二：注册组件（全局）
+    // Vue.component('xuexiao', school)
+    // Vue.component('xuesheng', student)
+
+
+    // 创建Vue实例
+    const vmx = new Vue({
+        el: '#root',
+        // 步骤二： 注册组件(局部注册)
+        components: {
+            xuexiao: school,
+            xuesheng: student
+        },
+        data: {
+            'msg': 'Hello Every One!'
+        }
+    })
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/18_非单文件组件/2.几个注意点.html b/18_非单文件组件/2.几个注意点.html
new file mode 100644
index 0000000..375b2ff
--- /dev/null
+++ b/18_非单文件组件/2.几个注意点.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>几个注意点</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <h1>{{msg}}</h1>
+    <xin-school></xin-school>
+    <simple></simple>
+<!--    <xin-school/> 脚手架环境下可用此格式-->
+</div>
+<script type="text/javascript">
+    Vue.config.productionTip = false  // 组织开发环境提示
+
+    // 创建school组件
+    const school = Vue.extend({
+        name: 'myschool',
+        template: `
+          <div>
+          <h2>学校名称：{{ schoolName }}</h2>
+          <h2>学校地址：{{ address }}</h2>
+          </div>
+        `,
+        data() {
+            return {
+                schoolName: '修仙学院',
+                address: '长白山'
+            }
+        }
+    })
+    // 组件创建简写模式(常用方式，Vue通过组件绑定来识别下面代码未组件)
+    const simple = {
+        name: 'simple',
+        template: `
+            <div>
+                <h2>{{ msg }}</h2>
+            </div>`,
+        data() {
+            return {
+                msg: "简写格式代码"
+            }
+        }
+    }
+
+    // 创建Vue实例
+    // 组件命令规则
+    // school
+    // School
+    // my-school
+    // MySchool (脚手架使用)
+    const vm = new Vue({
+        el: '#root',
+        data: {
+            msg: '欢迎来到修仙世界！'
+        },
+        components: {
+            XinSchool: school,
+            Simple: simple
+        }
+    })
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/18_非单文件组件/3.组件的嵌套.html b/18_非单文件组件/3.组件的嵌套.html
new file mode 100644
index 0000000..2bff2f7
--- /dev/null
+++ b/18_非单文件组件/3.组件的嵌套.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>组件的嵌套</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+
+</div>
+<script type="text/javascript">
+    Vue.config.productionTip = false  // 组织开发环境提示
+
+    // 创建student组件
+    const student = Vue.extend({
+        template: `
+          <div>
+          <h2>学生姓名：{{ studentName }}</h2>
+          <h2>学生年龄：{{ age }}</h2>
+          </div>
+        `,
+        data() {
+            return {
+                studentName: '小强',
+                age: 18,
+            }
+        }
+    })
+
+    // 创建school组件
+    const school = Vue.extend({
+        name: 'myschool',
+        template: `
+          <div>
+          <h2>学校名称：{{ schoolName }}</h2>
+          <h2>学校地址：{{ address }}</h2>
+          <student></student>
+          </div>
+        `,
+        data() {
+            return {
+                schoolName: '修仙学院',
+                address: '长白山'
+            }
+        },
+        components: {
+            student,
+        }
+    })
+
+    // 创建Hello组件
+    const hello = Vue.extend({
+        template: `
+          <div>
+          <h1> {{ hellomsg }} </h1>
+          </div>`,
+        data() {
+            return {
+                hellomsg: "Hello, 您好"
+            }
+        }
+    })
+
+    // app组件
+    const app = Vue.extend({
+        template: `
+          <div>
+          <hello></hello>
+          <school></school>
+          </div>
+        `,
+        components: {
+            school,
+            hello
+        }
+    })
+
+
+    // 创建Vue实例
+    const vm = new Vue({
+        el: '#root',
+        template: `<app></app>`,
+        data: {
+            msg: '欢迎来到修仙世界！'
+        },
+        components: {
+            app
+        }
+    })
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/18_非单文件组件/4.VueComponent.html b/18_非单文件组件/4.VueComponent.html
new file mode 100644
index 0000000..8dab1f3
--- /dev/null
+++ b/18_非单文件组件/4.VueComponent.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>VueComponent</title>
+    <script type="text/javascript" src="../vue.js"></script>
+</head>
+<body>
+<div id="root">
+    <h1>{{msg}}</h1>
+    <!--  第三步：编写组件标签  -->
+    <xuexiao></xuexiao>
+    <hr/>
+    <!--  第三步：编写组件标签  -->
+    <xuesheng></xuesheng>
+</div>
+<script type="text/javascript">
+    Vue.config.productionTip = false  // 组织开发环境提示
+
+    // 步骤一： 创建school组件
+    const school = Vue.extend({
+        // 组件定义时一定不要写el配置项，el项仅由一个Vue实例配置
+        //   el: '#root',
+        template: `
+          <div>
+            <h2>学校名称：{{schoolName}}</h2>
+            <h2>学校地址：{{address}}</h2>
+            <button @click="showName">点我提示学校名</button>
+          </div>
+        `,
+        data() {
+            return {
+                schoolName: '尚硅谷',
+                address: '北京'
+            }
+        },
+        methods: {
+            showName(){
+                alert(this.schoolName)
+            }
+        }
+    })
+    // 步骤一： 创建student组件
+    const student = Vue.extend({
+        template: `
+        <div>
+          <h2>学生姓名：{{studentName}}</h2>
+          <h2>学生年龄：{{age}}</h2>
+        </div>
+        `,
+        data() {
+            return {
+                studentName: '小强',
+                age: 18,
+            }
+        }
+    })
+
+    // 步骤二：注册组件（全局）
+    // Vue.component('xuexiao', school)
+    // Vue.component('xuesheng', student)
+
+
+    // 创建Vue实例
+    const vm = new Vue({
+        el: '#root',
+        // 步骤二： 注册组件(局部注册)
+        components: {
+            xuexiao: school,
+            xuesheng: student
+        },
+        data: {
+            'msg': 'Hello Every One!'
+        }
+    })
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/18_非单文件组件/5.一个重要的内置关系.html b/18_非单文件组件/5.一个重要的内置关系.html
new file mode 100644
index 0000000..566549b
--- /dev/null
+++ b/18_非单文件组件/5.一个重要的内置关系.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
