首頁 探索 說明
登入
lovecoding
/
VIP32
10
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

vue

e 1 年之前
父節點
b4dcfbe5f6
當前提交
c4d39c3869
共有 3 個文件被更改，包括 178 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 55 0
      vue2.0/vue初阶/17.数据代理.html
  2. 59 0
      vue2.0/vue初阶/18.组件.html
  3. 64 0
      vue2.0/vue初阶/19.嵌套组件.html

+ 55 - 0
vue2.0/vue初阶/17.数据代理.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">
 
+        <!-- 数据代理：
 
+                Object.defineProperty()中getter和setter
 
+                通过一个对象可以去代理另一个对象 并且可以修改其属性
 
+        -->
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        /**
 
+         * 参数一:所要代理的对象
 
+         * 参数二:所要代理的对象属性
 
+         * 参数三:配置对象
 
+         * 
+        */
 
+        // let obj = {
 
+        //     name:"赵家锐",
 
+        //     age: 26,
 
+        //     sex:"男"
 
+        // }
 
+        // Object.defineProperty(obj,'sex',{
 
+        //     value: "女"
 
+        // })
 
+        // Object.defineProperty(obj,'age',{
 
+        //     value: 33
 
+        // })
 
+        // console.log(obj)
 
+
 
+        let num = 10;
 
+        let obj = {
 
+            name: "雪怡",
 
+            sex: "女"
 
+        }
 
+        Object.defineProperty(obj,'age',{
 
+            get() {
 
+                console.log("读取")
 
+                return num;
 
+            },
 
+            set(value) {
 
+                console.log("设置");
 
+                num = value
 
+            }
 
+        })
 
+        console.log(obj)
 
+        console.log(obj.age)
 
+    </script>
 
+</body>
 
+</html>

+ 59 - 0
vue2.0/vue初阶/18.组件.html
查看文件 

@@ -0,0 +1,59 @@
 
+<!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">
 
+      <my-com></my-com>
 
+      <happy></happy>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+      // 全局组件：注册
 
+      /**
 
+       * Vue.component('组件名字'，{
 
+       *  组件模板
 
+       * })
 
+       */
 
+      Vue.component("my-com", {
 
+        template: `
 
+                <div>111</div>
 
+            `,
 
+      });
 
+      //局部注册 Vue.extend  
+      const blueMain = Vue.extend({
 
+        template:`
 
+                <ul>
 
+                    <li>今天1</li> 
+                    <li>今天2</li>
 
+                    <li>今天3</li>
 
+                    <li>今天4</li>
 
+                </ul>  
+        `
 
+      })
 
+      var app = new Vue({
 
+        data:{
 
+
 
+        },
 
+        methods: {
 
+            
+        },
 
+        created() {
 
+            
+        },
 
+        computed: {
 
+
 
+        },
 
+        watch: {
 
+
 
+        },
 
+        components: {
 
+            happy: blueMain
 
+        }
 
+      }).$mount("#app");
 
+    </script>
 
+  </body>
 
+</html>

+ 64 - 0
vue2.0/vue初阶/19.嵌套组件.html
查看文件 

@@ -0,0 +1,64 @@
 
+<!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">
 
+        <list3></list3>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        const list1 = Vue.extend({
 
+            name: "list1",
 
+            template: `
 
+                <span>{{name}}</span>
 
+            `,
 
+            data() {
 
+                return {
 
+                    name: "家锐"
 
+                }
 
+            },
 
+        })
 
+
 
+        const list2 = Vue.extend({
 
+            name: "list2",
 
+            template: `
 
+                <h2>解锁新人物</h2>
 
+                {{part1}}
 
+            `,
 
+            data() {
 
+                return {
 
+                    part1: "海灵"
 
+                }
 
+            }
 
+        })
 
+
 
+        var list3 = Vue.extend({
 
+            name:"list3",
 
+            template:`
 
+                <div>
 
+                    <list1></list1>
 
+                    <p>上课{{msg}}真香，睡醒我就唠嗑</p>    
+                </div>
 
+            `,
 
+            data() {
 
+                return {
 
+                    msg:"睡觉"
 
+                }
 
+            },
 
+            components: {
 
+                list1
 
+            }
 
+        })
 
+        var app = new Vue({
 
+            el:"#app",
 
+            components: {
 
+                list3
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>