学习vue容易忽视的细节
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容易忽视的细节的更多相关文章
- 从零开始学习Vue.js,学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- C语言easy忽视的细节(第四部分)
前言:本文的目的是记录C这些语言easy忽视的细节.我会每天花一点时间来阅读整理,坚持下去,今天是第一章.也许今天是下个月的第二,明年,今天是第几?--我坚信,,记性不如烂笔头.第四篇了.fight~ ...
- 一步一步学习Vue(六)
本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...
- 学习 vue 源码 -- 响应式原理
概述 由于刚开始学习 vue 源码,而且水平有限,有理解或表述的不对的地方,还请不吝指教. vue 主要通过 Watcher.Dep 和 Observer 三个类来实现响应式视图.另外还有一个 sch ...
- VUE2 第六天学习--- vue单文件项目构建
阅读目录 VUE2 第六天学习--- vue单文件项目构建 回到顶部 VUE2 第六天学习--- vue单文件项目构建 VUE单文件组件在Vue项目中,然后使用 new Vue({el: '#cont ...
- Vue2 第四天学习(Vue的生命周期)
阅读目录 1.理解VUE---混合 2.Vue实例化选项 3.Vue实例化的生命周期 回到顶部 1.理解VUE---混合 在了解Vue生命周期之前,我们先来学习Vue中的混合吧: 为什么需要使用混合? ...
- 关于学习Vue的前置工作/技术储备
关于学习Vue的前置工作/技术储备 1.GitBatch 2.Sublime Text 3.Node-----npm 命令 本人用的idea GitBatch: GitBatch是一个可以编写shel ...
- 菜鸟如何学习vue
作为一个前端菜鸟,最近开始接触和学习vue. 以前用到的是bootstrap前端框架. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架. Bootstrap 是基于 HTML.CS ...
- vuejs学习——vue+vuex+vue-router项目搭建(三)
前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...
随机推荐
- Linux下执行.sh命令出现-bash: ./bin/start.sh: /bin/bash^M: bad interpreter: No such file or directory
原因是 文件的格式是dos,修改为unix 就OK了 查看文件格式 用vim 打开出错的文件 按 ESC键 再按shift+冒号 输入 set ff 回车 可以看见 该文件 ...
- 使用Metasploit渗透攻击windows系统(二)
后渗透攻击: 介绍常用的一些命令: 查看进程:ps 查看当前进程号:getpid 查看系统信息:sysinfo 查看目标机是否为虚拟机:run post/windows/gather/checkvm ...
- Angular/Vue调用百度地图+标注点不显示图标+多标注点计算地图中心位置
整理一下~ 一.在vue中调用百度地图 首先当然是申请百度密匙(很简单,不多说) 1.在index.html文件中引入百度地图JavaScript API接口: <script type=& ...
- springboot打成Jar包后部署至Linux服务器上
下面主要记录一下springboot打包成jar包在Linux服务上部署的步骤: 1.通过WinSCP,将相应的Jar文件,复制到Linux指定目录下,如/home/ 2.打开ssh,进入/home目 ...
- JavaScript 的setTimeout 和Angular中的$timeout的區別
JavaScript中setTimeout返回值类型和意义说明: 1.setTimeout :暂停指定的毫秒数后执行指定的代码,返回值是id标识,这个id的意义就是通过clearTimeout来清理暂 ...
- protobuf example make backup
# See README.txt. .PHONY: all cpp java python clean all: cpp #java python cpp: add_person_cpp list_p ...
- mysql sql文件批量处理
简单动作复杂化,导致处理文件误入坑, 数据库拷贝,备份还原是每个面向对象的开发人员避免不了的动作,在数据库使用中,习惯性的使用第三方数据库管理软件,最近需要做数据库迁移,导出的批量sql文件不知如何区 ...
- leetcode python 012 hard 合并k个有序链表
#[LeetCode] Merge k Sorted Lists 合并k个有序链表(升序) import numpy as npimport time class Node(object): d ...
- hadoop Non DFS Used是什么
首先我们先来了解一下Non DFS User是什么? Non DFS User的意思是:非hadoop文件系统所使用的空间,比如说本身的linux系统使用的,或者存放的其它文件 它的计算公式: n ...
- CT ubuntu 16.04安装 adobe flash player
sudo apt-get install flashplugin-installer chrome 升级 chrome://chrome-urls/ chrome://components/ 找到A ...