vue学习笔记

最新推荐文章于 2023-07-03 15:07:33 发布

月紫汐

最新推荐文章于 2023-07-03 15:07:33 发布

阅读量548

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/weixin_43888129/article/details/88392935

版权

VUE 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、安装

1、vue安装配置

windows环境：https://www.cnblogs.com/ylboke/p/8393216.html
mac环境：
安装node.js和npmhttps://www.cnblogs.com/BinXu/p/6050850.html
安装vue https://blog.csdn.net/qq_31885421/article/details/82751940

2、在Vue项目中使用Vux

https://www.jianshu.com/p/45f79ce1d553

3、在vue中使用scss
https://www.cnblogs.com/sdcs/p/9104474.html

1、开始在vue项目中使用sass,在命令行输入一下命令进行安装（使用git命令行要用shift+insert 进行粘贴否则粘贴不上）

npm install node-sass --save-dev //安装node-sass
npm install sass-loader --save-dev //安装sass-loader
npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的！

这个时候你打开build文件夹下面的webpack.base.config.js
把里面的module改成这样的

build文件夹下面的webpack.base.config.js 在rules下添加
module: {
　　　　rules: [
　　　　　　　{
test: /.scss$/,
loaders: [“style”, “css”, “sass”]
}
]
}

3、安装scss报错

Module build failed: TypeError: this.getResolve is not a function at Object.loader 安装node-sass运行报错

https://blog.csdn.net/ze1024/article/details/100516650
这是因为当前sass的版本太高，webpack编译时出现了错误，这个时候只需要换成低版本的就行，下面说一下修改方法，很简单，如下，找到package.json文件，里面的 "sass-loader"的版本更换掉就行了。

我本地是将 “sass-loader”: “^8.0.0”，更换成了 “sass-loader”: “^7.3.1”,
1
这时候重新跑项目，就运行成功了。

也可以先卸载当前版本，然后安装指定的版本

卸载当前版本   npm uninstall sass-loader
安装     npm install sass-loader@7.3.1 --save-dev

二、常用指令

1、动态加载图片

<div class="avatar">![在这里插入图片描述]()</div>
src前有冒号

2、v-on 指令

v-on指令：用来绑定事件的
https://www.cnblogs.com/huzhuo/p/7466864.html

3、唤起电话：

<a class="flex" :href="'tel:' + tel">
</a>

data() {
	return{
		tel:'012-3456789'
	}
}

这里要注意，一定要在a链接里使用。否则无效。

三、常见的运行报错

1、打包时index文件空白/不显示图片

解决方法：图片路径写成相对路径：…/…/image/icon1.png

2、打包后在iOS端，按钮无效

https://blog.csdn.net/lizheng_0508/article/details/79267421
https://blog.csdn.net/Y_G_G/article/details/73920313

3、路由进入页面后，直接滚动到底部

https://www.cnblogs.com/cap-rq/p/10259495.html
https://blog.csdn.net/csl125/article/details/83996314

4、Module build failed: Error: No PostCSS Config found

这是因为缺少了一个配置文件，postcss.config.js，配置内容如下

module.exports = {
plugins: {
‘autoprefixer’: {browsers: ‘last 5 version’}
}
}
注意：这个文件是放在项目的根目录下的

5、获取接口数据，渲染时，会报错未定义；

v-for循环出该数据就不会报错

6、函数名字问题

函数名为小写时会报错。应该使用首字母大写或驼峰命名

7、 Cannot GET /

从win7环境变为mac环境下时：Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 7.x，
使用 npm rebuild node-sass，然后在更新一下npm update
https://blog.csdn.net/moxiaoya1314/article/details/79266086

8、解决vue路由与锚点冲突
https://www.cnblogs.com/lvmylife/p/7977114.html
传统的锚点定位会与vue-router中的路由设置存在冲突，解决方法自定义锚点跳转：

html：

<ul>
  <li><a href="" @click.prevent="custormAnchor('firstAnchor')">公共报文头</a></li>    
</ul>

js：

复制代码

methods: {
    custormAnchor(anchorName) {
        // 找到锚点
        let anchorElement = document.getElementById(anchorName);
        // 如果对应id的锚点存在，就跳转到锚点
        if(anchorElement) { anchorElement.scrollIntoView(); }
    }
}

9、Couldn’t find preset “es2015” relative to directory解决方法
npm install babel-preset-es2015 --save-dev

10、axios 跨域
https://blog.csdn.net/James_liPeng/article/details/86151073
https://blog.csdn.net/wh_xmy/article/details/87705840

四、常用功能

1、父子组件传参

2、v-for循环显示的数组，点击改变其样式。

这个和Vue的响应式原理相关，可以看这里：https://cn.vuejs.org/v2/guide/reactivity.html
vue官网给的官方解释：
在这里插入图片描述
关键点：使用this.$set(object,‘属性名’，值)

