Vue 学习笔记

1、npm install 常用安装命令

npm install moduleName # install(i) 安装模块到项目目录下
npm i moduleName # 安装模块到项目目录下(缩写)
 
npm install --global moduleName # ---global(-g) 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。
 
npm install -save moduleName # -save(-S) 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。
 
npm install -save-dev moduleName # -save-dev(-D) 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
npm --save-prod = npm -P

#卸载
npm uninstall moduleName #卸载命令，参数与安装同步,如：npm uninstall vue-cli -g

#更新
npm update moduleName #更新命令，参数与安装同步，如：npm update -g @vue/cli

2、安装Vue命令

# 最新稳定版
$npm install vue@next

3、安装单文件组件解析命令@vue/complier-sfc

npm install -D @vue/compiler-sfc

4、安装Cli命令工具

npm install -g @vue/cli

v-on:click===@click

v-bind:[attributeName]====:[attributeName]

对于任何复杂逻辑，你都应当使用计算属性。

computed: {
// 计算属性的 getter
reversedMessage: function () {
// this 指向 vm 实例
return this.message.split('').reverse().join('')
}
}

计算属性和方法的区别：计算属性是依赖于依赖属性更改时才修改值，例如下面这个例子，取得是第一次的时间，后续使用时都不会刷新，但方法会刷新。

computed: {
now: function () {
return Date.now()
}
}

computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}

computed,watch,method

class 绑定

v-bind:class="{active:isAcitve,'text-danger':hasError}"

v-bind:class="{classObject}"

data: {
classObject: {
active: true,
'text-danger': false
}
}

v-bind:class="[activeClass, errorClass]"

data: {
activeClass: 'active',
errorClass: 'text-danger'
}

当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

Style绑定

v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"

data: {
activeColor: 'red',
fontSize: 30
}

v-bind:style="styleObject"

data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

v-bind:style="[baseStyles, overridingStyles]"

事件

v-on:click="method"

.stop 阻止单击事件继续传播
.prevent 阻止
.capture
.self
.once
.passive

创建项目

vue create ProjectName
npm i vant -S
npm i babel-plugin-import -D
npm i axios -S
npm install amfe-flexible --save #安装随html、body变化重设Font-size大小
npm install postcss-pxtorem --save-dev #安装自动渲染px至rem

通过调用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由：

ENV全局变量注意！！！！定义变量必须以：VUE_APP_XXXX 开头

scope

使用scope隔离样式时，如果需要修改插件样式，需要在插件样式前增加“/deep/”，否则可能不起作用

原理：

.a{
	.b{width:100%}
}/*编译后会变成 .a .b[data-v-5c9fb0fc]{width:100%}*/

.a{
	/deep/.b{width:100%}
}/*编译后会变成 .a[data-v-5c9fb0fc] .b{width:100%}*/

参考：https://blog.csdn.net/weixin_41604040/article/details/111054616

踩䟘

van-tabbar路由切换后不能回到默认路由页面

使用van-tabbar路由时，开始路由关键字为"router"不是“route”，不然默认子路由会一直选中，而且切换后不能回到默认路由页面。

通过属性传递图片路径处理

需要在调用时先用"require"加载图片，如：

路由跳转不能自动回到页面顶面问题

const router = createRouter({
history: createWebHashHistory(),
routes,

// 点击浏览器的前进后退或切换导航触发

scrollBehavior (to, from, savePosition) {
// return 期望滚动到哪个的位置
console.log(to,from,savePosition);
if (savePosition) {
return savePosition;
} else {
return {left:0,top:0}
}
}
});