VueComponent1

2 years ago · 80fa552902
parent 2bcd05f8a7
commit 80fa552902
6 changed files with 330 additions and 1 deletions
--- 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: '尚硅谷',
--- a/18_非单文件组件/1.基本使用.html
+++ 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>
--- a/18_非单文件组件/2.几个注意点.html
+++ 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>
--- a/18_非单文件组件/3.组件的嵌套.html
+++ 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>
--- a/18_非单文件组件/4.VueComponent.html
+++ 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>
--- a/18_非单文件组件/5.一个重要的内置关系.html
+++ 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>