前言
vue 模版文件,每次写组件需要复制的模版文件
01.vue文件模版
<!--
* @Description:
* @Version: 1.0
* @Autor:
* @Date: 2020-05-11 10:34:23
* @LastEditors:
* @LastEditTime: 2021-01-08 10:15:43
-->
<template>
<div class="div_box_parent">
HelloWord
</div>
</template>
<script>
export default {
name: 'Template',
components: {},
filters: {
titleFilter(value) {
return value.substring(3)// 使用方式 <span v-text="title | titleFilter" />
}
},
directives: {
},
mixins: [],
props: {
title: {
type: String,
required: true,
default: '名称',
validator: function(value) {
return true
}
}
},
data() {
return {
}
},
computed: {
newTitle() {
return this.title
}
},
watch: {
$route: {
handler: function(route) {
console.log(route)
},
immediate: true,
deep: true
}
},
/**
* @description: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
*/
beforeCreate() {
},
/**
* @description: 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：
* 数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。
* 然而，挂载阶段还没开始，$el property 目前尚不可用。
*/
created() {
},
/**
* @description: 在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。
*/
beforeMount() {
},
/**
* @description: 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，
* 当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，
可以在 mounted 内部使用 vm.$nextTick：
*/
mounted() {
},
/**
* @description: 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的
* DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，
* 因为只有初次渲染会在服务端进行。
*/
beforeUpdate() {
},
/**
* @description: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
* 注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，
* 可以在 updated 里使用 vm.$nextTick：
*/
update() {
},
/**
* @description: 被 keep-alive 缓存的组件激活时调用。
该钩子在服务器端渲染期间不被调用。
*/
activated() {
},
/**
* @description: 被 keep-alive 缓存的组件停用时调用。
该钩子在服务器端渲染期间不被调用。
*/
deactivated() {
},
/**
* @description: 实例销毁之前调用。在这一步，实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
*/
beforeDestroy() {
},
/**
* @description: 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，
* 所有的事件监听器被移除，所有的子实例也都被销毁。该钩子在服务器端渲染期间不被调用。
*/
destroy() {
},
/**
* @description: 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、
* 发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回
* false 以阻止该错误继续向上传播。
* @param {Error} err
* @param {Component} vm
* @param {String} info
* @return {boolean}
*/
// eslint-disable-next-line handle-callback-err
errorCaptured(err, vm, info) {
return false
},
methods: {
handlerTemp() {
}
}
}
</script>
<style scoped lang="scss">
.div_box_parent {
color: black;
}
</style>
<style lang="scss">
.div_box_parent {
color: black;
}
</style>
02.vue无状态文件模版
<!--
* @Description:
* @Version: 1.0
* @Autor:
* @Date: 2020-05-11 10:34:23
* @LastEditors:
* @LastEditTime: 2021-01-08 10:15:43
-->
<template functional>
<div>
<p v-for="item in tempArrss" :key="item">{{item}} </p>
</div>
</template>
<script>
export default {
functional: true,
name: 'Template',
props: {
tempArrs: {
type: Array,
default: [],
}
}
}
</script>
<!--
* @Description:
* @Version: 1.0
* @Autor:
* @Date: 2020-05-11 10:34:23
* @LastEditors:
* @LastEditTime: 2021-01-08 10:15:43
-->
export default {
functional: true,
render(createElement,context) {
return createElement(
"button", 'Click me'
);
}
};
03.vuehtml中文件模版
<html>
<head>
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/x-template" id="template">
<input type="text" :value="uname" @input="updateVal($event.target.value)">
</script>
</head>
<body>
<!-- demo root element -->
<div id="demo">
<my-input v-model="uname" value="some value"></my-input>
{{uname}}
</div>
<script>
Vue.component("my-input", {
template: "#template",
model: {
prop: "uname",
// 随便命名事件，对应下面$emit即可
event: "changeXXX"
},
props: {
uname: {
type: String,
default: "tom"
}
},
methods: {
updateVal(val) {
this.$emit("changeXXX", val);
console.log(val)
}
}
});
// bootstrap the demo
var demo = new Vue({
el: "#demo",
data: {
uname:'ll'
}
});
</script>
</body>
</html>
