vue知识点

1. webpack

webpack-loaders

webpack默认只能识别JS和json文件，使用对应的loader，可以解析非JS、json文件

• less-loader：将 less 文件编译成 css （css-loader才能使用），但是不生成文件，而是在内存中
• css-loader：将 less 编译后的 css 转换成 CommentJS 的一个模块
• style-loader：在HTML中创建一个style标签，将样式塞进去

2. 组件通信

父传子
子传父
非父子

3. 单页应用程序和路由

1. 单页应用程序（SPA）
   现在我们不再单独的写HTML文件，而是通过代码控制路由，渲染到index.html
   优点：

   • 只有第一次会请求完整的页面
   • 只会请求必要的数据

   缺点：

   • 不利于SEO
   • 需要学习路由，开发成本高

2. 动态路由

   动态路由配置：动态路由参数，以冒号开头
   let router = new VueRouter({
     	routes: [
       { path: '/detail/:id', component: Detail, name: 'detail' },
     ]
   })
   

   toDetail(id) {
     this.$router.push({
       name: "detail",
       params: {
         id: id,
       },
     });
   },
   

   使用时，获取动态路由的参数，params就是参数的意思
     this.$route.params.id;
   

杂项

1. 防盗链
   <meta name="referrer" content="never">
2. 点击失效：
   组件失效：其实是向组件传值了，使用native
   标签失效：层级z-index，透明盒子盖住了
3. scoped
   使用了scoped，比如：<style lang='less' scoped>，就会在标签<div class='box'><div>上添加属性data-v-5227404a，而且在对应的样式上也会添加属性选择器.box[data-v-5227404a]，所以浏览器在读取样式的时候，就会根据属性选择器的值匹配添加了对应属性的标签，来进行渲染
   如果没有scoped，style的样式会注册到全局：index.html
   如果写了scoped，对于内层的标签，样式作用不到，可以使用深度选择器解决，在css中，使用>>>，在less/sass中，使用/deep/