首页 发现 帮助
登录
lovecoding
/
W250913
10
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

admin

fengchuanyu 15 小时之前
父节点
6845c76f47
当前提交
f10e783911
共有 10 个文件被更改，包括 463 次插入 和 0 次删除
分列视图 显示文件统计
  1. 28 0
      9_vue/11_vue组件定义.html
  2. 41 0
      9_vue/12_vue组件模板.html
  3. 40 0
      9_vue/13_vue组件事件.html
  4. 55 0
      9_vue/14_vue组件data.html
  5. 54 0
      9_vue/15_vue组件传参父给子.html
  6. 73 0
      9_vue/16_vue组件传参子给父.html
  7. 41 0
      9_vue/17_vue组件is.html
  8. 46 0
      9_vue/18_vue中的set方法.html
  9. 63 0
      9_vue/19_bootrap.html
  10. 22 0
      9_vue/20_vue使用checkbox.html

+ 28 - 0
9_vue/11_vue组件定义.html
查看文件 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <!-- 使用组件 -->
 
+        <box></box>
 
+    </div>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el: '#app',
 
+            // 定义组件
 
+            components:{
 
+                // 定义一个组件，组件的名称是box
 
+                "box":{
 
+                    // 组件的模板 组件的内容html部分
 
+                    template: '<div>这是一个组件</div>'
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 41 - 0
9_vue/12_vue组件模板.html
查看文件 

@@ -0,0 +1,41 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <!-- 使用组件 -->
 
+        <box></box>
 
+
 
+    </div>
 
+    <!-- 定义组件模板 -->
 
+    <template id="box-temp">
 
+        <!-- 组件的模板 组件的内容html部分 -->
 
+         <!-- 组件模板中只能有一个根元素 只能有一个最外层的容器 -->
 
+        <div>
 
+            <div>这是一个组件</div>
 
+            <h1>这是一个组件的h1标题</h1>
 
+        </div>
 
+    </template>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el: '#app',
 
+            // 定义组件
 
+            components: {
 
+                // 定义一个组件，组件的名称是box
 
+                "box": {
 
+                    // 引入模板
 
+                    template: '#box-temp'
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 40 - 0
9_vue/13_vue组件事件.html
查看文件 

@@ -0,0 +1,40 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <h1 @click="clickFun">这是一个vue实例的h1标题</h1>
 
+        <box></box>
 
+    </div>
 
+    <template id="box-temp">
 
+        <div>
 
+            <h1 @click="clickHandle">这是一个组件的h1标题</h1>
 
+        </div>
 
+    </template>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el: '#app',
 
+            methods:{
 
+                clickFun(){
 
+                    console.log("父组件h1被点击了");
 
+                }
 
+            },
 
+            components:{
 
+                "box":{
 
+                    template:"#box-temp",
 
+                    methods:{
 
+                        clickHandle(){
 
+                            console.log("子组件h1被点击了");
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 55 - 0
9_vue/14_vue组件data.html
查看文件 

@@ -0,0 +1,55 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <h1>num1:{{num1}}</h1>
 
+        <!-- 组件中的变量只能在组件的模板中使用 -->
 
+        <h1>num2:{{num2}}</h1>
 
+        <h1 @click="clickFun">这是一个vue实例的h1标题</h1>
 
+        <box></box>
 
+    </div>
 
+    <template id="box-temp">
 
+        <div>
 
+            <h1>{{num2}}</h1>
 
+            <h1 @click="clickHandle">这是一个组件的h1标题</h1>
 
+        </div>
 
+    </template>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el: '#app',
 
+            data:{
 
+                num1:10
 
+            },
 
+            methods:{
 
+                clickFun(){
 
+                    console.log("父组件h1被点击了");
 
+                    this.num1++;
 
+                }
 
+            },
 
+            components:{
 
+                "box":{
 
+                    // 组件data是一个函数且返回一个对象
 
+                    data(){
 
+                        return{
 
+                            num2:20
 
+                        }
 
+                    },
 
+                    template:"#box-temp",
 
+                    methods:{
 
+                        clickHandle(){
 
+                            console.log("子组件h1被点击了");
 
+                            this.num2++;
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 54 - 0
9_vue/15_vue组件传参父给子.html
查看文件 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <div>
 
+            <!-- 组件传参 父组件给子组件传参通过属性绑定的方式 -->
 
+            <!-- 父组件中可以使用变量的方式给子组件传参 但一定要用v-bind指令绑定 -->
 
+            <box v-bind:val="i"></box>
 
+            <box v-bind:val="j"></box>
 
+        </div>
 
+    </div>
 
+    <template id="box-temp">
 
+        <div>
 
+            <h1 @click="addFun">{{num2}}</h1>
 
+        </div>
 
+    </template>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el: '#app',
 
+            data:{
 
+                i:10,
 
+                j:20
 
+            },
 
+            components:{
 
+                "box":{
 
+                    template:"#box-temp",
 
+                    data(){
 
+                        return{
 
+                            // 子组件中可以使用props接受父组件传参
 
+                            // 为了避免直接修改props中的值 所以在data中重新定义一个属性接受props中的值
 
+                            num2:this.val
 
+                        }
 
+                    },
 
+                    // 组件传参 子组件接收父组件传参通过props属性的方式
 
+                    // 可以接受多个参数所以用数组的方式
 
+                    // props 接受的值不可以在子组件中修改
 
+                    props:["val"],
 
+                    methods:{
 
+                        addFun(){
 
+                            this.num2++
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 73 - 0
9_vue/16_vue组件传参子给父.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>
 
+    <style>
 
+        .box{
 
+            display: flex;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <div class="box">
 
+            <!-- 父组件接受子组件传递过来的通知 -->
 
+             <!-- 通过自定义事件的方式 -->
 
+              <!-- html中不识别驼峰命名 所以在子组件中触发事件时 要使用短横线命名 -->
 
+            <box v-bind:val="i" v-on:child-change="changeFun"></box>
 
+            <h1>+</h1>
 
+            <box v-bind:val="j"></box>
 
+            <div><h1>=</h1></div>
 
+            <div><h1>{{i+j}}</h1></div>
 
+        </div>
 
+    </div>
 
+    <template id="box-temp">
 
+        <div>
 
+            <h1 @click="addFun">{{num2}}</h1>
 
+        </div>
 
+    </template>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el: '#app',
 
+            data:{
 
+                i:10,
 
+                j:20
 
+            },
 
+            methods:{
 
+                // 父组件中定义的方法 用来接受子组件传递过来的通知
 
+                changeFun(a,b){
 
+                    console.log("子组件通知父组件了",a,b);
 
+                }
 
+            },
 
+            components:{
 
+                "box":{
 
+                    template:"#box-temp",
 
+                    data(){
 
+                        return{
 
+                            // 子组件中可以使用props接受父组件传参
 
+                            // 为了避免直接修改props中的值 所以在data中重新定义一个属性接受props中的值
 
+                            num2:this.val
 
+                        }
 
+                    },
 
+                    // 组件传参 子组件接收父组件传参通过props属性的方式
 
+                    // 可以接受多个参数所以用数组的方式
 
+                    // props 接受的值不可以在子组件中修改
 
+                    props:["val"],
 
+                    methods:{
 
+                        addFun(){
 
+                            this.num2++;
 
+                            // 子组件通知父组件
 
+                            // 子组件中可以使用$emit方法触发一个自定义事件
 
+                            // 会传递多个参数第一个参数是事件名 后面的参数是要传递的参数
 
+                            this.$emit("child-change",this.num2,this.val);
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 41 - 0
9_vue/17_vue组件is.html
查看文件 

@@ -0,0 +1,41 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <div>
 
+            <div is="box2"></div>
 
+            <!-- <box1></box1>
 
+            <box2></box2> -->
 
+        </div>
 
+    </div>
 
+    <template id="temp1">
 
+        <div>
 
+            <h1>组件一</h1>
 
+        </div>
 
+    </template>
 
+    <template id="temp2">
 
+        <div>
 
+            <h1>组件二</h1>
 
+        </div>
 
+    </template>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el: '#app',
 
+            components:{
 
+                "box1":{
 
+                    template:"#temp1"
 
+                },
 
+                "box2":{
 
+                    template:"#temp2"
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 46 - 0
9_vue/18_vue中的set方法.html
查看文件 

@@ -0,0 +1,46 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <ul>
 
+            <li v-for="(item,key) in obj">
 
+                {{key}}:{{item}}
 
+            </li>
 
+        </ul>
 
+        <button @click="addFun">添加</button>
 
+    </div>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el: '#app',
 
+            data: {
 
+                obj: {
 
+                    name: "张三",
 
+                    age: 18,
 
+                    sex: "男"
 
+                }
 
+            },
 
+            methods:{
 
+                addFun(){
 
+                    //  向obj中添加一个属性vue无法检测到
 
+                    console.log("click");
 
+                    // this.obj.name = "李四";
 
+                    // 向obj中添加一个属性
 
+                    // this.obj.school = "清华大学";
 
+                    // 解决方法：使用vue提供的set方法
 
+                    // Vue.set(要修改对象,属性名,属性值)
 
+                    Vue.set(this.obj,"school","清华大学");
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 63 - 0
9_vue/19_bootrap.html
查看文件 

@@ -0,0 +1,63 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">
 
+    <style>
 
+        .box{
 
+            width: 600px;
 
+            margin:0 auto;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <table class="table table-striped">
 
+  <thead>
 
+    <tr class="table-primary">
 
+      <th scope="col">#</th>
 
+      <th scope="col">First</th>
 
+      <th scope="col">Last</th>
 
+      <th scope="col">Handle</th>
 
+    </tr>
 
+  </thead>
 
+  <tbody>
 
+    <tr>
 
+      <th scope="row">1</th>
 
+      <td>Mark</td>
 
+      <td>Otto</td>
 
+      <td>@mdo</td>
 
+    </tr>
 
+    <tr>
 
+      <th scope="row">2</th>
 
+      <td>Jacob</td>
 
+      <td>Thornton</td>
 
+      <td>@fat</td>
 
+    </tr>
 
+    <tr>
 
+      <th scope="row">3</th>
 
+      <td colspan="2">Larry the Bird</td>
 
+      <td>@twitter</td>
 
+    </tr>
 
+  </tbody>
 
+</table>
 
+
 
+<input type="range" class="form-range" id="customRange1">
 
+<button type="button" class="btn btn-primary">Primary</button>
 
+<button type="button" class="btn btn-secondary">Secondary</button>
 
+<button type="button" class="btn btn-success">Success</button>
 
+<button type="button" class="btn btn-danger">Danger</button>
 
+<button type="button" class="btn btn-warning">Warning</button>
 
+<button type="button" class="btn btn-info">Info</button>
 
+<button type="button" class="btn btn-light">Light</button>
 
+<button type="button" class="btn btn-dark">Dark</button>
 
+
 
+<button type="button" class="btn btn-link">Link</button>    
+<input type="checkbox" checked="false">
 
+</div>
 
+
 
+<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
+</body>
 
+</html>

+ 22 - 0
9_vue/20_vue使用checkbox.html
查看文件 

@@ -0,0 +1,22 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <input type="checkbox" :checked="checked">
 
+    </div>
 
+    <script src="./js/vue.js"></script>
 
+    <script>
 
+        new Vue({
 
+            el: '#app',
 
+            data:{
 
+                checked:true
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>