Vue笔记

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 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私有作用域和深度选择器
大家都知道当 // 编译后

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

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

1. vue a标签链接拼接

2. vue img标签 src 动态数据

3. vue 事件简写

v-bind        :bind
v-on:click   @

4. router路由获取url参数

// 父 传递

// 子 接收
console.log(this.$route.query.id)

5. mounted和created区别

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

6. QQ音乐歌词链接

这个没仔细弄

获取歌词也算是个坎，因为QQ因为设置了防盗链我们需要伪装一下自己，单纯用js恐怕无法实现了，我们可以用后端语言去获取，博主用的是node，里有个request的依赖包，用来修改我们的header，从而得到数据
https://blog.csdn.net/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)
                    };
                  });
                })

7. 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官方文档

8. vue返回上一页

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

// 实例化

   {{ msg }}

var app = new Vue({
   el: 'app',
   // 参数
   data:{
      'msg' ：’hellow world!‘
   }
})

v-if v-else v-show 指令

1. v-if

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

你好！

2. v-show

你好！

3. v-if 和v-show的区别：

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

v-for 指令

1. 基本用法：

item 每一条数据  index 下标

2. 排序

computed 计算属性

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

computed:{
    newData:function(){
          return this.data.sort();
    }
}

3. 对象循环输出

   

       {{student.name}} - {{student.age}}
   

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 ((xy)?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,就是解决这个问题的。我们来看代码：

{{ message }}= 

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

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

v-on：绑定事件监听器

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

 

       本场比赛得分： {{count}}

       加分
       减分

   var app=new Vue({
            el:'#app',
            data:{
                count:1
            },
            methods:{
                jiafen:function(){
                    this.count++;
                },
                jianfen:function(){
                    this.count--;
                }
            }
        })

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

onEnter:function(){
    this.count=this.count+parseInt(this.secondCount);
}

v-model指令

• 修饰符

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

• 文本区域加入数据绑定

• 多选按钮绑定一个值

多选按钮绑定一个值

{{isTrue}}

*多选绑定一个数组

多选绑定一个数组
       

            
            JSPang

            
            Panda

            
            PanPan
            
{{web_Names}}
       

• 单选按钮绑定数据

单选按钮绑定

男

女
{{sex}}
```