zoukankan      html  css  js  c++  java
  • vue入坑总结

    1、Do not mount Vue to <html> or <body> - mount to normal elements instead.

    Vue2.x之后不推荐挂载vue实例到<html>和<body>上;

    2、Vue2.x在loader上不支持直接书写!style!css!style.css;应该为都为每个loader添加一个-loader;

    3、vue2.x在webpack打包上,直接将main指向vue.common.js;(有待补充);在webpack.config.js中添加:

    resolve: {
        alias: {
            'vue': 'dist/vue.js'
        }
    }
    

    4、在vue-cli脚手架中,已经在build文件家中的utils.js设置好了css-loader加载:

     // https://vue-loader.vuejs.org/en/configurations/extract-css.html
      return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass'),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
      }
    }
    

    因此不用重复在webpack.base.config.js中配置css-loader,而引入全局css样式的方法有:

    1)直接在head标签里面使用link标签引入

    2)在style标签中使用@import引入

    3)在main.js中使用import引入

    5、注:每一个vue组件都是一个vue实例,而每一个vue组件都要求有一个根节点,不允许存在并排节点:

    错误实例:

    <template>
        <head-top></head-top>
        <main></main>
    </template>
    

      正确实例:

    <template>
         <div>
           <head-top></head-top>
            <main></main>
        </div>
    </template>
    

      

    6、父子组件使用事件绑定通信时,必须用v-on,不能使用简写,否则没有反应。

    7、一般复用的组件不存在同一个父组件里,因为数据的处理比较麻烦。

  • 相关阅读:
    CSS揭秘三(形状)
    CSS揭秘(二背景与边框)
    js数组去重
    Iterator
    ES6数据结构set
    JS浏览器对象(BOM)
    JS 数据类型转换
    js的cookie,localStorage,sessionStorage
    (html+css)云道首页
    蓝桥杯-基础练习 01字串-C语言-5层循环法
  • 原文地址:https://www.cnblogs.com/Yoriluo/p/6964767.html
Copyright © 2011-2022 走看看