Vue笔记

最新推荐文章于 2024-02-20 14:46:34 发布

原创最新推荐文章于 2024-02-20 14:46:34 发布 · 775 阅读

0 ·

CC 4.0 BY-SA版权

原创同时被 3 个专栏收录

28 篇文章

订阅专栏

笔记

25 篇文章

订阅专栏

Vue

20 篇文章

订阅专栏

这篇博客记录了Vue开发中的一些常见问题，包括js字符串处理、事件冒泡阻止、vue步骤进度props、样式覆盖问题及解决方案。此外，还讨论了Vue的指令如v-if、v-else、v-show、v-for、v-text、v-html、v-on和v-model的用法，以及如何处理路由参数、歌词链接、返回上一页等实际开发场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue爬坑

js字符串的处理

vue阻止事件冒泡

@click.stop

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

vue步骤进度props

如下图所示，第一时间我想到使用vuex进行控制。实践过程中发现需要每个页面都去控制vuex的属性。

优化：：：使用props Head.vue

<template>
  <div>
    {{ $store.state.pageNum }}
    <div id="step-box">
      <div id="step-bar-box">
        <!-- <div :class=" $store.state.pageNum >= 4 ?'circle-yes':''" class="circle">
          <p >提交成功</p>
        </div> -->
        <div id="step-bar"></div>
        <div  v-for="(value,index) in list" :class="[{'circle-yes':steps>=value.id},{'circle-left':index==0}]" :key="index" class="circle">
          <p>{{ value.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 import store from '@/store/store';
 export default {
    name: "Header",
    data() {
      return {
         list:[
           { 'id':1,'name' : '手机验证' },
           { 'id':2,'name' : '作品上传' },
           { 'id':3,'name' : '作品信息' },
           { 'id':4,'name' : '个人信息' },
           { 'id':5,'name' : '提交成功' },
         ]
      };
    },
    props:{
       steps:{
         default:1
       }
    }
  };
</script>

<style scoped>
.circle-yes p{
  color:#333333;
}

.circle{
    width: 0.18rem;
    height: 0.18rem;
    border-radius: 50%;
    border: solid 0.01rem #979797;
    display: inline-block;
    background-color: #fff;
    margin-left: 0.545rem;
    z-index: 30;
    position: relative;
}

.circle p{
    position: absolute;
    width: 0.53rem;
    font-size: 0.13rem;
    top: 0.25rem;
    left: -0.175rem;
    color: #999999;
}
.circle span{
    position: absolute;
    font-size: 0.13rem;
    left: 0.025rem;
}

.circle-yes{
  border: none;
  background-image: url("../assets/img/wancheng.png");
  background-size: 100% 100%;
  position: relative;
  top: 0.01rem;
}
.circle-left{
  margin-left: 0px;
}
</style>

login.vue

 <template>
   <Header steps=3 ></Header>
 </template>
 <script>
 import Header from '../components/Header'
export default {
  data() {
    return { };
  },
  components: {
      Header
  },
}
</script>

vue样式加scoped后不能覆盖组件的原有样式解决方法

CSS的coped私有作用域和深度选择器
大家都知道当<style>标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

// 编译前
<style scoped>
.example {
  color: red;
}
</style>
// 编译后
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

看完你肯定就会明白了，其实是在你写的组件的样式，添加了一个属性而已，这样就实现了所谓的私有作用域。但是也会有弊端，考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影响就会消除。所以，在你的样式里，进来避免直接使用标签，取而代之的你可以给标签起个class名。
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符:

<style scoped>
// 编译前
.parent >>> .child { /* ... */ }
// 编译后
.parent[data-v-f3f3eg9] .child { 
    /* ... */ 
}
</style>

而对于less或者sass等预编译，是不支持>>>操作符的，可以使用/deep/来替换>>>操作符，例如：.parent /deep/ .child { /* … */ }
深度选择器

<style scoped>
//使用 scoped 后，父组件的样式将不会渗透到子组件中。
//使用深度作用选择器 /deep/ 或者'>>>' ,但注意像sass、less预处理器不认三个箭头
/deep/ .weui-progress {
    position: absolute;
    top: 50%;
    margin-top: -9px;
    width: 94px;
    height: 18px;
    border-radius: 15px;
}
/deep/ .weui-progress__bar {
   height: 12px!important;
}
/deep/ .weui-progress__inner-bar{
  border-radius: 50px;
}
</style>

vue a标签链接拼接

<a :href="['./ranklistmusic.html?id='+item.id ]"><a>

vue img标签 src 动态数据

<img :src="rlmimg" alt="" class="rlm-info-topimg">

vue 事件简写

v-bind        :bind
v-on:click   @

router路由获取url参数

// 父 传递
<router-link :to="{path:'MusicPlay',query:{'id':radioDataItem.radioid} }">
// 子 接收
console.log(this.$route.query.id)

mounted和created区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

QQ音乐歌词链接

这个没仔细弄

获取歌词也算是个坎，因为QQ因为设置了防盗链我们需要伪装一下自己，单纯用js恐怕无法实现了，我们可以用后端语言去获取，博主用的是node，里有个request的依赖包，用来修改我们的header，从而得到数据
https://blog.youkuaiyun.com/hhzzcc_/article/details/79769386

找了一个另外的入口

通过 jsonp 请求，url : https://api.darlin.me/music/lyric/ ,参数为：songid (你获取的歌曲id)
注意：因为返回数据为base64字符串所以要进行解码

   self.$http.jsonp('https://api.darlin.me/music/lyric/' + state.pc_songnow.songid, {
                  jsonp: 'callback'
                }).then(function (res) {
                  // split('[') 方法用于把一个字符串分割成字符串数组。
                  // slice(6) 方法可从已有的数组中返回选定的元素。
                  // map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
                  // 歌词信息
                  self.$store.state.pc_songlyric = base.decode(JSON.parse(res.bodyText).lyric.replace(/\s*/g, "")).split(
                    '[').slice(6).map(str => {
                    return {
                      'songTime': str.substr(0, 6),
                      'songText': str.substr(9)
                    };
                  });
                })

px2remLoader的使用,（手淘lib-flexible 已经弃用）

https://github.com/amfe/lib-flexible/tree/2.0 已经弃用 lib0flexible
https://github.com/amfe/lib-flexible/tree/master
https://www.w3cplus.com/css/vw-for-layout.html 新的vm适配
自动将px转为rem
px2rem官方文档

1.this.$router.go(val) => 在history记录中前进或者后退val步，当val为0时刷新当前页面。
2.this.$router.push(path) => 在history栈中添加一条新的记录。

// 实例化
<div id="app">
   {{ msg }}
</div>
var app = new Vue({
   el: 'app',
   // 参数
   data:{
      'msg' ：’hellow world!‘
   }
})

v-if v-else v-show 指令

v-if

v-if用来判断是否加载html的DOM

<div v-if="isLogin">你好！</div>

v-show

<div v-show="isLogin">你好！</div>

v-if 和v-show的区别：

v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

v-for 指令

基本用法：

<li v-for="item in data"></li>
item 每一条数据  index 下标
<li v-for="(item,index) in data"></li>

排序

computed 计算属性

== 我们在computed里新声明了一个对象newData。如果不重新声明会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。==

<li v-for="(item,index) in newData"></li>
computed:{
    newData:function(){
          return this.data.sort();
    }
}

对象循环输出

<ul>
   <li v-for="student in students">
       {{student.name}} - {{student.age}}
   </li>
</ul>
students:[
  {name:'jspang',age:32},
  {name:'Panda',age:30},
  {name:'PanPaN',age:21},
  {name:'King',age:45}
]
//数组对象方法排序:
function sortByKey(array,key){
    return array.sort(function(a,b){
      var x=a[key];
      var y=b[key];
      return ((x<y)?-1:((x>y)?1:0));
   });
}
sortByKey(this.students,'age');
computed:{
    sortStudent:function(){
     return sortByKey(this.students,'age');
   }
}

v-text & v-html 指令

我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。我们来看代码：

<span>{{ message }}</span>= <span v-text="message"></span><br/>

*如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。

<span v-html="msgHtml"></span>

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。完整代码：

v-on：绑定事件监听器

我们的v-on 还有一种简单的写法，就是用@代替。

 <div id="app">
       本场比赛得分： {{count}}<br/>
       <button v-on:click="jiafen">加分</button>
       <button @click="jianfen">减分</button>
</div>
   var app=new Vue({
            el:'#app',
            data:{
                count:1
            },
            methods:{
                jiafen:function(){
                    this.count++;
                },
                jianfen:function(){
                    this.count--;
                }
            }
        })

我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。绑定事件写法：

<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
onEnter:function(){
    this.count=this.count+parseInt(this.secondCount);
}

v-model指令

修饰符

v-model 双向数据绑定
v-model.lazy 失去焦点获取数据 == 监听 change 事件。
v-mode.number 输入字符串转为数字（先输入字符串就失效了）

文本区域加入数据绑定

<textarea  < cols="30" rows="10" v-model="message"></textarea>

多选按钮绑定一个值

<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>

*多选绑定一个数组

<h3>多选绑定一个数组</h3>
       <p>
            <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
            <label for="JSPang">JSPang</label><br/>
            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
            <label for="JSPang">Panda</label><br/>
            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
            <label for="JSPang">PanPan</label>
            <p>{{web_Names}}</p>
       </p>

单选按钮绑定数据

<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>
```