1、对于自定义标签名(组件名称),Vue.js 不强制要求遵循 W3C 规则 (小写,并且包含一个短杠),尽管遵循这个规则比较好。HTML 特性是不区分大小写的。所以,当使用的不是字符串模板,camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名:

Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

2、如果是webpack进行打包的话,template部分会预编译成render函数。vue-loader做的事只是把.vue文件中的template与style编译到.js(编译到render函数),并混合到你在.vue中export出来的符合component定义的Object中。

3、vue格式的文件使用类似HTML的语法描述vue组件。每个.vue文件包含三种最基本的语言块:

<template>
<div class="example">{{ msg }}</div>
</template> <script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script> <style>
.example {
color: red;
}
</style>

vue-loader会解析这个文件中的每个语言块,然后传输到其它的loaders,最终输出到module.exports是vue组件的配置对象的CommonJS模块。

vue-loader通过指定语言块的lang属性支持css预编译、html编译模板等语言格式。如在组件的style块中使用sass

<style lang="sass">
/* write SASS! */
</style>

当vue-loader在同一个项目中检测到babel-loader或者buble-loader的存在时,会用他们来处理*.vue文件中。例如:

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue' export default {
components: {
ComponentA,
ComponentB
}
}
</script>

使用ES2015对象的简写来定义子组件,{ ComponentA }是{ ComponentA: ComponentA }的简写。vue将会自动把键转换为component-a。

当一个style标签带有scoped属性,它的css只应用于当前组件的元素。

<style scoped>
.example {
color: red;
}
</style> <template>
<div class="example">hi</div>
</template>

转换为

<style>
.example[_v-f3f3eg9] {
color: red;
}
</style> <template>
<div class="example" _v-f3f3eg9>hi</div>
</template>

学习vue容易忽视的细节的更多相关文章

  1. 从零开始学习Vue.js,学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  2. C语言easy忽视的细节(第四部分)

    前言:本文的目的是记录C这些语言easy忽视的细节.我会每天花一点时间来阅读整理,坚持下去,今天是第一章.也许今天是下个月的第二,明年,今天是第几?--我坚信,,记性不如烂笔头.第四篇了.fight~ ...

  3. 一步一步学习Vue(六)

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  4. 学习 vue 源码 -- 响应式原理

    概述 由于刚开始学习 vue 源码,而且水平有限,有理解或表述的不对的地方,还请不吝指教. vue 主要通过 Watcher.Dep 和 Observer 三个类来实现响应式视图.另外还有一个 sch ...

  5. VUE2 第六天学习--- vue单文件项目构建

    阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...

  6. Vue2 第四天学习(Vue的生命周期)

    阅读目录 1.理解VUE---混合 2.Vue实例化选项 3.Vue实例化的生命周期 回到顶部 1.理解VUE---混合 在了解Vue生命周期之前,我们先来学习Vue中的混合吧: 为什么需要使用混合? ...

  7. 关于学习Vue的前置工作/技术储备

    关于学习Vue的前置工作/技术储备 1.GitBatch 2.Sublime Text 3.Node-----npm 命令 本人用的idea GitBatch: GitBatch是一个可以编写shel ...

  8. 菜鸟如何学习vue

    作为一个前端菜鸟,最近开始接触和学习vue. 以前用到的是bootstrap前端框架. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CS ...

  9. vuejs学习——vue+vuex+vue-router项目搭建(三)

    前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...

随机推荐

  1. 『TensorFlow』读书笔记_Inception_V3_下

    极为庞大的网络结构,不过下一节的ResNet也不小 线性的组成,结构大体如下: 常规卷积部分->Inception模块组1->Inception模块组2->Inception模块组3 ...

  2. 【Mybatis】【1】generate批量生成实体类,数据库接口类和mapper

    前言: 1,实体类之类如果自己写的话,比较繁琐,还容易出错,所以用generate自动生成 2,int类型可能会生成为short类型,建议不要手动改回int类.因为下次生成又是short类型了,可能会 ...

  3. icpc2018-焦作-F Honeycomb bfs

    http://codeforces.com/gym/102028/problem/F 就是一个bfs,主要问题是建图,要注意奇数和偶数列的联通方案是略有不同的.比赛的时候写完一直不过样例最后才发现没考 ...

  4. zabbix3.4.7远程命令例子详解

    zabbix可以通过远程发送执行命令或脚本来对部分的服务求故障进行修复 zabbix客户端配置 设置zabbix客户端用户的sudo权限 执行命令visudo: Defaults:zabbix !re ...

  5. 跟随我在oracle学习php(7)

    盒子模型布局 盒子模型:每个标签都是一个盒子 计算宽高:box-sizing:border-box盒子的宽度就是设置的宽度,里面的内容自适应 从里到外:padding(内边距) Border(边框) ...

  6. springmvc文件上传示例

    首先要导包,用的的包是: commons-fileupload-*.*.*.jar commons-io-*.*.jar *号代表版本号 这里给大家分享一下下载链接:https://files.cnb ...

  7. Saiku关于MDX过滤的使用(九)

    Saiku查询设定:Saiku查询数据时,每次都是全量查询的,我们现在需要默认展示近一周的数据. 通过编写使用MDX表达式进行过滤 通过编写MDX表达式,添加新的指标信息对一周以内的数据进行标识 (其 ...

  8. 读取磁盘:CHS方式

    读取磁盘:CHS方式 BIOS读取磁盘 读取磁盘也是调用BIOS: 中断命令: INT 13H 读取扇区的入口参数为 AH = 02H 功能参数,读取扇区 AL = 扇区数 CH = 柱面 CL = ...

  9. Django学习教程

    教程link:https://code.ziqiangxuetang.com/django/django-install.html 最好用虚拟环境学习django,用pycharm时要注意所选的pyt ...

  10. Binary Tree Maximum Node

    Find the maximum node in a binary tree, return the node. Example Given a binary tree: 1 / \ -5 2 / \ ...