Vue入门笔记二

《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>