vue开发1.1
在c盘
npm install vue -g // 全局安装vue
npm install webpack -g // 全局安装webpack
npm install -g @vue/cli //全局安装vue/cli
在项目盘
npm i -g @vue/cli-init test_vue // 引入vue/cli依赖
vue init webpack test //安装webpack 用脚手架创建vue项目 test就是项目名
router true //是否引用router
eslint true // 是否启用eslint
其他选项都是默认就可以了 这样我们就创建了一个vue项目
methods 写方法的地方
watch监控页面变量变化执行方法
子组件获取父组件属性 变量名用驼峰式camelCase
父组件调用子组件属性名用横线式 kebab-case
v-slot,插槽指令,缩写:#,一般不使用缩写
父组件引用调用
子组件
效果
用于作用域插槽时
页面跳转
this.$router.push({
name: 'gameEdit',
query: { id: row.gameId }
})
beforeRouteUpdate (to, from, next) {
console.log(1111111111111)
}页面刷新时执行新增时跳转本页面执行
监控query参数变化用于新增时跳转当前页面改为编辑状态使用
watch:{
'$route.query.id'(val){
this.gameId = val;
getGameDetail(val).then((res) => {
this.gameForm = res.data;
});
}
},
vue和react都是状态基
//2021/12/26
Q: 什么时候用v-if,什么用 v-show!
我们先来说说两者的核心差异;
v-if : DOM 区域没有生成,没有插入文档,等条件成立的时候才动态插入到页面!
有些需要遍历的数组对象或者值,最好用这货控制,等到拿到值才处理遍历,不然一些操作过快的情况会报错,比如数据还没请求到!
v-show: DOM 区域在组件渲染的时候同时渲染了,只是单纯用 css 隐藏了
对于下拉菜单,折叠菜单这些数据基本不怎么变动.用这个最合适了,而且可以改善用户体验,因为它不会导致页面的重绘,DOM 操作会!
简言之: DOM结构不怎么变化的用v-show, 数据需要改动很大或者布局改动的用v-if
vue数据如果页面用了v-model绑定数据 提交时若需转换则要在新建一个变量并且把数据解构赋值给新变量 提交新的变量
持续更新。。。。//2022/1/8