《Vue.js项目实战》
- 开发所需的包称为开发依赖，应该使用--save-dev标志进行安装
- 应用运行需要的直接依赖应该使用--save标志进行安装
模板
使用Pug
Pug（以前称为Jade）是一种编译到HTML的语言。
<template lang="pug">
ul.movies
li.movie Star Wars
li.movie Blade Runner
</template>
安装依赖：
npm install --save-dev pug pug-loader
脚本
JSX
在JSX中，标签首字母大小写很重要！
- 如果是小写，编译器会认为它是createElement函数的一个字符串参数，然后将它编译为一个HTML元素或已注册组件；
- 如果首字母大写，编译器会认为它是一个变量！
不能既使用渲染函数又使用模板，要移除文件中<template>部分
示例：
<script>
export default {
data () {
return {
movies: [
{title: 'Star Wars'},
{title: 'Blade Runner'}
],
}
},
render(h) {
const itemClass = 'movie'
return <ul class='movie'>
{this.movies.map(movie =>
<li class={ itemClass }>{ movie.title }</li>
)}
</ul>
},
}
</script>
编译过程：babel-preset-vue中的一个特殊模块（名为babel-plugin-transform-vue-jsx）将JSX代码转换为纯JavaScript代码
编译之后：
render(h) {
const itemClass = 'movie'
return h('ul', {class: 'movies'},
this.movies.map(movie =>
h('li', { class: itemClass}, movie.title)
)
)
},
样式
1.有作用域的样式
可以使用<style>标签的scoped属性将标签内的CSS作用域限定在当前组件中。
主要是因为PostCSS应用到模板和CSS的一个特殊属性data-v-xxxxxxxx。
<template>
<div class="title">
Hello
</div>
</template>
<style scoped>
.title {
color: blue;
}
</style>
等价于：
<template>
<div class="title" data-v-02ad4e58>
Hello
</div>
</template>
<style>
.title[data-v-02ad4e58]{
color: blue;
}
</style>
2.添加预处理器
Sass
（1）安装包
npm install --save-dev node-sass sass-loader
（2）在组件中，添加lang属性为"“sass”的<style>标签
<style lang="sass">
.active
.title
border-bottom: 1px solid rgba(red, .2)
</style>
（3）用vue build命令测试你的组件
Less
（1）安装包
npm install --save-dev less less-loader
（2）在组件中，添加lang属性为"“less”的<style>标签
<style lang="less">
.active{
.title{
border-bottom: 1px solid fade(red, 20%)
}
}
</style>
Stylus
Stylus比Less和Sass更年轻，也很受欢迎。
（1）安装包
npm install --save-dev stylus stylus-loader
（2）在组件中，添加lang属性为"“stylus”的<style>标签
<style lang="stylus">
.active
.title
border-bottom 1px solid rgba(red, .2)
</style>
组件内的组件
1.创建一个新组件Movie.vue：
<template>
<li class="movie">
{{ movie.title }}
</li>
</template>
<script>
export default {
props: ['movie'],
}
</script>
<style scoped>
.movie:not(:last-child) {
padding-bottom: 6px;
margin-bottom: 6px;
border-bottom: solid 1px rgba(0, 0, 0, .1);
}
</style>
创建一个父组件Movies.vue：
<template>
<ul class="movies">
<li v-for="(movie, index) of movies" :key="index" class="movie" >
{{movie.title}}
</li>
</ul>
</template>
<script>
import Movie from './Movie.vue'
export default {
components: {
Movie,
},
data () {
return {
movies: [
{ title: 'Star Wars' },
{ title: 'Blade Runner' },
],
}
},
}
</script>
2.在Movies组件的脚本中导入Movie单文件组件：
<script>
import Movie from './Movie.vue'
export default {
// ...
}
</script>
3.使用对象设置components选项，将一些组件暴露给模板：
export default {
components: {
Movie,
// 相当于 `Movie: Movie,`
},
// ...
}
4.在模板中通过<Movie>使用这个组件
<template>
<ul class="movies">
<Movie
v-for="(movie, index) of movies"
:key="index"
:movie="movie" />
</ul>
</template>
如果你在使用JSX
不需要components选项，因为以大写字母开头则可以直接使用组件定义
- 示例一：
import Movie from './Movie.vue'
export default {
render(h) {
return <Movie />
},
}
- 示例二：
<script>
import LocationInfo from './LocationInfo.vue'
import NoContent from './NoContent.vue'
import CreatePost from './CreatePost.vue'
import PostContent from './PostContent.vue'
import { createNamespacedHelpers } from 'vuex'
// posts module
const {
mapGetters: postsGetters,
mapActions: postsActions,
} = createNamespacedHelpers('posts')
export default {
computed: {
...postsGetters([
'draft',
'currentPost',
]),
cssClass () {
return [
'blog-content',
{
'has-content': this.currentPost,
},
]
},
},
render (h) {
let Content
if (!this.currentPost) {
Content = NoContent
} else if (this.draft) {
Content = CreatePost
} else {
Content = PostContent
}
return <div class={this.cssClass}>
<LocationInfo />
<Content />
</div>
},
}
</script>