html
html [1990]----> html5 [2008.1.12]
css
css 1.0 1996
css 2.0 1998
css 3.0 2001
EcmaScript
1997年诞生
2015 EcmaScript 2015
2016 EcmaScript 2016 dart语言 vs javascript
随着前端项目的逻辑越来越复杂和难以维护,那么前端这边引进了后端的架构思想( MV* )
M Model 数据层
V View 视图层
C Controller 控制器 ( 业务逻辑 ) MVC
P Presenter 提出者( Controller 改名得来的 ) MVP
VM ViewModel 视图模型( 业务逻辑 VM 是 由 P 改名得来的) MVVM
Backbone.js MVP 2010.10
Angular.js( 1.0 ) MVC 2010.10
Angular.ts ( 2.0 ) MVC -> MVVM 2016 目前已经更新到了 Angular9 ( 也属于angular2.0 版本 )
Vue 1.0 MVVVM 2014/07
Vue 2.0 MVVM 2016/09
React 2012 不太认可前端MVC这种架构思想, 你可以将React单纯看做是MVC中V
github统计量 ( 国际使用量 )不代表大陆地区 单位是: K
angular.js angular.ts vue React
59.6 49.1 146 134
学习难度: Vue < React < Angular( 2.0 )
前端流行
移动 web && hybird app( 混合app )
app
1. native app ( 安卓 ios java ME)
2. webapp ( 应用在浏览器中的app )
3. Hybird app ( 混合app )
1. webapp 嵌入 第三方原生应用库( 可以访问原生设备(手机) 的接口权限,比如:照相机 )
2016年:
1. es6
2. vue2.0
3. angular2.0x
4. 微信小程序 / 微信小游戏
总结表:
[外链图片转存失败(img-gPXfNxp0-1566392980777)(E:\工作文件\2019-三阶段-授课笔记\2\img\前端框架时间图.png)]
前端js框架到底在干嘛! 为什么要用?
js框架帮助开发者写js逻辑代码,在开发应用的时候js的功能划分为如下几点:
渲染数据
[外链图片转存失败(img-fNS0MhFw-1566392980778)(E:\工作文件\2019-三阶段-授课笔记\2\img\购物车.png)]
操作DOM
[外链图片转存失败(img-riFZwnJo-1566392980779)(E:\工作文件\2019-三阶段-授课笔记\2\img\2019-01-11-03.gif)]
操作cookie等存储机制api
[外链图片转存失败(img-qYIFPwnJ-1566392980780)(E:\工作文件\2019-三阶段-授课笔记\2\img\cookie.png)]
在前端开发中
官网地址: 英文官网 中文官网
Vue.js框架项目介绍
作者: 尤雨溪
[外链图片转存失败(img-kr9HzB93-1566392980781)(E:\工作文件\2019-三阶段-授课笔记\2\img\尤雨溪.jpg)]-
Vue.js是尤雨溪的个人项目
Vue.js也是一个MVVM框架
Vue.js它是一个单项数据流的框架
Vue.js是一个Js渐进式框架
学习Vue的必要性
Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vue1.0悄悄的问世了,它的优雅,轻便也吸引了一部分用户,开始收到关注,16年中旬,VUE2.0问世,这个时候vue不管从性能上,还是从成本上都隐隐超过了react,火的一塌糊涂
学习vue是现在前端开发者必须的一个技能
MV*模式图示
书写第一个Vue案例
Vue深入响应式原理图
[外链图片转存失败(img-Gv4ZzXN4-1566392980781)(E:\工作文件\2019-三阶段-授课笔记\2\img\data.png)]
// Vue 底层原理
// 目的: 使用原生js来实现Vue深入响应式
var box = document.querySelector('.box')
var button = document.querySelector('button')
var data = {
name: 'Jick'
}
// 观察者对象
var observer = {...data}
// es5提供的api方法,这个方法不兼容ie8以及以下
// Object.defineProperty(对象,对象的属性,对象属性的修饰符 )
Object.defineProperty( data,'name',{
// get/set 统称为: '存储器'
get () {
return observer.name // 初始化赋值一个值给name属性
},
set ( val ) {
console.log( val )
box.innerHTML = val
}
})
button.onclick = function () {
data.name = "Rose"
}
box.innerHTML = data.name
Vue是通过数据劫持和事件的订阅发布来实现的,数据劫持指的是Vue通过observer观察者对象对data选项中的数据进行getter和setter设置【 Object.defineProperty 】,事件的订阅发布指的是Vue通过事件来监听,通知Vue进行视图更新
vuex的双向绑定原理?
采用了数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性是setter,getter,在数据变动时发布消息给订阅者并触发相应的监听回调
mustache 语法中是支持写js的
用法:
内容: 必须加 {{ js语法 }}
属性: 属性中属性值可以直接写js语法,并且属性值中的数据相当于全局变量
给一个标签加一个自定义属性/已有属性
img中的src就是已有属性
//data-index就是自定义属性 , web网页中建议我们使用data-形式来定义自定义属性
思考: Vue现在想要在html中使用自己的属性,并且要和他的语法和数据结合?
咋整?
分析: 如何我能够标识出哪一个属性是具有vue标志的那就好了,也就是属性前加 v
div>
-
研究它js的支持性
- 数据类型
- 市场上js的数据类型分类有两种?
- 第一种
- 初始数据类型: number string null undefine boolean
- 引用数据类型: Object [ function array … ]
- 第二种
- 基础数据类型: number string boolean
- 特殊数据类型: null undefine
- 复杂数据类型; Object [ function array …]
- 输出语法
- console
- alert
- 表达式 / 运算符
- 三元表达式
-
总结;
- null 和 undefined 是不会显示的,其他数据类型都是支持的,可以显示的
- 挂载在window身上的全局属性,我们都不能用的: 比如; console alert
- {{ }} 不写流程控制
- for
- if
- while
- do…while
- {{}} 支持三元表达式,同样也支持运算符
- 短路原则也是支持的
2.2 指令
指令的目的是做什么: 操作DOM
解释 : MVVM vm -> v 数据驱动
所以: 今天开始,我们不想二阶段一样操作dom,改成操作数据,数据要想操控DOM,那么我们需要依赖指令,因为指令是直接绑定在dom身上的
-
v-html 转义输出,也就是可以解析 xml 数据
-
v-text: 非转义输出,也就是无法解析 xml 类型数据
扩展:什么是 XML?
- XML 指可扩展标记语言(EXtensible Markup Language)。
- XML 是一种很像HTML的标记语言。
- XML 的设计宗旨是传输数据,而不是显示数据。
- XML 标签没有被预定义。您需要自行定义标签。
- XML 被设计为具有自我描述性。
- XML 是 W3C 的推荐标准。
XML和HTML的区别:
- XML 不是 HTML 的替代。
- XML 和 HTML 为不同的目的而设计:
- XML 被设计用来传输和存储数据,其焦点是数据的内容。
- HTML 被设计用来显示数据,其焦点是数据的外观。
- HTML 旨在显示信息,而 XML 旨在传输信息。
-
v-bind
-
将数据和属性进行单向数据绑定: 将vue中数据赋值给属性值
div>
div>
-
简写形式
<img v-bind:src="src" alt="">
<img :src="src" alt="">
-
类名绑定
-
用法
-
对象形式用法
p>
p>
p>
-
数组形式用法
p>
p>
p>
-
样式绑定
- 用法
-
对象形式用法
p>
p>
这里的styleObj包含了第一条里面的样式
-
数组形式用法
```html
data:{
}
```
2.3 条件渲染
-
v-if
-
v-else-if
-
v-else
-
v-show 条件展示
<h3> 条件渲染 - 单路分支 h3>
A p>
//这里的flag值为true则页面显示A
<h3> 条件渲染 - 双路分支 h3>
A p>
<p v-else > B p>
//这里默认true显示A,如果在root中修改flag值则view中A消失,B出现
<h3> 条件渲染 - 多路分支 h3>
美食 p>
游戏 p>
<p v-else> 睡觉 p>
//这里可以有多个 v-else-if 如果v-if v-else-if都不满足条件则显示v-else
<h3> 条件展示 h3>
条件展示 p>
//当不满足条件时,是p标签消失是在行内样式中加入了display:none
-
思考总结
思考: v-if vs v-show
1. 效果看起来一样
2. why Vue要出两个相似的指令?
v-if控制的是元素的存在与否
v-show控制的是元素的display:none属性
思考? 如果出事条件为假时? v-if v-show 谁的性能损耗较高?
v-show
总结: 项目中如何选择哪一个?
频繁切换用 v-show
如果不是很频繁的切换,那我们用 v-if
2.4 列表渲染
-
v-for 指令
<h3> 数组 h3>
<ul>
-
{{ item }} -- index{{ index }}
li>
ul>
<h3> 对象 h3>
<ul>
-
{{ item }} -- {{ key }} -- {{ index }}
li>
ul>
<h3> json h3>
<ul>
-
<span> 商品名称: {{ item.shop_name }} span>
<span> 商品价格: {{ item.price }} span>
li>
ul>
<h3> 循环嵌套 h3>
<ul>
-
<h3> 商品类型: {{ item.shop_name }} h3>
<ul>
-
<p> 制造商: {{ item.maker }} p>
li>
ul>
li>
ul>
<h3> 循环number / string h3>
{{ item }} p>
{{ item }} p>
-
总结:
-
- 列表渲染参数可以写三个,分别为 item key index
-
- 列表渲染,要在渲染的元素身上加一个key,作为这个元素唯一的标识 ,
- 思考: 这是为什么?
- 这个key最好是id,因为id唯一?思考: 为什么不能是index
-
- 循环嵌套式,参数名称是可以一致的
-
- in / of 都可以使用
2.5 事件处理器
-
v-on
v-on:click等同于**@click**
<button @click="argumentHandler( a,b,$event )"> 事件参数 button>
<button @mousedown="argumentHandler( a,b,$event )">testbutton>
new Vue({
el:"#app"
methods:{// methods称之为方法 ,里面存储是事件处理程序
argumentHandler(a, b, e) {
// 思考: 如果我想在这个方法中使用事件对象,咋整?
console.log(e.target)
console.log(a + b)
}
}
})
如果打印的是e则输出的是mouseevent鼠标事件,如果打印的是是e.target输出的就是点击的这个button按钮
-
事件修饰符
事件修饰符--修饰事件
<div class="big" @click.stop='bigHandler'>
<div class="middle" @click.stop="middleHandler">
<div class="small" @click.stop="smallHandler">div>
div>
div>
阻止事件冒泡:stopPropagation(),在vue中用.stop修饰click事件就能阻止事件冒泡
取消默认行为:.prevent 例:
<form v-on:submit.prevent="onSubmit">form>
<a v-on:click.stop.prevent="doThat">a>
<form v-on:submit.prevent>form>
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。
<a v-on:click.once="doThis">a>
-
按键修饰符
<input type="text" @keyUp.13="getValue">
<input type="text" @keyUp.enter="getValue">
Vue 提供了绝大多数常用的按键码的别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
2.6 表单控件绑定
- v-model
- 双向数据绑定
- VM 改变 V随之改变
- V改变, VM也随之改变
- v-model只用于表单
- 理由: v-model默认绑定value属性
- 技巧: 看到表单直接 v-model
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
text 和 textarea 元素使用 value 属性和 input 事件;
checkbox 和 radio 使用 checked 属性和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。
修饰符:
1.lazy
在v-model.lazy可以将input实时更新事件转变成change事件,失去焦点才会触发
2.trim
在v-model.trim自动过滤用户输入的首尾空白字符
3.number
在v-model.number自动将用户的输入值转为数值类型
你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
text 和 textarea 元素使用 value 属性和 input 事件;
checkbox 和 radio 使用 checked 属性和 change 事件;
select 字段将 value 作为 prop 并将 change 作为事件。
修饰符:
1.lazy
在v-model.lazy可以将input实时更新事件转变成change事件,失去焦点才会触发
2.trim
在v-model.trim自动过滤用户输入的首尾空白字符
3.number
在v-model.number自动将用户的输入值转为数值类型