【Lecture】Vue的新体会

最新推荐文章于 2024-09-23 23:50:46 发布

星空•物语

最新推荐文章于 2024-09-23 23:50:46 发布

阅读量847

点赞数 1

分类专栏： # Lecture 文章标签： D2Admin适配

本文链接：https://blog.csdn.net/qq_40265247/article/details/112724186

版权

Lecture 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1路由视图

 <router-view/>

可以有多个，顶层的一定在app.vue中，与router-link对应关系参见link。就近原则，哪个root-view所在vue的路由位置离router-link中to的路由路径近，就在该路由视图中显示。

2路由链接

 <router-link to="路由路径"  >名称A</router-link>

//通过router-link点击"名称A"可以进入路由界面

vue中页面跳转方法：link
跳转并传参link

3子组件及v-model通信

这个方式么，是属于你的一部分，不用点击都能看到．不过在用之前得声明下．
(1)局部的话就

<SingleUpload v-model="dataForm.logo"></SingleUpload>
．．．
import SingleUpload from "@/components/upload/singleUpload.vue";
．．．
import SingleUpload from "@/components/upload/singleUpload.vue";

在子组件中可以下面的方式this.$emit(‘input’, val)，去改变父组件中v-model和子组件中的value值为val

/home/xu/PersonProjects/FrontEndProjects/renren-fast-vue/src/components/upload/singleUpload.vue

props: {
      value: String  // 声明接收标签属性
    },
    ...
methods: {
   this.$emit('input', val)
  },
}

(2)全局声明的话
在这里插入图片描述
/home/xu/PersonProjects/FrontEndProjects/d2-admin-start-kit/src/components/index.js(上图的最下面的那个index.js)

import Vue from 'vue'

import d2Container from './d2-container'  //该文件夹下是index.js(整合后统一暴露)所以可以省略
import d2ContainerFrame from './d2-container-frame'　//该文件夹下是index.vue所以可以省略

// 注意 有些组件使用异步加载会有影响
Vue.component('d2-container', d2Container)
Vue.component('d2-container-frame', d2ContainerFrame)
Vue.component('d2-icon', () => import('./d2-icon'))
Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))

这样任意vue中不用声明就可以直接用了

  <d2-container>
    <template slot="header">Page 1 header</template>
    Hello World
  </d2-container>

4.Vue中的ref

参考link

5 …的作用

/home/xu/PersonProjects/FrontEndProjects/d2-admin/src/router/routes.js

// 重新组织后导出
export default [
  ...frameIn,
  ...frameOut,
  ...errorPage
]

…对数组和对象而言，就是将运算符后面的变量里东西每一项拆下来。

6 .env配置全局环境变量

参看link
总共有三种模式：link
执行npm run serve命令，会自动加载.env.development文件

7.组件路由映射

d2-admin中总共有两个菜单栏,一个是顶部,一个是左侧
在这里插入图片描述
菜单栏中每个项都绑定了一个路由path,这里就以demo-components为例
d2-admin-lecture/src/menu/modules/demo-components.js

export default {
  path: '/demo/components',
  title: '组件',
  icon: 'puzzle-piece',
  children: [
	
    {
      path: '/demo/components/editor',
      title: '编辑器',
      icon: 'pencil-square-o',
      children: [
        { path: '/demo/components/editor-ueditor', title: 'UEditor', icon: '' },
        { path: '/demo/components/editor-quill', title: 'Quill', icon: '' },
        { path: '/demo/components/editor-simpleMDE', title: 'simpleMDE', icon: '' }
      ]
    },
 ]
}

然后在index.js中将集体加载进menu
在这里插入图片描述
咱再去看看路由是怎么配置的吧

d2-admin-lecture/src/router/modules/components.js

export default {
  path: '/demo/components',
  name: 'demo-components',
  meta,
  redirect: { name: 'demo-components-index' },
  component: layoutHeaderAside,
  children: [
      { path: 'countup', name: 'demo-components-countup', component: _import('demo/components/countup'), meta: { ...meta, title: '数字动画' } },
    { path: 'editor-ueditor', name: 'demo-components-editor-ueditor', component: _import('demo/components/editor-ueditor'), meta: { ...meta, title: 'UEditor' } },
    { path: 'editor-quill', name: 'demo-components-editor-quill', component: _import('demo/components/editor-quill'), meta: { ...meta, title: '富文本编辑器' } },
    { path: 'editor-simpleMDE', name: 'demo-components-editor-simpleMDE', component: _import('demo/components/editor-simpleMDE'), meta: { ...meta, title: 'markdown编辑器' } },
 ]
}

在这里插入图片描述
由routes.js统一组织,并导出

8.全局挂载

在main.js中

//照猫画虎
import { request } from "@/api/_service_xu"; //axios请求方法
// 挂载全局
Vue.prototype.$request = request

