关于vue的一点笔记

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