Vue的学习（7）

Vue的学习（七）

let(变量)/const(常量)

在Vue中，let用于声明变量，const用于声明常量

• const
  • 一旦给const修饰的标识符被赋值之后，不能修改
  • 在使用const定义标识符时，必须进行赋值
  • 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性，因为const指向的是对象的地址

let app = new Vue({
	// 选项
});

Vue列表展示

<!-- html -->
<div id="app">
    <h1 v-for="item in message">
     {{message}}
    </h1>
</div>

---

// Vue
const example = new Vue({
    el:"#app",
    data:{
        message:['犀牛书','红宝石','你所不了解的js','Vue详解']
    }
});

---

// 控制台
app.message.push('Web前端开发')

Vue的MVVM

如下图

View层：

• 视图层
• 在前端开发中，通常就是DOM层
• 主要的作用是给用户展示各种信息

Model层：

• 数据层
• 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据

VueModel层：

• 视图模型层
• 视图模型层是View和Model沟通的桥梁
• 一方面它实现了Data Binging，也就是数据绑定，将Model的改变实时地反映到View中
• 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的Data

v-pre\v-cloak(了解即可)

v-pre属性能使标签内容完全不变地进行输出，不随Vue实例数据的改变而改变

v-cloak指令可以设置css样式，这些样式会在Vue实例编译结束时，从绑定的HTML元素上被移除

参考代码

// css
[v-cloak] {
    display: none;
}

---

<!-- html -->
<div id="app" v-cloak>
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>

---

// Vue
// 在Vue解析之前，div中有一个属性v-cloak
// 在Vue解析之后，div中没有一个属性v-cloak
setTimeout(function () {
    const example = new Vue({
        el: "#app",
        data: {
            message: 'Hello World'
        }
    });
}, 1000);

当网络较慢，网页还在加载，导致Vue来不及渲染，这时页面就会显示出Vue源代码，影响用户体验，可以如上所示使用v-cloak指令来解决这一问题。

但大型、工程化项目基本不使用v-cloak指令来解决屏幕闪动问题。

ES6的增强写法

属性增强写法

参考代码

// js
const name = 'zzwi';
const age = 21;
const gender = '男';

const example = new Vue({
    name,
    age,
    gender
});

console.log(example);

函数增强写法

参考代码

// js
const example = {
    run(){
        
    },
    eat(){
        
    }
}

---

数组中的响应式方法

push方法

参考代码

<!-- html -->
<div id="app">
    <ul>
        <li>{{letters}}</li>
    </ul>
    <button @click='btnClick'>push</button>
</div>

// vue
const example = new Vue({
    el:'#app',
    data:{
        letters:['a','b','c','d','e']
    },
    methods:{
        btnClick(){
            this.letters.push('f');
        }
    }
});

运行效果如下：

pop方法

删除数组中的最后一个元素

参考代码与上方push方法大同小异，

this.letters.pop();

直接上效果图

运行效果如下：

shift方法

删除数组中的第一个元素

参考代码与上方push、pop方法大同小异，

this.letters.shift();

直接上效果图

运行效果如下：

unshift方法

在数组最前面添加元素

改动

this.letters.unshift('zero')

运行效果如下：

splice方法

在数组中可以 删除元素/插入元素/替换元素

1. 删除元素

   this.letters.splice(2,1);// 删除c
   

   

2. 插入元素

   this.letters.splice(2,0,'zero');
   

   

3. 替换元素

   this.letters.splice(2,1,'zero');
   

   

reverse方法

可以颠倒数组中元素的顺序

this.letters.reverse();

sort方法

用于对数组中的元素进行排序

参考代码

<!-- html -->
<div id="app">
    <ul>
        <li>{{letters}}</li>
    </ul>
    <button @click='btnClick'>sort</button>
</div>

// vue
const example = new Vue({
    el:'#app',
    data:{
        letters:['c','b','e','d','a']
    },
    methods:{
        btnClick(){
            // this.letters.push('f');
            this.letters.sort();
        }
    }
});

运行效果如下：

参考代码（给数字排序）

HTML一致

// vue
const example = new Vue({
    el:'#app',
    data:{
        letters:['100','56','43','2340','1555']
    },
    methods:{
        sortNumber(a,b){
            return a - b;
        },
        btnClick(){
            // this.letters.push('f');
            this.letters.sort(this.sortNumber);
        }
    }
});

运行效果如下：

数组的高阶函数

filter函数

filter中的回调函数有一个要求：必须返回一个Boolean值

• true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
• false：当返回false时，函数内部会自动过滤这次的n

filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

**注意：**filter()不会对空数组进行检测

**注意：**filter()不会改变原始数组

参考代码

const nums = [10,20,111,222,444,40,50];

let newnums = nums.filter(function(n){
    return n < 100;
});
console.log(newnums);

运行结果：[10,20,40,50]

map函数

map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map()方法按照原始数组元素顺序依次处理元素。

**注意：**map()不会对空数组进行检测

**注意：**map()不会改变原始数组

参考代码（承上）

let new2nums = newnums.map(function(n){
    return n * 2;
});
console.log(new2nums);

运行结果：[20,40,80,100]

reduce函数

reduce()对数组中所有内容进行汇总

参考代码（承上）

let total = new2nums.reduce(function(previous,n){
    return previous + n
},0);
console.log(total);

运行结果：240

filter/map/reduce

三函数配合使用

参考代码

const nums = [10,20,111,222,444,40,50];

let total = nums.filter(function(n){
    return n < 100;
}).map(function(n){
    return n * 2;
}).reduce(function(preValue,n){
    return preValue + n;
},0);

console.log(total);// 240

---

let total = nums.filter(n => (n<100)).map(n => (n*2)).reduce((pre,n) => (pre+n));

console.log(total);// 240