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、一般复用的组件不存在同一个父组件里,因为数据的处理比较麻烦。
vue入坑总结的更多相关文章
- Vue入坑教程(二)——项目结构详情介绍
之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) pac ...
- Vue入坑第一篇
写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言 本篇作为vue入门的一 ...
- Vue入坑日记: day - 01
前言 最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery ...
- Vue入坑教程(一)——搭建vue-cli脚手架
1. Vue简介 详细内容可以参考官网Vue.js 1)兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMA ...
- vue入坑教程(一)
1.脚手架搭配webpack的安装 (1)需要检查自己的电脑有没有安装node和npm 如果没有安装可以参考官网,以及安装的步骤 官方中文网地址:http://nodejs.cn/ (2)下载webp ...
- vue入坑教程(二)在vue项目中如何导入element以及sass
在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...
- VUE 入坑系列 一 双向绑定
html代码 <div id="app"> <p>{{message}}</p> <span>message1</span&g ...
- VUE 入坑系列 一 事件
html代码 <div id="app"> <button v-on:click="counter += 1">加1</butto ...
- VUE 入坑系列 一 基础语法
html代码 <div id="app"> {{message}} </div> JavaScript代码 var vm = new Vue({ el: & ...
随机推荐
- 拓扑排序&关键路径
拓扑排序:AOV网 概念 example:选课问题:AOV网 顶点活动(Activity On Vertex)网是指用顶点表示活动,而用边集表示活动关系的有向图. 在这个例子中,课程为结点,而有向边表 ...
- Foundation框架中日期的操作
#import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { NSDate *date1=[NSD ...
- sklearn.neighbors.kneighbors_graph的简单属性介绍
connectivity = kneighbors_graph(data, n_neighbors=7, mode='distance', metric='minkowski', p=2, inclu ...
- Windos系统git提交
一.$ git status //查看当前项目下所有文的状态,如果第一次,你会发现都红颜色的,因为它还没有交给git/github管理. 二.$ git add . //(.)点表示当前目录下 ...
- HDU1248--完全背包
寒冰王座 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- CCF-201509-2-日期计算
问题描述 试题编号: 201509-2 试题名称: 日期计算 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 给定一个年份y和一个整数d,问这一年的第d天是几月几日? 注意闰年 ...
- javascript设计模式——发布订阅模式
前面的话 发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.在javascript开发中,一般用事件模型来替代传统的发布—订阅模 ...
- PCA, SVD以及代码示例
本文是对PCA和SVD学习的整理笔记,为了避免很多重复内容的工作,我会在介绍概念的时候引用其他童鞋的工作和内容,具体来源我会标记在参考资料中. 一.PCA (Principle component a ...
- javac 小记
javac 到底是什么? javac 就是一个编译器,它把 Java 源代码编译成 Java 字节码,即 JVM 能够识别的二进制形式的文件. javac 由什么构成? 词法分析器:识别源代码中的 J ...
- day8、 显示Linux路由表、各列信息
要用到的命令是 route route 命令 显示和设置Linux路由表 -A:设置地址类型: -C:打印将Linux核心的路由缓存: -v:详细信息模式: -n:不执行DNS反向查找,直接显示 ...