六月份月度总结

Vue知识点总结

首先我们本月对Vue进行了一个全面的复习，而且还学习了一些以前没有学习过的知识点，并且讲师帮我们对Vue从新认识了一遍。下面说一下我们本月学习的Vue知识。

[if !supportLists]1.     [endif]首先我们本月先学习了Vue的手机端。对手机端的需要用到一些功能以及其相应的组件进行了复习，我们还对其在使用中会遇到的一些问题进行了问题进行了详细的讲解和分析。

Vue是国人开发的一款前端框架，他是利用mvvm模式开发的说一下mvvm：

M：model，模型，在这里指的是数据模型

V：view，视图，在这里指的就是我们写的页面

VM：ViewModel，是数据模型和视图连接的纽带

[if !supportLists]一．  [endif]Vue的优点：

1.轻量级的框架，他是只关注视图层。

2.双向数据绑定，vue数据上相绑定是通过数据劫持实现的，所用到的方法是Object.defineProperty();他的作用就是控制一个对象属性的一些特有操作，他是通过使用get和set来实现数据双向绑定的。

3.组件化:实现html的封装，重用。比如一个html页面可以把他的一些模块进行封装，在后期编写过程中可以进行调用，这样在构建方面会有很大的优势。

4.虚拟DOM。不再使用原生的dom节点，vue是操作使用vue虚拟出来的dom，虚拟的dom可以减轻性能的耗费。

二．Vue的缺点：

1.首先第一点它不支持IE9以下的版本。

2.前后端混合书写受到限制。就是在处理json数据还有对数组进行处理时会显得有些麻烦。但是可以使用一些便捷的指令。比如bind可以写成：等等。。。

三．vue的跨域问题。

Vue的跨域问题主要就是因为http协议的安全机制的问题。针对这种我们讲师给我们进行了一个详细的讲解。并列举了三个解决跨域问题的三个方法。

第一个方法就是利用jsonp的方法：动态创建script标签，使用jsonp的URL发送参数改名为callback，在这里我们会用到浏览器的network功能。

第二个方法是添加响应头，允许跨域

addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 　　 addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

第三个方法是代理的方式，服务器A的前端页面访问服务器B的后台，这样产生的跨域问题，是由于同源策略产生的可以在A服务器里添加一个代理action在这个action里完成对服务器B的action请求。返回到A服务器的前端页面。

Vue生命周期钩子函数

我们本月复习了目前常用的vue2.0当中的生命周期钩子函数。这是所有的钩子函数 一般常用的有created，mounted，还有update等函数 这是我们常用的，也是项目中经常会用到的。

Vue中一些常用的属性

父子传值使用的属性

Props：单项绑定，父组件传子组件，子组件是使用props接受父组件传递的值。

Emit：子组件使用emit向父组件传值。

计算属性：computed   在处理一些复杂的逻辑时，都可以使用计算属性，本月所学就是用在了购物车的操作上。

Vue在页面美化中会用到的一些插件及其功能：

插件我们会用到museUI，在vue后台方面我们会用到ElementUI，这两种工具是我们在对vue项目在样式美化方面常用的一些样式库。非常便捷实用。

Vue的路由：

Vue-router默认的模式是hash模式我们也可以自己设置成路由的history模式。

Vue的路由还可以使用闭包。

This指针与箭头函数的问题：

This：对于使用function定义的函数，它里面使用的this是由它的直接调用者决定（执行时）。如果没有直接的调用者，在非严格模式下，this指向window。

箭头函数：（形参1，形参2…）=>{

}箭头函数相比普通函数更加的简便，但是不是说会使用箭头函数就不用普通的函数了，要视情况而定，在一定情况下还是要使用普通的函数了.

箭头函数与普通函数的区别就是箭头函数没有自己的this，他的this是其父级函数的this普通函数是由自己的this。他的this是在程序运行时确定的。

微信小程序

我们本月用了两周的时间学习了微信小程序这门课程，第一周我们对微信小程序进行了一个简单的认识并且学习了渲染，以及页面之间的跳转，还有轮播图。第二周我们学习了购物车的逻辑操作，以及加入购物车选中点击结算会将购物车页面选中的物品一同跳转到结算页面。还有就是购物车物品的一些规格的书写以及操作。还学习了获取微信头像的功能。

我们本次学习开发电商的一个项目。

