深圳住房和建设管理局官方网站深圳市住房和建设局领导班子

当前位置： 首页 > news >正文

深圳住房和建设管理局官方网站,深圳市住房和建设局领导班子,辽宁建设工程信息网业绩录入规定,wordpress设置权限html中如何用vue语法#xff0c;并使用UI组件库 前言 先说一下本次应用的场景#xff0c;本次项目中#xff0c;需要引入github中别人写好的插件#xff0c;插件比较大#xff0c;没有方法直接在自己项目中#xff0c;把别人的项目打包合并生成html#xff08;类似于前…html中如何用vue语法并使用UI组件库 前言 先说一下本次应用的场景本次项目中需要引入github中别人写好的插件插件比较大没有方法直接在自己项目中把别人的项目打包合并生成html类似于前端项目打包生成的 dist 修改这里面的html这种情况要么用原生js写或者jquery还相对快一些那为什么不直接用vue语法呢哈哈哈下面就教你怎么写。 首先你要有vue3对应的js文件和antd组件库对应的文件要么就用cdn vue3 ant-design-vue 这里用antDesignVue4.0 直接上代码相信你可以看懂的 注意看 ant-design-vue官网
!DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue3语法模板/titlescript srchttps://unpkg.com/vuenext/script!– link relstylesheet hrefhttps://unpkg.com/element-plus/dist/index.css /script srchttps://unpkg.com/element-plus/script –script srchttps://unpkg.com/dayjs/dayjs.min.js/scriptscript srchttps://unpkg.com/dayjs/plugin/customParseFormat.js/scriptscript srchttps://unpkg.com/dayjs/plugin/weekday.js/scriptscript srchttps://unpkg.com/dayjs/plugin/localeData.js/scriptscript srchttps://unpkg.com/dayjs/plugin/weekOfYear.js/scriptscript srchttps://unpkg.com/dayjs/plugin/weekYear.js/scriptscript srchttps://unpkg.com/dayjs/plugin/advancedFormat.js/scriptscript srchttps://unpkg.com/dayjs/plugin/quarterOfYear.js/scriptlink relstylesheet typetext/css href./ant/antd.reset.css mediascreenscript src./ant/antd.js/script /head style /stylebodydiv stylewidth:100%; idappdiv{{exp_id}}/divdiv{{fullNum}}/divdiv v-foritem in dateTime :keyitem{{item}}/diva-button typeprimary clickupload(更新)更新/a-buttona-button typedashed clicksets(恢复)恢复/a-buttona-button danger clickdialog打开弹框/a-buttondiva-select v-modelvalue classm-2 placeholderSelect sizelargea-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value //a-select/div/div /body/html scriptObject.assign(window, Vue);const vue3Composition {setup() {// 变量部分const data reactive({exp_id: 虚拟实验id,dateTime: [1, 2, 3, 4, 5],value: ,dialogVisible: false,options: [{value: Option1,label: Option1,},{value: Option2,label: Option2,}]});// toRef: 复制 reactive 里的单个属性并转成 ref// toRefs: 复制 reactive 里的所有属性并转成 refconst dataRef toRefs(data)// 监听watch(dataRef.exp_id, (newName, oldName) {console.log(新数据, newName);console.log(老数据, oldName);})// 计算属性dataRef.fullNum computed(() {return dataRef.value});// 生命周期 mountedonMounted(() {console.log(我是Mounted生命周期)})// 函数部分const methods reactive({upload(e) {dataRef.exp_id.value 修改dataRef.dateTime.value [8, 9, 10, 11, 12]//this.dialog() //调用其他方法加this可以调用到},sets(e) {dataRef.exp_id.value 虚拟实验iddataRef.dateTime.value [1, 2, 3, 4, 5]},dialog() {dataRef.dialogVisible.value true}})return {…dataRef,…methods}},}const app createApp(vue3Composition).use(antd).mount(#app);//初始化 /script vue2 element-plus 这里对应的vuejs我下载到本地了自己去cdn上面找一个就好了 !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue2语法模板/title!– script srchttps://unpkg.com/vuenext/scriptlink relstylesheet hrefhttps://unpkg.com/element-plus/dist/index.css /script srchttps://unpkg.com/element-plus/script –script src./vue2/vue2.js/scriptscript src./vue2/element-ui/index.js/scriptlink relstylesheet href./vue2/element-ui/index.css / /head style /stylebodydiv stylewidth:100%; idappdiv{{activeType}}/divdiv{{fullNum}}/divdiv v-foritem in dateTime :keyitem{{item}}/divel-button typeprimary clickupload(更新)更新/el-buttonel-button typesuccess clicksets(恢复)恢复/el-buttonel-button typewarning clickdialog打开弹框/el-buttondivel-select v-modelvalue classm-2 placeholderSelect sizelargeel-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value //el-select/div/div /body/html scriptnew Vue({el: #app,data() {return {//左边菜品类别indexactiveType: 0,categoryList: [],categoryId: undefined,}},computed: {},created() {},watch: {},mounted() {this.initData()},methods: {}})/script vue3 element-plus !DOCTYPE html html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlevue3语法模板/titlescript srchttps://unpkg.com/vuenext/scriptlink relstylesheet hrefhttps://unpkg.com/element-plus/dist/index.css /script srchttps://unpkg.com/element-plus/script /head style /stylebodydiv stylewidth:100%; idappdiv{{exp_id}}/divdiv{{fullNum}}/divdiv v-foritem in dateTime :keyitem{{item}}/divel-button typeprimary clickupload(更新)更新/el-buttonel-button typesuccess clicksets(恢复)恢复/el-buttonel-button typewarning clickdialog打开弹框/el-buttondivel-select v-modelvalue classm-2 placeholderSelect sizelargeel-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value //el-select/divel-dialog v-modeldialogVisible titleTips width30%spanThis is a message/spantemplate #footerspan classdialog-footerel-button clickdialogVisible falseCancel/el-buttonel-button typeprimary clickdialogVisible falseConfirm/el-button/span/template/el-dialog/div /body/html scriptObject.assign(window, Vue);const vue3Composition {setup() {// 变量部分const data reactive({exp_id: 虚拟实验id,dateTime: [1, 2, 3, 4, 5],value: ,dialogVisible: false,options: [{value: Option1,label: Option1,},{value: Option2,label: Option2,}]});// toRef: 复制 reactive 里的单个属性并转成 ref// toRefs: 复制 reactive 里的所有属性并转成 refconst dataRef toRefs(data)// 监听watch(dataRef.exp_id, (newName, oldName) {console.log(新数据, newName);console.log(老数据, oldName);})// 计算属性dataRef.fullNum computed(() {return dataRef.value});// 生命周期 mountedonMounted(() {console.log(我是Mounted生命周期)})// 函数部分const methods reactive({upload(e) {dataRef.exp_id.value 修改dataRef.dateTime.value [8, 9, 10, 11, 12]//this.dialog() //调用其他方法加this可以调用到},sets(e) {dataRef.exp_id.value 虚拟实验iddataRef.dateTime.value [1, 2, 3, 4, 5]},dialog() {dataRef.dialogVisible.value true}})return {…dataRef,…methods}},}const app createApp(vue3Composition).use(ElementPlus).mount(#app);//初始化 /script