Vue
-
介绍前端的框架发展：
a、95 网景公司发布（Mocha，LiveScript）JavaScript，96年微软发布 VBScript JScript b、与此诞生的 PHP 95，ASP 96，JSP 99 发布 c、04-05期间 谷歌发布了 Gmail 和 GoogleMap 应用了大量的ajax，XMLHttpRequest 正式被W3C 纳入标准 d、08年前端大纪年：W3C 成立了HTML工作部门，发布了第一份正式草案；Google 发布 V8 引擎（10 乔布斯发布了一个文章：对Flash的思考） e、09年基于V8 引擎的Nodejs 发布 f、2014年10月28日，W3C 正式发布 HTML5.0 推荐标准（微信公众号、webApp） g、期间发布前端框架 knockout、backbone、angular、ember、metor、avalon、react（13年）、vue（14年） h、期间的前端 hybrid App 框架有：jQuery Mobile、Sencha Touch、cordova、Framework7、ionic、MUI H5+、ApiCloud、ReactNative、weex、flutter（dart.js） i、15年前端发布了 ES2015 -
App开发模式三种： Native：原生开发 -> Android（Java、kotin）和IOS（Object-C、swift） -> 之前没有热更新，后来加进去 Hybrid：混合开发 -> 使用Java和OC开发了一个底层框架，调用原生的WebView(就是手机内置的浏览器)来加载html页面，开发的时候，直接使用html+css+js来进行业务开发，可以直接运行到app；在发布系统的时候，可以不用用户下载，直接更新 web：webapp -> 混合开发可以调用系统底层接口，web不可以；web页面和代码文件都是部署到服务器上； -
2、前端开发框架分类 a、MVC: angular b、MVP: metor c、MVVM: Vue MVC：model 数据层，view 视图层，controller 控制器； MVP：present 代理层； MVVM：VM 数据绑定层； React 视图层
Vue 双向绑定原理
-
双向绑定原理 面试题：vue的双向绑定原理是什么？(不是v-model的原理) 在vue2.x中，通过Object.definePropty方法给数据对象属性添加getter和setter方法来进行数据劫持，在核心库通过监听器和订阅器来实现数据的实时更新；在setter方法中对要使用这个数据的dom节点的消息订阅，然后赋值的时候发布消息，然后dom节点根据消息来进行页面数据更新。Object.definePropty 它只能兼容到IE9 vue2.x的双向绑定有什么问题？ 需要递归遍历给所有数据属性添加setter和getter属性，性能就比较低下。是否可以用代理来实现。 在vue3.x中，使用的代理(Proxy)对象来实现的数据托管。 它不兼容IE const p = new Proxy(target, handler)
今日份练习 （显示模拟数据的 种类·温度·状态）
- 渲染数据，数据的总类，他的温度就做成随机的0~100的数吧，然后状态就更具温度显示不同的颜色状态（温度大于70危险，大于50小于70警告，小于50正常）
<div class="container">
<div class="page-header">
<h1>GPU<small>状态</small></h1>
</div>
<table class="table table-striped table-hover RTX">
<thead>
<tr>
<th>GPU型号</th>
<th>温度</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list">
<td>{{item.type}}</td>
<td>{{item.temp}}</td>
<td>
<!-- <span v-show="item.state=='危险'" style="color:red">{{item.state}}</span>
<span v-show="item.state=='警告'" style="color:orange">{{item.state}}</span>
<span v-show="item.state=='正常'" style="color:rgb(101, 168, 0)">{{item.state}}</span>
-->
<span v-if="item.state=='危险'" style="color:red">{{item.state}}</span>
<span v-else-if="item.state=='警告'" style="color:orange">{{item.state}}</span>
<span v-else="item.state=='正常'" style="color:rgb(101, 168, 0)">{{item.state}}</span>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
data: {
//mock数组
list: Array(200).fill().map((_, i) => {
let temp = Math.ceil(Math.random() * 100)
return { type: 'RTX309' + i, temp, state: temp > 70 ? '危险' : temp < 50 ? '正常' : '警告' }
})
}
}).$mount('.RTX')
</script>
总结小技巧
-
Array(20).fill() 快速填充数组 长度为20 -
{{}} 插值符号 -
el:"选择器" || .$mount('选择器') 都可以挂载DOM树
v-if 和 v-show的区别
他们都可以让元素显示与隐藏区别就在于一个是隐藏元素 ，一个是删除元素
-
v-if
-
v-if 他会让节点删除和生成 ，生成满足的节点，不满足的节点不会生成 -
v-show 他是通过display 来实现显示与隐藏的，元素节点会一直存在