首先我们应用到了轮播图，使用swiper插件完成，其次的是公告我们用swiper-item标签，根据接口的id使用wx.request请求接口中的数据，用setData将获取的数据渲染到页面上。然后是商品分类的一个导航，使用vue中的一些方法，v-for对商品列表进行循环遍历，再根据key值获取对应的列表id，在这里我们用到的事件是bindtap。然后就是对应的分类中商品列表的实现，同样使用的是vue中的指令，跟列表的渲染相同，v-for循环渲染，通过key值获取相应列表标题中的商品信息并将其展示到页面上。紧接着就是购物车的一些操作，在我们把想要的商品选中加入购物车，购物车主要实现商品的增加与消减，然后是通过数量和价格计算总价格，还有就是购物车列表的商品全选反选的功能，这个功能我们通过判断bool值的true和false来判断是否选中。删除功能使用removestorage方法将选中的商品进行删除。购物车页面功能完成后我们进行个人中心页面的功能。主要就是获取个人信息我们可以通过getSetting授权使用getUserinfo获取用户头像，方法就是放到监听页面的加载。

微信小程序项目流程：

[if !supportLists]1.   [endif]首先下载小程序的编辑器，注册一个微信小程序的账号

[if !supportLists]2.  [endif]然后获取我们开发者的ID。

[if !supportLists]3.  [endif]创建我们的项目，进行小程序的编写。

[if !supportLists]4.  [endif]我们自己编写的小程序可以通过手机以及编译器来查看我们书写的样式以及功能。

[if !supportLists]5.  [endif]最后小程序编写完成，测试后就可以发布，让更多的人查看并使用。

微信小程序项目结构：

首先说一下他的四个文件类型：

[if !supportLists]1.   [endif]Wxml:他就像我们的html’页面，但是html中的标签用到wxml’里会被默认成span标签，他有自己的一套标签，我们可以在官方文档里都可以找到。

[if !supportLists]2.  [endif]Wxss：这个呢就像css，他是用来书写组件样式的

[if !supportLists]3.  [endif]Json：他是小程序的全局配置，它包括了小程序页面路径，界面的展示，底部tab等。他是微信小程序开发的核心文件。

[if !supportLists]4.  [endif]Js：他是脚本文件，用于逻辑操作。应用于页面与用户的交互。

JS和JQ相关知识点

我们本月关于js和jq主要讲的就是一些面试题以及js中数组操作的方法。

Js:

[if !supportLists]1.    [endif]js的基本数据类型：number，string，null，undefined，boolean，object(这个属于复杂数据类型)。还有symbol这个属性是ES6新增的。

[if !supportLists]2.   [endif]js的内置对象：数据封装类对象：object，array，boolean，number，string  还有其他对象：function，arguments，math，date，error。

[if !supportLists]3.   [endif]js的书写的一些进本要求规范：

（1）.使用==或！==比较true和false值

（2）.不要使用全局函数，推荐应用局部函数

（3）.变量命名规范，不要使用数字和汉字，不可以使用关键字，推荐驼峰命名法，或者命名中使用-。还不可以在一行中命名多个变量。

4．数组方法：

（1）.pop():删除数组中最后一个数据

（2）.unshift 在数组开头添加一个数据，并返回数组新长度

（3）.push  在数组末尾添加一个元素

（4）.shift  删除数组中第一个元素。

（5）.solt  从小到大排列数组

（6）.reverse   反转数组

（7）.concat  将参数添加到原数组

（8）.slice 返回从原数组中指定开始下标到结束下标之间的元素组成的新数组

（9）.splice   这个数组方法非常强大可以实现数组的删除，插入和替换。

（10）.indexof 接受两个参数 从数组开头向后查找。

（11）.lastindexof 接受两个参数 从数组末尾开始向前查找

（12）.foreach 对数组进行便利循环，对数组中的每一项运行给定函数

（13）.map  对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

（14）.filter  过滤

（15）.every  判断数组中每一项都是否满足条件，只有全满足才会返回true

（16）.some  判断数组中是否有满足条件的项，只要有一项满足就返回true

JQ：

Jq是jquery的简称。我们本月主要用的就是jq的插件，他的编译插件给我们带来了很大的便捷，大大节省了我们程序开发所需要的时间。其实呢jq也是一款框架，是一个功能强大而又小巧的js框架，现在在各大网站基本上都有应用。

Jq插件的书写规范：

(function($){

//在这里书写插件代码

})(jQuery);

Jq插件书写规范，这样写的作用是：

[if !supportLists]1.    [endif]避免全局依赖。

[if !supportLists]2.   [endif]避免第三方破环。

[if !supportLists]3.   [endif]兼容jQuery操作符$和’jQuery’

Jq中的四种选择器：

[if !supportLists]1.    [endif]类选择器

[if !supportLists]2.   [endif]Id选择器

[if !supportLists]3.   [endif]伪类选择器

[if !supportLists]4.   [endif]标签选择器