Vue学习日记47

1.创建基于webpack模板的新项目
解析：vue init webpack myvue

2.引入ElementUI
解析：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3.ElementUI.Dialog.props.closeOnClickModal.default = false
解析：修改el-dialog默认点击遮照为不关闭。

4.vue-particle-line
解析：一个Vue+Cnavas酷炫背景粒子线条。安装方法：

npm install vue-particle-line --save

使用方法，如下所示：

import Vue from 'vue'
import vueParticleLine from 'vue-particle-line'
import 'vue-particle-line/dist/vue-particle-line.css'
Vue.use(vueParticleLine)

5.timeline-vuejs
解析：安装和导入方法，如下所示：

npm install timeline-vuejs --save
import '../node_modules/timeline-vuejs/dist/timeline-vuejs.css'

6.vue-quill-editor
解析：基于Quill、适用于Vue的富文本编辑器，支持服务端渲染和单页应用。安装和全局挂载如下所示：

npm install vue-quill-editor --save
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
Vue.use(VueQuillEditor, /* { default global options } */)

7.vue-aplayer
解析：Easy-to-use music player for Vue 2.x.

import APlayer from '@moefe/vue-aplayer'
Vue.use(APlayer, {
  defaultCover: 'https://github.com/u3u.png', // set the default cover
  productionTip: false, // disable console output
})

8.<template slot-scope=“scope”>
解析：

<el-table-column fixed="right" label="操作" width="120">
　　 <template slot-scope="scope">
　　　　 <div> {{scope.row}} </div>  //可以拿到当前行，所有后台返回的数据
　　</template>
</el-table-column>

说明：<template slot-scope=“scope” >{{ scope.$index }} {{ scope.row }}</template>

9.VNode类型
解析：
[1]注释节点
[2]文本节点
[3]元素节点
[4]组件节点
[5]函数式节点
[6]克隆节点

10.Lodash类库
解析：Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。

11.<el-button>属性和方法
解析：
[1]plain：是否朴素按钮，boolean类型，默认为false。
[2]disabled：是否禁用状态，boolean类型，默认为false。
[3]icon：图标类名，string类型。
[4]native-type：原生type属性，string类型，默认为button，包括button、submit、reset。

12.vue-property-decorator
解析：该组件完全依赖于vue-class-component，它具备以下几个属性：
[1]@Component
[2]@Prop
[3]@PropSync
[4]@Model
[5]@Watch
[6]@Provide
[7]@Inject
[8]@ProvideReactive
[9]@InjectReactive
[10]@Emit
[11]@Ref

13.<el-form>属性和方法
解析：
[1]inline：行内表单模式
[2]rules：表单验证规则
[3]model：表单数据对象
[4]label-position：表单域标签的位置，如果值为left或者right时，则需要设置label-width

14.<el-dialog>
解析：
[1]visible：是否显示Dialog，支持.sync修饰符。数据类型为boolean，默认值为false。
[2]custom-class：Dialog的自定义类名。数据类型为string。

15.<el-table>
解析：
[1]tooltip-effect：tooltip effect属性，数据类型为string，包括dark/light。
[2]stripe：是否为斑马纹table，数据类型为boolean，默认值为false。
[3]indent：展示树形数据时，树节点的缩进。数据类型为Number，默认值为16。
[4]lazy：是否懒加载子节点数据。数据类型为Boolean。

16.$t
解析：$t是挂到Vue.prototype上的一个方法，接受一个字符串作为参数。

17.<el-collapse>
解析：
[1]value/v-model：当前激活的面板，如果是手风琴模式，绑定值类型需要为string，否则为array。
[2]accordion：是否手风琴模式。数据类型为boolean，默认值为false。

18.滚动区域el-scrollbar
解析：在ElementUI官方文档中没有显示的组件。

19.<template v-slot:name>
解析：
[1]在向具名插槽提供内容的时候，可以在一个<template>元素上使用v-slot指令，并以v-slot的参数的形式提供其名称。
[2]现在<template>元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有v-slot的<template>中的内容都会被视为默认插槽的内容。

20.Table-column属性
解析：
[1]type：对应列的类型。如果设置了selection则显示多选框；如果设置了index则显示该行的索引[从1开始计算]；如果设置了expand则显示为一个可展开的按钮。
[2]index：如果设置了type=index，可以通过传递index属性来自定义索引
[3]prop：对应列内容的字段名，也可以使用property属性
[4]fixed：列是否固定在左侧或者右侧，true表示固定在左侧
[5]align：对齐方式

21.Vue插槽
解析：
[1]匿名插槽
[2]具名插槽
[3]作用域插槽

22.Message消息提示
解析：Element为Vue.prototype添加了全局方法$message。因此在vue instance中可以调用Message。如下所示：
[1]message：消息文字
[2]type：主题
[3]iconClass：自定义图标的类名，会覆盖type
[4]dangerouslyUseHTMLString：是否将message属性作为HTML片段处理
[5]customClass：自定义类名
[6]duration：显示时间,毫秒。设为0则不会自动关闭
[7]showClose：是否显示关闭按钮
[8]center：文字是否居中
[9]onClose：关闭时的回调函数,参数为被关闭的message实例
[10]offset：Message距离窗口顶部的偏移量

23.<el-input>
解析：
[1]value/v-model：绑定值
[2]clearable：是否可清空，数据类型为boolean，默认值为false

24.Vue监听键盘回车事件
解析：

<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">

除此之外，其它键盘别名包括.enter，.tab，.delete，.esc，.space，.up，.down，.left，.right。
说明：如果用了封装组件，那么使用按键修饰符需要加上.native。

25.<el-select>
解析：
[1]clearable：是否可以清空选项，数据类型为boolean，默认值为false
[2]filterable：是否可搜索，数据类型为boolean，默认值为false
[3]remote：是否为远程搜索，数据类型为boolean，默认值为false
[4]loading：是否正在从远程获取数据，数据类型为boolean，默认值为false
[5]remote-method：远程搜索方法，数据类型为function