项目整理——Vue电商平台开发

转自这位博主的文章

1.MVVM开发模式

Movel:数据模型,数据和业务逻辑在该层中定义

View:视图层,负责数据的展示

ViewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作


这种模式实现了Model和View的数据自动同步,当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。

2.v-if和v-show的区别

相同点:都可以动态控制dom元素的显示与隐藏

区别:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性为block或none控制显隐,元素还在

多次用v-show,一次性用v-if

3.组件内部实现双向数据绑定(父子组件传值)

①props+emit

父组件通过props传值给子组件,子组件通过emit触发某些事件从而在父组件中修改该数据

这位博主的文章写的很通俗易懂

注意:子组件不能直接改变父组件传来的值,解决方法在子组件的data中,重新赋值,然而需要用watch来监听父组件的值是否发生变化

prop的缺点:prop 是单向绑定的,当父组件的属性变化时,将传导给子组件,但是不会反过来;每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。

②v-model

4.监控某个属性值的变化

①watch属性进行监听

②用computed实现

5.Vue中给data中的对象属性添加一个新的属性时会发生什么?

导致:可能视图并没有更新

原因:在VUE实例创建的时候,这个属性没有声明,因此就没有被VUE转化为响应式的属性,就不会触发视图的更新。

解决方法:使用VUE的全局API,this.$set()

6.delete和vue.delete删除数组的区别

delete:被删除的元素的值被清掉,但是其他元素的键值不变

vue.delete:直接把该元素删除,后面的元素前移

7.优化

配置路由的时候,页面和组件使用懒加载的方式引入

8.前端如何优化网站性能

①减少HTTP请求数量

原因:浏览器与服务器通信时,需要经过三次握手,花费大量时间

具体做法:CSS精灵,将多张照片合并成一张;通过打包工具合并CSS文件或者JS文件;懒加载,一些内容可以等到用户操作的时候再加载内容

把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。这样处理图片后,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

②控制资源文件加载的优先级

CSS文件放在头部,JS文件放在底部

③利用浏览器缓存

将网络资源存储在本地,下次请求资源时,若本地存在该资源,则不需再去服务器重新请求

9.网页从输入网址到渲染完成经历什么过程

输入网址;

发送该地址到DNS服务器,并获取域名对应的web服务器对应的ip地址;

与web服务器建立TCP连接;

浏览器向web服务器发送HTTP请求;

web服务器响应请求,并返回指定URL的数据(或错误信息,或重定向的新的URL地址);

浏览器下载web服务器返回的数据及解析HTML源文件;

生成DOM树,解析CSS和JS,渲染页面,直至显示完成。

常见状态码

1XX:接收的请求正在处理

2XX:请求正常处理完毕

3XX:重定向状态码,需要进行附加操作以完成请求

4XX:客户端发生错误,服务器无法处理请求

5XX:服务端处理请求出错

具体状态码

200:请求成功;处理方式:获得响应的内容,进行处理

204:请求处理成功,但没有资源可返回

301:处理方式:重定向到一个永久性的URL

302:处理方式:重定向到一个临时性的URL

304:请求的资源没有更新,可直接使用客户端未过期的缓存

404:服务器上没有请求的资源

500:服务器内部错误

502:错误网关

503:由于临时的服务器维护或过载,暂时无法处理请求

10.axios

①安装:npm install axios --save

②在入口main.js中导入axios,并将axios写入vue的原型,便于使用

import  axios  from  'axios'

Vue.prototype.$ajax= axios

③this.axios.post('请求接口‘).then((response) => {

}).catch((response) => {

})

11.VUE中兄弟组件传值:用事件车bus

12.created和mounted的区别

created先于mounted

created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。

mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。

你可能感兴趣的:(项目整理——Vue电商平台开发)