【Lecture】Vue的新体会

1路由视图

 <router-view/> 

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

2路由链接

 <router-link to="路由路径"  >名称Arouter-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 headertemplate>Hello Worldd2-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 = nullawait 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

<lecMdev-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-columnprop="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";})

迁移后Bug

check python checking for Python executable python2 in the PATH（出现在 npm i 时）

即ubuntu中没有python2，直接安装下就好：sudo apt install python2

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！