<template> <div> </div> </template> <script> export default{ data(){ ... }, methods:{ // 自定义方法，可对data进行处理 method1(){ ... } ... }, components: { ... } vuex: { getters:{ // 获取store的数据 questionnaire: state => state.currentQuestionnaire } actions: { //用来分发数据容器store中mutations方法 action1(){ dispatch("SET_QUEST", item) } // dispatch用来调用父组件store的"SET_QUEST"方法 action2(){ ... } } directives: { 'my-directive': { bind: function(){ //钩子函数，只调用一次，在指令第一次绑定到元素上时调用 } update: function(newValue, oldValue) { //钩子函数，在bind之后以初始值为参数第一次调用，之后每当绑定至变化时调用 } unbind: function(){ //钩子函数，只调用一次，在指令从元素上解绑时调用 } } } // 自定义指令，在<template>中以<div v-my-directives = ""> 方式调用 } </script> <style> </style>
<template>中放置的是这个页面（或者页面的一部分）所拥有的控件，而<script>中定义的是Vue的数据对象和方法，<style>中定义的是控件的css样式。
在methods中经常使用到“this”关键字，该关键字指向Vue组件实例。
event.target: 触发事件的具体控件，不产生冒泡作用，是谁就是谁，这个在锁定事件触发的控件时经常用到，比如：
<div @click.stop = "addItem($event)"> <span data-type = "radio">单选题</span> <span data-type = "checkbox">多选题</span> <span data-type = "textarea">文本题</span> </div> <script> export default{ method: { addItem(event){ let target = event.target if(target.nodeName.toLowerCase() === 'span') { // 当点击了选择的按钮后 this.showMask = true // 显示弹出框 this.questItem.type = target.dataset.type // 设置问题的类型 } } } </script>
最后讲讲this.$els: 一个对象，包含注册有v-el的DOM元素
<div class = "promt-header"> <div> <label> 问题名称： </label> <input type = "text", placeholder = "请输入标题" v-el: item-title/> </div> </div> <div class = "promt-footer" @click.stop = "handleInput(&event)"> <button type = "button" data-operation = "confirm"> 确定 </button> <button type = "button" data-operation = "cancel"> 取消 </button> </div> <script> methods: { handleInput(event) { let target = event.target if(target.nodeName.toLowerCase() !== 'button') { return } let itemTitle = this.$els.itemTitle let itemSelections = this.$els.itemSelections if(target.dataset.operation === "confirm") { if(this.questItem.type === "textarea") { this.addTextarea(itemTitle) } else { this.addSelections(itemTitle, itemSelections) } } else { this.handleCancel() } }, } </script>
上面的代码是不完整的，但是可以看到，v-el把该控件挂载在一个名字为"item-title"的实体中，我们可以通过this.$els.itemTitle将其提取出来
要使用该控件的属性值（输入值），可以这样：
this.$els.itemTitle.value