使用

          this.$request({
            url: "",
            method: "get",
            params: {},
            headers: {},
          }).then(({ data }) => {});

9.销毁前解除Pubsub订阅

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.catIdSub = PubSub.subscribe("catId", (msg, val) => {
      this.lec.organize.catId = val;
    });
  },
beforeDestroy() {
    PubSub.unsubscribe(this.catIdSub); //解除订阅
  }, //生命周期 - 销毁之前

10. watch监听

参考link
1.data中有这么个属性text,直接监控其变化

  //监控data中的数据变化
  watch: {
    text(val) {
      //这里的val是被监控属性text变化后的值
      this.lec.content = val;
    },
  },

2.监听对象dataForm的某个属性变化:

watch: {
    "dataForm.roleId"(val) {
      console.log("当前注册用户选择的角色是", val);
    },
  },

11.需要等待axios异步结果

/home/xu/PersonProjects/FrontEndProjects/d2-admin-lecture/src/api/sys.user.js

export async function SYS_USER_LOGIN(data = {}) {
  var user = null
  await request({
    url: 'user/auth/login',
    method: 'post',
    data: data,
    headers: {
    },
  }).then(({ data }) => {
    user =  data.data
  })
  console.log("原始", user)
  return assign({}, user, { token: faker.random.uuid() }) //暂时先给个模拟的token
}

注意await只能在async标注的作用内使用

12.@mounsedown等鼠标事件失效解决

@click是好使的,而别的鼠标非点击事件,记得失效的话加个native

<el-form-item>
   <el-button type="success" @mousedown.native.once="showLecMD" @mouseup.native="collectLecBaseInfo"
     >下一步：设置正文介绍</el-button
   >
 </el-form-item>

13.props的default格式问题

invalid default value for prop “forbiddenRoles”: Props with type Object/Array must use a factory func
在vue官网的风格指南上已说明：对象和数组接收格式均以函数的形式
对象:

    props: {
      changeData:{
        type: Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default: ()=>{ return {} }
      }
    },

数组:

 props: {
    forbiddenRoles: {
      type: Array,
      default: () => [],
      required: false,
    },
 }

14.子组件的手动销毁与重置

/home/xu/PersonProjects/renren_lecture/renren-lecture-vue/src/views/modules/lecture/publish.vue

<lecMde
  	v-model="lec.content"
  	v-if="mdeDestroy"
    class="mde"
    ref="lecMDE"
 />

mdeDestroy: true,   //控制变量

//控制逻辑如下
this.mdeDestroy = false; //销毁该组件   效果同 this.$destroy(lecMde) 即按照组件名称销毁
this.$nextTick(() => {
   this.mdeDestroy = true; //下一个tick 重新创建该组件
 });

15. moment页面日期格式化

npm install moment --save

在main.js中全局挂载下

import moment from "moment";
Vue.prototype.$moment = moment

<span>
 预约起止:{{
     $moment(item.seckillVo.startTime).format("MM-dd hh:mm")
   }}_{{
     $moment(item.seckillVo.endTime).format("MM-dd hh:mm")
   }}
</span>

element-ui

slot-scope

<el-table :data="tableData" style="width: 100%">
//---:data="用于存放请求数据回来的数组" 
 <el-table-column label="标题" width="350">
        <template slot-scope="scope">//--- 这里取到当前单元格
            <span>{{ scope.row.title }}</span>
            //--- scope.row 直接取到该行数据对象，即是tableData[scope.$index]
            //---.title 是对象里面的title属性的值
        </template>
    </el-table-column>
</el-table>

三元表达式

<el-table-column
        prop="gender"
        header-align="center"
        align="center"
        label="性别: 0-女  1-男"
      >
        <template slot-scope="scope">{{
          scope.row.gender == 1 ? "男" : "女"
        }}</template>
</el-table-column>

el-form对于嵌套属性校验

参考link

Bug

TypeError: Object(…) is not a function

这个问题主要出在,将import { request } from “@/api/_service_xu”;错写成~~import request from “@/api/_service_xu”;~~
而_service_xu又对外暴露了多个元素,如果不解构(link)获取的话,返回的就是Object

import’ and ‘export’ may only appear at the top level

在.eslintrc.js的rules中添加"global-require": 0 参考Link

js对象.forEach is not a function

	this.$nextTick(() => {         
          var mdImgs = document.all("contentMD").getElementsByTagName("img");
          mdImgs.forEach(elem=>{
            console.log("能找到img");
            elem.style.cssText = "width:1000px";
         })

改变id="contentMD"下所有img标签图片的大小，但是上面的写法是有问题的，正确做法：
DOM集合对象要先转化为数组参考link

	this.$nextTick(() => {         
          var mdImgs = document.all("contentMD").getElementsByTagName("img");
          Array.prototype.forEach(mdImgs,function(elem,index){
            console.log("能找到img");
            elem.style.cssText = "width:1000px";
         })