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