Vue影院项目总结

-3.Vuex的使用：管理组件的是否显示的状态。2.实现数据的快照（缓存）3.方便管理和调试，（时光旅行）

-2.

mixins理解

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

• 单纯组件引用：
  父组件 + 子组件 >>> 父组件 + 子组件
• mixins：
  父组件 + 子组件 >>> new父组件
  有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。

-1.使用Mint UI实现移动端的界面框架内容

ex:import { Swipe, SwipeItem } from 'mint-ui'; 轮播图

Indicator - 加载提示框 ex：< ul v-infinite-scroll="自定义方法（）"infinite-scroll-distance="0">判断到底部

 

0.LESS 和 SCSS 有什么区别？

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数.  Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

1.编译环境不一样

2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。（包括变量插值）

3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

5. 引用外部CSS文件

6.Sass和Less的工具库不同

 

定义一个 Mixin：混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
  混合对象可以包含任意组件选项。
  当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

LESS 使用 dot 符号（也就是句点）来定义一个 Mixin，并且可以把任意的 CSS 规则作为 Mixin 使用；SCSS 使用 @mixin 指令来定义一个 Mixin。

1.跨域问题：用Proxy 反向代理解决跨域的问题

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://www.xxx.com', //目标路径，别忘了加http和端口号
        changeOrigin: true, //是否跨域
        ws: true,
        pathRewrite: {
          '^/api': '' //重写路径
        }
      }
    }
  }
};

2.eslint解决代码规范的问题

3.动态路由：this.$router.push(`/detail/${id}`)

4.router.beforeEach 注册一个全局前置守卫（路由守卫像是一个钩子函数）

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数

5.轮播组件Swiper的引入

swiper是一个非常强大的组件

　　但是需要swiper-item这个标签来实现他想显示的内容

　　swiper-item标签有个item-id的属性，属性值：字符串　　是swiper-item的标识符；

　　一个swiper标签只能显示一个swiper子元素的内容，所以说一个swiper-item就相当于一个板块，我们想进行四个图片的轮播的话，就是四个板块；

6.Vuex的this.$store.state.(store中的定义的状态名)  ES6导出mapstate包{}，然后放到computed计算属性中 computed:mapState(["isTabbarShow"]),(函数包着数组)，此处包含知识点  ...arr展开运算符，可以用来合并数组。

可以用来做状态管理（非父子通信）2.数据快照 3.方便管理和调试，时光旅行

判断store中有没有nowplaying的数据，如果没有就ajax(action-->mutaion-->state)

7.Vue_dectools查看当前数据的状态

8.用axios发送请求

ajax和axios的区别：Ajax的核心是使用XMLHttpRequest对象，假设多个请求之间出现了先后关系，会出现回调地狱，.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理，配置和调用方式非常混乱，而且基于事件的异步模型不友好。

JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持

axios：可以防止（CSRF一般指跨站请求伪造。跨站请求伪造（英语：Cross-site request forgery））：

就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象

完全可以通过调用axios的API，传递一个配置对象来发起请求。

发送post请求，参数写在data属性中

axios({
  url: 'http://rap2api.taobao.org/app/mock/121145/post',
  method: 'post',
  data: {
    name: '小月'
  }
}).then(res => {
  console.log('请求结果：', res);
});

发送get请求，默认就是get请求，直接第一个参数写路径，第二个参数写配置对象，参数通过params属性设置。

axios('http://rap2api.taobao.org/app/mock/121145/get', {
  params: {
    name: '小月'
  }
}).then(res => {
  console.log('请求结果：', res);
});