Vue · 前端題

## EJS模板引擎 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="../ejs.js"></script> </head> <body>  <div id="app"> </div> <script type="text/template" id="tmpl"> <div class="item"><%=text%></div> </script> <script type="text/javascript"> var text = 123; // 獲取模板 const tmpl = document.querySelector('#tmpl').innerHTML; // 把數據和模板綁定到一起，最后生成一個綁定好的html const html = ejs.render(tmpl, {text}); // 把html填充到頁面 document.querySelector('#app').innerHTML = html; </script> </body> </html> ``` <br> ## EJS 循環 ``` <script type="text/template" id="tmpl"> <% for(let i = 0; i < list.length; i++){ %> <div class="item"><%= list[i] %></div> <% } %> </script> ``` <br> ## 監聽變量 ``` var obj = {} var text = 'abc'; Object.defineProperty(obj, 'text', { // 獲取屬性的時候會執行get get(){ return text; }, // 給這個屬性賦值的時候就會執行set，val是賦的那個值 set(val){ text = val; console.log('數據修改，頁面要更新！'); } }) obj.text = 123; ``` <br> <br> ## 監聽變量結合EJS刷新頁面 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="../ejs.js"></script> </head> <body>  <div id="app"> </div> <script type="text/template" id="tmpl"> <div class="item"><%=text%></div> </script> <script type="text/javascript"> // var obj = {} // 聲明屬性方法1 // obj.text = 'abc'; var obj = {} var text = 'abc'; Object.defineProperty(obj, 'text', { // 獲取屬性的時候會執行get get() { return text; }, // 給這個屬性賦值的時候就會執行set，val是賦的那個值 set(val) { text = val; render(); } }); render(); // 把數據填充到頁面上 function render() { // 獲取模板 const tmpl = document.querySelector('#tmpl').innerHTML; // 把數據和模板綁定到一起，最后生成一個綁定好的html const html = ejs.render(tmpl, { text }); // 把html填充到頁面 document.querySelector('#app').innerHTML = html; } </script> </body> </html> ``` <br> ## 簡單Vue數據綁定實現 ``` function Vue(options) { this.$el = document.querySelector(options.el); this.$data = options.data; this.observer(this.$data); this.render(); } // 監聽數據 Vue.prototype.observer = function(data) { if(typeof data != 'object'){ return; } for(var k in data){ this.defineReactive(k, data[k], data); }; } Vue.prototype.defineReactive = function(k, v, data) { this.observer(v); Object.defineProperty(data, k, { get:() => { return v; }, set:(val) => { v = val; this.render(); } }); } Vue.prototype.render = function() { // 獲取模板 const tmpl = document.querySelector('#tmpl').innerHTML; // 把數據和模板綁定到一起，最后生成一個綁定好的html const html = ejs.render(tmpl, this.$data); // 把html填充到頁面 document.querySelector('#app').innerHTML = html; } ``` <br> ### html部分 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="../ejs.js"></script> <script type="text/javascript" src="./Vue.js"></script>  </head> <body>  <div id="app"> </div> <script type="text/template" id="tmpl"> <div class="item"><%=text%></div> <div class="item"><%=x.y%></div> </script> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ text:'abc', x:{ y:2 } } }); // render(); // 把數據填充到頁面上 </script> </body> </html> ``` <br> <br>