Web前端开发概述
MVVM (Model-View-ViewModel)模式包括3个核心部分
Model(模型): 由核心的业务逻辑产生的数据对象,例如从数据库取出并做特定处理后得到的数据。
View(视图): 即用户界面。
ViewModel(视图模型): 用于链接匹配模型和视图的专用模型。
数据的双向绑定:
命令行控制台:
dir:显示一个目录中的文件列表
cd:进入一个目录
md:创建一个目录
安装Vue.js:
所谓CDN,是指内容分发网络。通过构建分布式的内容分发网络,用户可以就近获取所需内容,这样可以提高用户访问的响应速度和命中率。
Vue.js开发基础
Vue.js 遵循 MVVM模式,因此使用Vue.js的亥心工作就是创建一个“视图模型”(ViewModel)对象,并将它作为“视图’(View)和业务“模型”(Model)之间的桥梁。Vue.js 的做法是提供Vue类型,开发者可通通过创建一个Vue类型的实例来实现视图模型的定义。
Vue根实例
方法属性:
使用模板字符串的另一个优点是,可以跨行,直接妾产生多行文本;而普通字符串不能跨行,如果要定义多行字符串,那么必须通过将多个单行字符串拼接才能能获得。
统
属性绑定:
v-bind 指令有一种简写形式,即省略“v-bind”,ī而只保留想要绑定的属性前面的冒号。例如,下面的代码就使用了v-bind指令的简写形式。
<ul :class="sex">
<li>姓名 : {{ name }}</li>
<li>城市 : {{ city }}</li>
</ul>
插入HTML片段:
如果插入的不是单纯的文本内容,而是带有HTML结构,就要改用v-html指令了
Vue实例的的生命周期:
beforeCreate(): 在实例创建之前调用,
created(): 在实例创建之后调用,此时尚未开始DOM 编编译 beforeMount():在挂载开始之前调用。
mounted(): 在实例被挂载后调用,这时页面的相关DO M节点已被新创建的 vm.$el 替换。它相当于JavaScript中的window.onload()方法。
beforeUpdate(): 每次页面中有元素需要更新时,在更新前就会调用beforeUpdate()钩子函数。 updated(): 每次页面中有元素需要更新时,在更新完之后就会调用updated()钩子函数。 beforeDestroy(): 在销毁实例前调用,此时实例仍然有交效。
destroyed():在实例被销毁之后调用。
计算属性与侦听器
计算属性:
计算属性其实分为setter和getter两个属性
顾名思义setter是设置值,getter是获取值。
在正常使用计算属性的时候默认是只有getter,不需要额外定义。
但是我们可以在需要的时候设置setter,用在属性更新时触发。
在vue中我们通常使用get和set来定义getter和setter
计算属性的缓存特性:
必须有return,只求结果,有级存。
第一次调用计算属性时,会产生一个结果,这个结果会被缓存起来,后面每次用这个属性都是从缓存里取。
当它的依赖项发生改变,会重新计算得到一个结果,再缓存起来。
对数组进行侦听:
当通过下列方法操作或更改数组时,变化可以被侦听到。这些方法包括:
- push() 尾部添加
- pop() 尾部删除
- unshift() 头部添加
- shift() 头部删除
- splice() 删除、添加、替换
- sort() 排序
- reverse() 逆序
事件处理
事与事件流:
总体来说,浏览器产生事件流分为三个阶段。从最外层的根元素html开始依次向下。称为“捕获阶段”;到达目标元素时,称为“到达阶段”;然后依次向上回到根元素,称为“冒泡阶段”。
【事件】
JavaScript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作
使得网页具备互动性。
常见的有加载事件、鼠标事件。
【件流】
由于DOM是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,
就存在一个顺序问题,这就涉及到了事件流。
页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。
【js的事件流三阶段】
事件捕捉阶段(capture phrase): 事件开始由顶层对象触发,然后逐级向下传播,直到目标元素;
处于目标阶段(target phrase): 处于绑定事件的元素上;
事件冒泡阶段(bubbling phrase): 事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素
(事件捕获是从上到下,而事件冒泡,是从下到上。)
事件冒泡和事件捕获分别由微软和网景公司提出,是为了解决页面中事件流(事件发生顺序)的问题。
【事件冒泡】
微软提出了名为事件冒泡(event bubbling)的事件流。
事件冒泡可以形象的比喻成把一颗石头投入水中,泡泡会一直从水底冒出水面。
也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。
因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是
button-div-body-html-document。
【事件捕获】
网景提出另一种事件流名为事件捕获(event capturing)
与事件冒泡相反,事件会从最外层开始发生,直到具体的元素。
因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document
事件修饰符:
.stop
.stop 事件修饰符会自动调用stopPropagation()方法,从而阻止上事件的继续传播。
.self
.self事件修饰符的作用是,仅当一个事件的| 目标(event.target)是当前元素自身时,才会触发处理函数。
.capture
.capture
.capture 事件修饰符的作用是改变事件流的默认处理方式,从默认的冒泡方式改为捕获方式
.once
.once事件修饰符的含义是只触发一次事件。
.prevent
.prevent
在添加了.prevent 事件修饰符以后,程序就会会自动调用event.preventDefault(方法,从而取消事件触发的默认行为。
按键修饰符:
与按键相关的三个事件:
- keydown:按下键时触发。
- keypress:按下有值的键时触发,而当按下Ctrl、Alt、 Shift、Meta 这样无值的键时,keypress事件不会触发。对于有值的键,按下时先触发keydown事件,再触发keypress 事件。
- keyup: 松开键时触发。
表单绑定
文本框:
文本框对应HTML的input元素,将 type 设置为text,然后使用v-model指令即可将文本框与数据模型中指定的属性绑定起来
修饰符:
.lazy
对于文本输入框,默认情况下,v-model指令在每次input 事件触发后,都会对文本输入框的值与数据进行同步
.number
如果希望用户输入的值能够自动转为数值类型,那么可以给v-model指令添加.number修饰符
.trim
如果要自动过滤用户输入的首尾空白字符
结构渲染
用 key属性管理可复用的元素:
Vue.js会尽可能高效地渲染元素,并且通常会复用已有元素而不是重新构造DOM结构
总结如下:
- v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件侦听器被销毁重建。
- v-if是“惰性”的,即如果在进行初始渲染时条件为假,则不会渲染,直到条件第一次变为时,才开始渲染相应的DOM 结构。
- v-show相对简单,不管初始条件是什么,元素总是会被渲染,并且还会基于CSS的display 属性进行切换。
- 通常,v-if的切换开销更大,而v-show 的衤初始渲染开销更大。因此,如果切换非常频繁,建议优先使用v-show;而如果在运行时条件很少改变,则使用v-if效果较好。
列表渲染指令v-for:
v-for有些类似于JavaScript中的for...of循环结构肉。在Vue.js中,v-for指令几乎每个项目都会用到
v-for中的key属性有何作用:
当Vue.js 更新使用v-for渲染的列表时,默认使用“就地更新”的策略。如果数据项的顺序发生了改变,Vue.js不会移动DOM元素来匹配数据项页的顺序,而是就地更新每个元素,并且确保它们在每个索引位置得到正确渲染。
将v-for与v-if一同使用时的注意事项:
v-for的优先级比 v-if 高,v-for每次迭代时都会执行一次v-if,这会造成不必要的计算开销