个人对前端vue中template页面的理解_vue template onload-CSDN博客

本文链接：https://blog.csdn.net/qq_45337268/article/details/127178220

本文介绍了一个基于Vue的图片裁剪组件实现细节，包括如何使用Cropper.js进行图片裁剪，以及如何在组件中集成表格视图(TableDataView)以展示数据。文章还展示了如何设置属性如src、preview等，并提供了数据监听和方法调用的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建xxx.vue文件
模板代码如下:
最顶部是template标签
import {STable, Ellipsis} from ‘@/components’
import Cropper from ‘cropperjs’
import ‘./index.less’
import ‘cropperjs/dist/cropper.min.css’
import TableDataView from ‘./TableDataView’

export default {
name: ‘dbList’, //和文件名一致
components: {STable, Ellipsis, TableDataView}, //引入的组件
props: {
src: {
type: String,
default: ‘’
},
preview: {
type: Boolean,
default: true
},
moveStep: {
type: Number,
default: 4
},
},
data () {
return {
visible: false,
cropper: null,
insideSrc: ‘’,
checkedKeys: [],
queryParam: {name: ‘’, type: 1},
columns: [{title: ‘名称’,dataIndex: ‘name’,},{title: ‘创建时间’,dataIndex: ‘time’,}]
}
},
onLoad(option) { //执行顺序1
console.log(“Onloadonload!!!”)
this.productId = option.productId
},
onShow(){ //执行顺序2
console.log(“onshowonshowonshowonshow!!!”)
},
mounted() { //执行顺序3
console.log(“mountedmountedmounted!!!”)
this.init();
},
created () {}, //在vue中执行顺序在mounted之前
mounted () {},
beforeDestroy() {
console.log(“离开页面前销毁方法执行…”)
},
computed: {
…mapGetters([‘loginInfo’]),
imgId () {
return cropper${this._uid}
},
previewId () {
return cropper_preview${this._uid}
}
},
watch: {
src (src) {
this.replace(src)
},
},
methods: {
replace (src) {
},
},

}