Acasă Explorează Ajutor
Autentificare
lovecoding
/
vipAllDay
10
0
Bifurcare 0
Fisiere Probleme 0 Trageți solicitările 0 Wiki
Răsfoiți Sursa

vue

e 10 luni în urmă
părinte
c06b186412
comite
902da68e40
2 a modificat fișierele cu 106 adăugiri și 0 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. 48 0
      vue/vue初阶/16.数据监听.html
  2. 58 0
      vue/vue初阶/17.组件.html

+ 48 - 0
vue/vue初阶/16.数据监听.html
Vizualizați fișierul 

@@ -0,0 +1,48 @@
 
+<!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>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        let num = 10;
 
+        let obj = {
 
+            name: '小明',
 
+            sex: '男'
 
+        }
 
+        // target 代理的目标对象
 
+        // name 代理/监听 对象属性
 
+        // property 执行的代码块
 
+        // getter / setter
 
+        Object.defineProperty(obj,'age',{
 
+            get() {
 
+                console.log("读取");
 
+                return num;
 
+            },
 
+            set(value) {
 
+                console.log("写入")
 
+                num = value
 
+            }
 
+        })
 
+
 
+        console.log(obj.age)
 
+        obj.age = 20;
 
+        console.log(obj)
 
+
 
+
 
+
 
+        // var vm = new Vue({
 
+        //     el: "#app",
 
+        //     data: {
 
+        //         msg: "哈哈哈"
 
+        //     }
 
+        // })
 
+    </script>
 
+</body>
 
+</html>

+ 58 - 0
vue/vue初阶/17.组件.html
Vizualizați fișierul 

@@ -0,0 +1,58 @@
 
+<!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">
 
+        <haha></haha>
 
+        <aa></aa>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        // html => template
 
+        // css
 
+        // js
 
+        // components
 
+        /**
 
+         * Vue.component('组件名',{
 
+         *  template`
 
+         *      组件内容
 
+         * `
 
+         * })
 
+        */
 
+        // 1.全局组件
 
+        Vue.component('haha',{
 
+            template:`
 
+                <h1>哈哈哈哈</h1>
 
+            `
 
+        })
 
+
 
+
 
+        // 2.局部组件
 
+        const blue = Vue.extend({
 
+            template:`
 
+                <ul>
 
+                    <li>aaa</li>   
+                    <li>bbb</li>   
+                    <li>ccc</li>    
+                </ul>
 
+            `
 
+        })
 
+
 
+
 
+
 
+        var vm = new Vue({
 
+            el: "#app",
 
+            data: {
 
+                msg: "哈哈哈"
 
+            },
 
+            components:{
 
+                aa:blue
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>