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

  • 相关阅读:
    Go 接口
    Go 参数传递
    Go 结构体
    Go 指针
    使用ContentType处理大量的外键关系
    django的render的特殊用法
    restframework中的那些参数你知道吗?
    scrapy框架
    numpy如何使用
    HTML 5 audio标签
  • 原文地址:https://www.cnblogs.com/Yoriluo/p/6964767.html
Copyright © 2011-2022 走看看