Vue组件的认识与使用

记录学习过程中最基本的使用代码和遇见的问题

webpack-simple

vue init webpack-simple vue-lesson

其中vue-lesson是自己随便去的文件夹的名字

node_modules

npm install

这是全局安装,我认为跟安装插件意思差不多

precompile

npm run dev

运行这一步,我们才能在浏览器中看到效果,不然没有

use

  • 创建一个Article.vue文件,下面是具体内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
<div class="container">
<h1>{{title}} </h1>
<p>发表于{{date | moment}} </p>
<p class="lead">
{{content}}
</p>
<app-author></app-author>
</div>
</template>

<script>
import moment from "moment";
import Author from "./Author.vue"
export default {
data () {
return {
title : "震惊!!!",
date : new Date(),
content : "为何过年亲戚催婚"
}
},
filters: {
moment : function(value) {
return moment(value).format("MMMM Do")
}
},
components: {
"app-author" : Author
}
}
</script>
  • 在main.js中进行import导入,并且注册组件
    import Article from "./Article.vue"
    Vue.component("app-article", Article)
  • 最后在App.vue中使用这一标签

注意

  • 需使用npm run dev语句进行测试服务器
  • 使用moment时,要先npm一个时间库,其中--svae是因为局部下载:
    npm install moment --save
  • 使用filters时,需要使用管道符|加载moment
  • 在创建组件过程当中,Vue.component()必须放在new Vue()之前,不然会报错
  • components : {"app-author" : Author}中Author是局部变量
  • 如果要加载bootstrap样式的话,bootstrap的文件夹应放在node_modules里

具体网址

完整文件的所在地址

https://github.com/yutiJin/dev-learn/tree/master/vue-lesson