صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
lovecoding
/
Web1020
10
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

admin

fengchuanyu 5 ماه پیش
والد
eaa69d1216
کامیت
0bf0abb57c
4فایلهای تغییر یافته به همراه133 افزوده شده و 5 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 14 1
      11_Vue基础/12_computed.html
  2. 33 3
      11_Vue基础/13_watch.html
  3. 38 0
      11_Vue基础/15_components.html
  4. 48 1
      11_Vue基础/9_v-model.html

+ 14 - 1
11_Vue基础/12_computed.html
مشاهده فایل 

@@ -12,6 +12,7 @@
 
             {{num1}} + {{num2}} = {{sum}}
 
         </h1>
 
         <button @click="changeFun">change</button>
 
+        <h1>{{sum2}}</h1>
 
     </div>
 
     <script>
 
         let app = new Vue({
 
@@ -22,7 +23,8 @@
 
             },
 
             methods: {
 
                 changeFun:function(){
 
-                    this.num2 = 100;
 
+                    // this.num2 = 100;
 
+                    this.sum2 = 1000;
 
                 }
 
             },
 
             computed:{
 
@@ -30,6 +32,17 @@
 
                     console.log("computed运行")
 
                     let thisSum = this.num1 + this.num2;
 
                     return thisSum;
 
+                },
 
+                sum2:{
 
+                    get(){
 
+                        console.log("get");
 
+                        return this.num1 + this.num2;
 
+                    },
 
+                    set(val){
 
+                        console.log(val);
 
+                        console.log("set")
 
+                        this.num1 = 998
 
+                    }
 
                 }
 
             }
 
         })

+ 33 - 3
11_Vue基础/13_watch.html
مشاهده فایل 

@@ -17,21 +17,51 @@
 
             data:{
 
                 num1:1,
 
                 num2:2,
 
-                sum:0
 
+                sum:0,
 
+                arr:[1,2,3],
 
+                obj:{
 
+                    a:1,
 
+                    b:{
 
+                        c:1
 
+                    }
 
+                }
 
             },
 
             methods:{
 
                 changeFun:function(){
 
-                    this.num2 = 100
 
+                    this.num2 = 100;
 
+                    this.num1 = 100;
 
+                    this.arr[1] = 100;
 
+                    // this.arr = ['a','b','c']
 
+                    this.obj.b = 100;
 
                 }
 
             },
 
             watch:{
 
                 num2:function(val,oldVal){
 
                     // watch 监听num2的变化 接受两个参数 val 代表新值 oldVal 代表旧值
 
-                    console.log(val,oldVal)
 
+                    console.log("num2=",val,oldVal)
 
                     this.sum = this.num1 + val
 
+                },
 
+                num1:{
 
+                    handler(val,oldVal){
 
+                        console.log("num1=",val,oldVal)
 
+                    }
 
+                },
 
+                arr:{
 
+                    handler(val,oldVal){
 
+                        console.log("arr=",val,oldVal)
 
+                    },
 
+                    deep:true
 
+                },
 
+                obj:{
 
+                    handler(val,oldVal){
 
+                        console.log("obj=",val,oldVal)
 
+                    },
 
+                    deep:true
 
                 }
 
             }
 
         })
 
+        
+
 
     </script>
 
 </body>
 
 </html>

+ 38 - 0
11_Vue基础/15_components.html
مشاهده فایل 

@@ -0,0 +1,38 @@
 
+<!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">
 
+        <h1>hello</h1>
 
+        <h1>hello</h1>
 
+
 
+        <box v-for="item in 20"></box>
 
+    </div>
 
+    <script>
 
+        let app = new Vue({
 
+            el: '#app',
 
+            data:{
 
+
 
+            },
 
+            components:{
 
+                box:{
 
+                  template:`<div class="box"></div>`  
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 48 - 1
11_Vue基础/9_v-model.html
مشاهده فایل 

@@ -8,16 +8,63 @@
 
 </head>
 
 <body>
 
     <div id="app">
 
-        <input type="text" v-model="inpVal">
 
+        <!-- .number 修饰符可以将值转换为数值型 -->
 
+        <!-- <input type="text" v-model.number="inpVal"> -->
 
+        <!-- .trim 修饰符 去除值左右两边的空格 -->
 
+        <!-- <input type="password" v-model.trim="inpVal"> -->
 
+        <!-- .lazy 修饰符 表示离开文本框的时候触发 -->
 
+        <!-- <input type="text" v-model.lazy="inpVal"> -->
 
+
 
+        <!-- change 属于js原生事件 表示离开文本框时内容发生变化则触发事件 -->
 
+        <!-- <input type="text" v-on:change="changeInp"> -->
 
+
 
+        <!-- blur 属于js原生事件 表示离开文本框时触发 -->
 
+        <!-- <input type="text" v-on:blur="changeInp"> -->
 
+        <!-- input 原生事件 表示文本框输入内容的时候触发 -->
 
+        <input type="text" v-on:input="changeInp($event)">
 
+
 
+
 
+
 
         <h1>文本框的值: {{inpVal}}</h1>
 
+        <button @click="getFun">getVal</button>
 
     </div>
 
     <script>
 
         let app = new Vue({
 
             el:"#app",
 
             data:{
 
                 inpVal:""
 
+            },
 
+            methods:{
 
+                changeInp(e){
 
+                    console.log(e.target.value)
 
+                    console.log("change");
 
+                },
 
+                getFun(){
 
+                    // console.log(this.inpVal+2);
 
+                    console.log(this.inpVal);
 
+                    // console.log(this.inpVal.trim());
 
+                }
 
             }
 
         })
 
+
 
+
 
+
 
+
 
+
 
+
 
+        // var obj = {
 
+        //     userName:"张三",
 
+        //     showName:function(){
 
+        //         console.log(this.userName);
 
+        //     },
 
+        //     sayHello(){
 
+        //         console.log("hello");
 
+        //     }
 
+        // }
 
+        // obj.showName();
 
+        // obj.sayHello();
 
+
 
+
 
     </script>
 
 </body>
 
 </html>