Home Explore Help
Sign In
lovecoding
/
web0331
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

vue

bailing 1 week ago
parent
ef97dd6426
commit
689e7f936f
5 changed files with 126 additions and 5 deletions
Split View Show Diff Stats
  1. 1 1
      8.vue/初阶/11.列表渲染.html
  2. 62 0
      8.vue/初阶/19.嵌套组件.html
  3. 7 4
      8.vue/初阶/2.vue导入.html
  4. 55 0
      8.vue/初阶/20.数据代理.html
  5. 1 0
      8.vue/初阶/5.vue内置指令.html

+ 1 - 1
8.vue/初阶/11.列表渲染.html
View File 

@@ -30,7 +30,7 @@
 
             {{item}}
 
          </div>
 
          <!-- 字符串 -->
 
-         <div v-for="(item,index) in str" :key="index">
 
+         <div v-for="(item,index) in str"  :key="index" @click="aa">
 
             {{item}}
 
          </div>
 
     </div>

+ 62 - 0
8.vue/初阶/19.嵌套组件.html
View File 

@@ -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>
 
+    <style>
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="app">
 
+        <list2></list2>
 
+    </div>
 
+    <script src="./vue.js"> </script>
 
+    <script>
 
+
 
+        const list1 = Vue.extend({
 
+            template: `
 
+                <h1>{{msg}}</h1>
 
+            `,
 
+            data() {
 
+                return {
 
+                    msg: "Hello"
 
+                }
 
+            }
 
+            // data:{
 
+            //     msg:""
 
+            // }
 
+        })
 
+        const list2 = Vue.extend({
 
+            template: `
 
+              <div>
 
+                    <list1></list1>
 
+                    <h1>{{msg}}</h1>
 
+              </div>
 
+            `,
 
+            data() {
 
+                return {
 
+                    msg: "哇"
 
+                }
 
+            },
 
+            components: {
 
+                list1
 
+            }
 
+            // data:{
 
+            //     msg:""
 
+            // }
 
+        })
 
+
 
+
 
+        var vm = new Vue({
 
+            el: "#app",
 
+            components: {
 
+                list2
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 7 - 4
8.vue/初阶/2.vue导入.html
View File 

@@ -1,10 +1,12 @@
 
 <!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">
 
         <!-- 排版 -->
 
@@ -12,11 +14,12 @@
 
     <script src="./vue.js"></script>
 
     <script>
 
         // 实例化
 
-       var app = new Vue({
 
-        // 挂载
 
-        el:"#app"
 
-       });
 
+        var app = new Vue({
 
+            // 挂载
 
+            el: "#app"
 
+        });
 
     </script>
 
 
 </body>
 
+
 
 </html>

+ 55 - 0
8.vue/初阶/20.数据代理.html
View File 

@@ -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">
 
+        <!-- 
+            通过一个对象可以去代理另一个对象
 
+            并且 可以修改 其属性
 
+            Object.definProperty()
 
+            getter 劫持数据
 
+            setter 修改数据
 
+        -->
 
+    </div>
 
+    <script src="./vue.js"> </script>
 
+    <script>
 
+
 
+        let obj = {
 
+            name:"雪王",
 
+            sex: "男"
 
+        }
 
+
 
+
 
+        // Object.defineProperty(obj,"sex",{
 
+        //     value:"女"
 
+        // })
 
+
 
+        let number = 10
 
+        Object.defineProperty(obj,"age",{
 
+            get(){
 
+                console.log("看")
 
+                return number;
 
+            },
 
+            set(value){
 
+                console.log("新")
 
+                number = value
 
+            }
 
+        })
 
+        setTimeout(()=>{
 
+
 
+        obj.age = 100;
 
+        console.log(obj,'obj2')
 
+        },3000)
 
+        console.log(obj,'obj')
 
+
 
+     
+    </script>
 
+</body>
 
+
 
+</html>

+ 1 - 0
8.vue/初阶/5.vue内置指令.html
View File 

@@ -14,6 +14,7 @@
 
                 v-model 常用语表单标签 
                     视图 => 数据
 
                     数据 => 视图
 
+                双向数据绑定
 
     -->
 
     <div id="app">
 
         <p v-text='text1'>{{text1}}</p>