há 10 meses atrás · 902da68e40
--- a/vue/vue初阶/16.数据监听.html
+++ b/vue/vue初阶/16.数据监听.html
@@ -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>
			
--- a/vue/vue初阶/17.组件.html
+++ b/vue/vue初阶/17.组件.html
@@ -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>