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

vue入坑总结的更多相关文章

  1. Vue入坑教程（二）——项目结构详情介绍

    之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...

  2. Vue入坑第一篇

    写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言 本篇作为vue入门的一 ...

  3. Vue入坑日记: day - 01

    前言 最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery ...

  4. Vue入坑教程（一）——搭建vue-cli脚手架

    1. Vue简介 详细内容可以参考官网Vue.js 1)兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMA ...

  5. vue入坑教程（一）

    1.脚手架搭配webpack的安装 (1)需要检查自己的电脑有没有安装node和npm 如果没有安装可以参考官网,以及安装的步骤 官方中文网地址:http://nodejs.cn/ (2)下载webp ...

  6. vue入坑教程（二）在vue项目中如何导入element以及sass

    在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...

  7. VUE 入坑系列 一 双向绑定

    html代码 <div id="app"> <p>{{message}}</p> <span>message1</span&g ...

  8. VUE 入坑系列 一 事件

    html代码 <div id="app"> <button v-on:click="counter += 1">加1</butto ...

  9. VUE 入坑系列 一 基础语法

    html代码 <div id="app"> {{message}} </div> JavaScript代码 var vm = new Vue({ el: & ...

随机推荐

  1. 拓扑排序&关键路径

    拓扑排序:AOV网 概念 example:选课问题:AOV网 顶点活动(Activity On Vertex)网是指用顶点表示活动,而用边集表示活动关系的有向图. 在这个例子中,课程为结点,而有向边表 ...

  2. Foundation框架中日期的操作

    #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { NSDate *date1=[NSD ...

  3. sklearn.neighbors.kneighbors_graph的简单属性介绍

    connectivity = kneighbors_graph(data, n_neighbors=7, mode='distance', metric='minkowski', p=2, inclu ...

  4. Windos系统git提交

    一.$ git status   //查看当前项目下所有文的状态,如果第一次,你会发现都红颜色的,因为它还没有交给git/github管理. 二.$ git add .   //(.)点表示当前目录下 ...

  5. HDU1248--完全背包

    寒冰王座 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  6. CCF-201509-2-日期计算

    问题描述 试题编号: 201509-2 试题名称: 日期计算 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定一个年份y和一个整数d,问这一年的第d天是几月几日? 注意闰年 ...

  7. javascript设计模式——发布订阅模式

    前面的话 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模 ...

  8. PCA, SVD以及代码示例

    本文是对PCA和SVD学习的整理笔记,为了避免很多重复内容的工作,我会在介绍概念的时候引用其他童鞋的工作和内容,具体来源我会标记在参考资料中. 一.PCA (Principle component a ...

  9. javac 小记

    javac 到底是什么? javac 就是一个编译器,它把 Java 源代码编译成 Java 字节码,即 JVM 能够识别的二进制形式的文件. javac 由什么构成? 词法分析器:识别源代码中的 J ...

  10. day8、 显示Linux路由表、各列信息

    要用到的命令是 route route 命令    显示和设置Linux路由表 -A:设置地址类型: -C:打印将Linux核心的路由缓存: -v:详细信息模式: -n:不执行DNS反向查找,直接显示 ...