Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
Web1020
10
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

admin

fengchuanyu 3 сар өмнө
parent
0bf0abb57c
commit
251c5f9cb8
6 өөрчлөгдсөн 423 нэмэгдсэн , 0 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 52 0
      11_Vue基础/16_components模版结构.html
  2. 66 0
      11_Vue基础/17_components绑定事件.html
  3. 73 0
      11_Vue基础/18_components_data.html
  4. 77 0
      11_Vue基础/19_components_模版.html
  5. 93 0
      11_Vue基础/20_components_多组件.html
  6. 62 0
      11_Vue基础/21_components_组件穿参.html

+ 52 - 0
11_Vue基础/16_components模版结构.html
Файл харах 

@@ -0,0 +1,52 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+    <style>
 
+        .box {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin: 10px;
 
+        }
 
+
 
+        .box2 {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            margin: 10px;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <box></box>
 
+    </div>
 
+    <script>
 
+        let app = new Vue({
 
+            el: '#app',
 
+            data: {
 
+
 
+            },
 
+            components: {
 
+                box: {
 
+                    template: `
 
+                    <div class="container">
 
+                        <div class="box">
 
+                            <span>hello world</span>
 
+                        </div>
 
+                        <div class="box2"></div>
 
+                    </div>
 
+                    `
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 66 - 0
11_Vue基础/17_components绑定事件.html
Файл харах 

@@ -0,0 +1,66 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+    <style>
 
+        .box {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin: 10px;
 
+        }
 
+
 
+        .box2 {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            margin: 10px;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <box></box>
 
+        <button @click="appHandle">button</button>
 
+    </div>
 
+    <script>
 
+        let app = new Vue({
 
+            el: '#app',
 
+            data: {
 
+
 
+            },
 
+            methods: {
 
+                appHandle() {
 
+                    console.log('appHandle')
 
+                }
 
+            },
 
+            components: {
 
+                box: {
 
+                    template: `
 
+                    <div class="container">
 
+                        <div @click="box1Handle" class="box">
 
+                            <span>hello world</span>
 
+                        </div>
 
+                        <div @click="box2Handle" class="box2"></div>
 
+                    </div>
 
+                    `,
 
+                    methods: {
 
+                        box1Handle() {
 
+                            console.log('box1Handle')
 
+                        },
 
+                        box2Handle(){
 
+                            console.log('box2Handle')
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 73 - 0
11_Vue基础/18_components_data.html
Файл харах 

@@ -0,0 +1,73 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+    <style>
 
+        .box {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin: 10px;
 
+        }
 
+
 
+        .box2 {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            margin: 10px;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <box></box>
 
+        <button @click="appHandle">button</button>
 
+    </div>
 
+    <script>
 
+        let app = new Vue({
 
+            el: '#app',
 
+            data: {
 
+
 
+            },
 
+            methods: {
 
+                appHandle() {
 
+                    console.log('appHandle')
 
+                }
 
+            },
 
+            components: {
 
+                box: {
 
+                    template: `
 
+                    <div class="container">
 
+                        <div @click="box1Handle" class="box">
 
+                            <span>hello world</span>
 
+                        </div>
 
+                        <div @click="box2Handle" class="box2">
 
+                            {{num}}
 
+                        </div>
 
+                    </div>
 
+                    `,
 
+                    data() {
 
+                        return{
 
+                            num:"abcd"
 
+                        }
 
+                    },
 
+                    methods: {
 
+                        box1Handle() {
 
+                            console.log('box1Handle')
 
+                        },
 
+                        box2Handle(){
 
+                            console.log('box2Handle')
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 77 - 0
11_Vue基础/19_components_模版.html
Файл харах 

@@ -0,0 +1,77 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+    <style>
 
+        .box {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin: 10px;
 
+        }
 
+
 
+        .box2 {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            margin: 10px;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <box></box>
 
+        <button @click="appHandle">button</button>
 
+    </div>
 
+
 
+    <template id="box-temp">
 
+        <div class="container">
 
+            <div @click="box1Handle" class="box">
 
+                <span>hello world</span>
 
+            </div>
 
+            <div @click="box2Handle" class="box2">
 
+                {{num}}
 
+            </div>
 
+        </div>
 
+    </template>
 
+
 
+    <script>
 
+        let app = new Vue({
 
+            el: '#app',
 
+            data: {
 
+
 
+            },
 
+            methods: {
 
+                appHandle() {
 
+                    console.log('appHandle')
 
+                }
 
+            },
 
+            components: {
 
+                box: {
 
+                    template: "#box-temp",
 
+                    // 组件内部的data是个函数 内部返回一个对象
 
+                    data() {
 
+                        return{
 
+                            num:"abcd"
 
+                        }
 
+                    },
 
+                    methods: {
 
+                        box1Handle() {
 
+                            console.log('box1Handle')
 
+                        },
 
+                        box2Handle(){
 
+                            console.log('box2Handle')
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 93 - 0
11_Vue基础/20_components_多组件.html
Файл харах 

@@ -0,0 +1,93 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+    <style>
 
+        .box {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin: 10px;
 
+        }
 
+
 
+        .box2 {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            margin: 10px;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <list-content></list-content>
 
+        <box></box>
 
+        <button @click="appHandle">button</button>
 
+    </div>
 
+
 
+    <template id="box-temp">
 
+        <div class="container">
 
+            <div @click="box1Handle" class="box">
 
+                <span>hello world</span>
 
+            </div>
 
+            <div @click="box2Handle" class="box2">
 
+                {{num}}
 
+            </div>
 
+        </div>
 
+    </template>
 
+
 
+    <template id="list-content">
 
+        <div class="container">
 
+            <ul>
 
+                <li>1</li>
 
+                <li>2</li>
 
+                <li>3</li>
 
+                <li>4</li>
 
+                <li>5</li>
 
+            </ul>
 
+        </div>
 
+    </template>
 
+
 
+    <script>
 
+        let app = new Vue({
 
+            el: '#app',
 
+            data: {
 
+
 
+            },
 
+            methods: {
 
+                appHandle() {
 
+                    console.log('appHandle')
 
+                }
 
+            },
 
+            components: {
 
+                listContent:{
 
+                    template:"#list-content",
 
+                },
 
+                box: {
 
+                    template: "#box-temp",
 
+                    // 组件内部的data是个函数 内部返回一个对象
 
+                    data() {
 
+                        return{
 
+                            num:"abcd"
 
+                        }
 
+                    },
 
+                    methods: {
 
+                        box1Handle() {
 
+                            console.log('box1Handle')
 
+                        },
 
+                        box2Handle(){
 
+                            console.log('box2Handle')
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 62 - 0
11_Vue基础/21_components_组件穿参.html
Файл харах 

@@ -0,0 +1,62 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+    <style>
 
+        .box {
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            margin: 10px;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <box val="helloworld"></box>
 
+        <box v-bind:val="str"></box>
 
+    </div>
 
+
 
+    <template id="box-temp">
 
+        <div class="container">
 
+            <div @click="box1Handle" class="box">
 
+                <span>{{val}}</span>
 
+            </div>
 
+        </div>
 
+    </template>
 
+   
+    <script>
 
+        let app = new Vue({
 
+            el: '#app',
 
+            data: {
 
+                str:"lovecoding"
 
+            },
 
+            components: {
 
+                box: {
 
+                    template: "#box-temp",
 
+                    // 组件内部的data是个函数 内部返回一个对象
 
+                    data() {
 
+                        return{
 
+                            num:"abcd"
 
+                        }
 
+                    },
 
+                    // props用来接受传递进来的参数
 
+                    props:["val"],
 
+                    methods: {
 
+                        box1Handle() {
 
+                            console.log(this.val)
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>