vue单文件组件相关知识

2019-09-25 本文已影响0人 zooeydotmango

slot插槽

在组件template中的占位，在index.html中输入的值就会替换掉插槽内容

单文件组件

.vue 文件是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块

<template>
  <h2>{{ msg }}</h2>
</template>
<script>
export default {
  data () {return {msg: 'Hello Vue.js 单文件组件~'}}
}
</script>
<style>
h2 {color: green;}
</style>

在app.js中引用这个组件：

// ES6 引入模块语法
import Vue from 'vue';
import hello from './hello.vue';

new Vue({
  el: "#app",
  template: '<hello/>',
  components: {hello}   //局部声明
});

传值方式

props: ['title']，也可以是对象：

props: { title:
      {
          type:string,
          default:'a string'
      }
}

export default、export

export && export default到底是怎么回事

validator

props的验证函数

props: {
    value:{
      type: String,
      default: '2',
      validator: function(value){return value ==='1';}
    }
  }

parcel打包编译vue

npx parcel index.html --no-cache事实证明不加上--no-cache容易导致bug
也可以使用vue官方推荐的打包器，webpack等