但是这里前面定义了 var that = this，但是使用that 和 this 都可以~~~~~
https://blog.csdn.net/qq_39985511/article/details/79778806
https://segmentfault.com/q/1010000012726122/a-1020000012726501

3、时间戳转换

https://www.cnblogs.com/haonanZhang/p/6952963.html、

4、获取时间

js获取当前时间的前一天/后一天
Date curDate = new Date();
var preDate = new Date(curDate.getTime() - 2460601000); //前一天
var nextDate = new Date(curDate.getTime() + 2460601000); //后一天
https://www.cnblogs.com/sxxjyj/p/6093326.html

5、vue项目如何刷新当前页面

http://www.cnblogs.com/mmzuo-798/p/9356253.html

常见的有3种方式：
window.location.reload()

其中最好的：
在这里插入图片描述

6、下拉加载

			if (that.scrollWatch) {
				window.addEventListener("scroll", that.handleScroll);//添加监听事件
			}
			

		//监听滚动
		handleScroll() {
			var that = this;
			if (that.scrollWatch) {
				//当前滚动条高度
				var scrollTop =
				window.pageYOffset ||
				document.documentElement.scrollTop ||
				document.body.scrollTop;
				//console.log("当前滚动条高度："+scrollTop)

				//内容高度
				var bodyScrollHeight = document.body.scrollHeight;
				var documentScrollHeight = document.documentElement.scrollHeight;
				var allheight =
				bodyScrollHeight - documentScrollHeight > 0
					? bodyScrollHeight
					: documentScrollHeight;

				//可视页面高度
				var windowHeight =
				document.documentElement.clientHeight || document.body.clientHeight;

				var bottom = allheight - windowHeight - scrollTop;
				if (allheight - windowHeight - scrollTop <= 0) {
					that.$vux.loading.show({
						text: "加载中"
					});
					that.myFunction();
					console.log("触底加载更多");
				}
			}
		},

7、APP保持登录状态

router.beforeEach((to, from, next) => {
console.log(to)
console.log(from)
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if(window.localStorage.getItem('uid')){ //判断本地是否存在uid
      	next();
    }else {
      	next({
       		path:'/login'
      	})
    }
}
else {
	next();
}
/*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
if(to.fullPath == "/login"){
    if(window.localStorage.getItem('uid')){
      next({
        path:from.fullPath
      });
    }else {
      next();
    }
}

});

8、纯css隐藏移动端滚动条解决方案（ios上流畅滑动）

https://www.jianshu.com/p/01a85bf1e113/

9、vue实现加入购物车动画
https://www.jianshu.com/p/c5e4b49b4f2d

10、vue实现点击页面空白处，隐藏弹窗
https://segmentfault.com/q/1010000005852589

html部分：

    <button class="navbar-toggler" id="toggler-btn" type="button" @click="toggleMenu">
          <span class="navbar-toggler-icon" id="toggler-icon"></span>
    </button>
            -----------------

vue部分：

     created() {
        let body = document.querySelector('body')
        body.addEventListener('click',(e)=>{
            console.log(e.target.id === 'toggler-icon')         
        if(e.target.id === 'toggler-btn' || e.target.id === 'toggler-icon'){
                this.isMenuActive = true
        }else {
            this.isMenuActive = false
        }
        },false)
    },

methods: {
toggleMenu(e) {
        this.isMenuActive = !this.isMenuActive

        console.log('event', e)
    }
}

11、多行文字只显示部分几行时，编译后无效
/! autoprefixer: off /
-webkit-box-orient: vertical;
/* autoprefixer: on */

12、页面滚动时，实现导航跟踪高亮
涉及知识点：获取页面滚动高度、页面组件高度；
https://segmentfault.com/a/1190000009306458

如果导航是单独的组件，还涉及到父子组件动态传参，watch方法
https://blog.csdn.net/xr510002594/article/details/83304141

代码：

父组件增加页面滚动事件监听：

mounted(){
        let that = this
        window.addEventListener('scroll', function() {
            var pos = document.documentElement.scrollTop;
            var parts = document.getElementsByClassName('main_item')
            let n = parts.length
            for(var i = n-1;i>=0;i--){
                if(pos>=parts[i].offsetTop-400){
                    console.log('现在内容定位在第' + (i+1) + '项')
                    that.curIndex = i
                	break
                }
            }

        })
    },

子组件动态获取参数：
watch:{
	curIndex(val){    //curIndex即为父组件的值，val参数为值
  	this.listIndex = val    //将父组件的值赋给 子组件的值
}

}

五、文档

1、VUE官方文档
2、父子组件传参
3、var that = this
4、Robin Pokorny 的深度解析使用索引作为 key 的负面影响
https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318