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>