vuejs官方文档之单文件组件

单文件组件

介绍

在很多vue项目中，我们使用vue.component来定义全局组件，紧接着用new Vue({el: '#container'}) 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好，在这些项目里javascript只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全有javascript驱动的时候，下面这些缺点将变得非常明显：

1全局定义global definitions强制要求每个component中的命名不得重复

2字符串模板string templates缺乏语法高亮，在html有很多行的时候，需要用到丑陋的 \

3不支持css （no css support）意味着当html和javascript组件化时，css明显被遗漏

4没有构建步骤（no build step）限制只能使用html和es5 javascript，而不能使用预处理器，如pug（formerly jade）和babel

文件扩展名为 .vue的single-file components（单文件组件）为以上所有问题提供了解决方法，并且还可以用webpack或browserify等构建工具。

 

现在我们获得

1完整语法高亮

2commonjs模块

3组件作用域的css

正如我们说过的，我们可以使用预处理器来构建简洁和功能更丰富的组件，比如pug，babel和stylus。

这些特定的语言知识例子，你可以只是简单的使用babel，typescript，scss，postcs-或者其他任何能够帮助你提高生产力的预处理器。如果搭配vue-loader使用webpack，他也是把css modules当做第一公民来对待的。

怎么看待关注点分离

一个重要的事情值得注意，关注点分离不等于文件类型分离。在现代ui开发中，我们已经发现相比于把代码库分离成三个大的层次并将其相互交织起来，把他们划分为松散耦合的组件在将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。

即使你不喜欢单文件组件，你仍然可以把javascript，css分离成独立的文件后做到热重载和预编译。

<template>

<div>dddd</div>

</template>

<script src="./my.js"></script>

<style src="./my.css"></style>

 

起步

例子沙箱

如果你希望深入了解并开始使用单文件组件，请来codesandbox看看这个简单的todo应用。

在app.vue中引入todolist子组件

<script>

import TodoList from './components/TodoList.vue'

 

export default {

  components: {

    TodoList

  }

}

</script>

在todolist中引入baseinputtext输入框子组件和todolistitem项目子组件

<script>

import BaseInputText from './BaseInputText.vue'

import TodoListItem from './TodoListItem.vue'

 

let nextTodoId = 1

 

export default {

  components: {

    BaseInputText, TodoListItem

  },

 

 

<template>

  <div>

    <BaseInputText

      v-model="newTodoText"

      placeholder="New todo"

      @keydown.enter="addTodo"

    />

    <ul v-if="todos.length">

      <TodoListItem

        v-for="todo in todos"

        :key="todo.id"

        :todo="todo"

        @remove="removeTodo"

      />

    </ul>

    <p v-else>

      Nothing left in the list. Add a new todo in the input above.

    </p>

  </div>

</template>

 

新建baseinputtext组件

<template>

<input

type="text"

class="input"

:value="value"

v-on="listeners"

>

</template>

 

 

新建todolistitem组件

<template>

<li>

{{ todo.text }}

<button @click="$emit('remove', todo.id)">

X

</button>

</li>

</template>

 

 

 

把输入框子组件中的内容添加到项目子组件中。

 

 addTodo () {

      const trimmedText = this.newTodoText.trim()

      if (trimmedText) {

        this.todos.push({

          id: nextTodoId++,

          text: trimmedText

        })

        this.newTodoText = ''

      }

    },

 

按下x按钮emit触发

在todolist的removetodo的事件

 removeTodo (idToRemove) {

      this.todos = this.todos.filter(todo => {

        return todo.id !== idToRemove

      })

    }

 

 

 

done

 

针对刚接触javascript模块开发系统的用户

有了.vue组件，我们就进入了高级javascript应用领域。如果你没有准备好的话，意味着还需要学会使用一些附加的工具：

1、node package manager（npm）：阅读getting started guide直到10：uninstalling global packages章节

01what is npm

npm opens up an entire world of javascript talent for you and your team(node包管理为你和你的团队打开整个javascript的世界)

02how to find & select packages

tofind packages，start with the npm search bar（为了找到包，开始用npm的搜索条吧）

03how to set up a new npm account &install npm

04how to install local packages

有两种方法来安装npm包：局部或全局。

npm install <package_name>

这样就创建了node_modules目录中的目录(如果你目前还不存在)，并将包下载到该目录。

MicrosoftWindows：

npm install lodash

dir node_modules

 

MacOS，Ubuntu、Debian

npm install lodash

ls node_modules

 

05 working with package.json

会生成packag.json

> npm init --yes

Wrote to /home/ag_dubs/my_package/package.json:

 

{

"name": "my_package",

"description": "",

"version": "1.0.0",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"repository": {

"type": "git",

"url": "https://github.com/ashleygwilliams/my_package.git"

},

"keywords": [],

"author": "",

"license": "ISC",

"bugs": {

"url": "https://github.com/ashleygwilliams/my_package/issues"

},

"homepage": "https://github.com/ashleygwilliams/my_package"

}

 

06 how to update local packages

07 how to uninstall local packages

08 how to install global packages

09 how to update global packages

10 how to uninstall global packages

 

2、modern javascript with es2015/16：阅读babel的learn es2015 guide。你不需要立刻记住每一个方法，但是你可以保留这个页面以便后期参考。

在你花一天时间谅解这些资源之后，我们建议你参考webpack模板，只要遵循指示，你就能很快的运行一个用到.vue组件，es2015和热重载（hot-reloading）的vue项目

 

想学习更多的webpack的知识，请移步他们的官方文档以及webpack learing academy。在webpack中，每个模块被打包到bundle之前都有一个相应的loader来转换。vue也提供vue-loader插件来执行.vue单文件组件的转换。

针对高级用户

 

无论你更钟情webpack或是browserify，我们为简单的和更复杂的项目都提供了一些文档模板。我们建议浏览github.com/vuejs-templates,找到你需要的部分，然后readme中的说明，使用vue-cli工具来生成新的项目。

模板中使用webpack，一个模块加载器加载多个模块然后构建成最终应用，为了进一步了解webpack，可以看官方视频，如果你有基础，可以看在egghead.io上的webpack进阶教程。