Vue 的 MVVM 理解以及计算属性的使用-阿里云开发者社区

Vue 的 MVVM 理解以及计算属性的使用

Vue 中的MVVM

MVVM：Model View ViewModel。学习概念的最好的方式是维基百科。

MVVM

Vue 中的 MVVM：

计数器中的 MVVM

创建 Vue 实例传入的 options

在创建 Vue 实例的时候，传入了一个对象 options。

options 可以包括的选项：

详细解析

目前掌握的选项：

类型：string | HTMLElement
作用：决定之后 Vue 实例会管理哪一个 DOM 。

data

类型：Object | Function
作用：Vue 实例化对应的数据对象。

methods

类型：{[key: string]: Function}
作用：定义属于 Vue 的一些方法，可以在其他地方调用，也可以在指令中使用。

Vue 的生命周期

Vue 语法基础

代码规范

缩进：（大部分大型的开源项目一般都是）缩进 2 个空格，一般编译器缩进四个空格。

符号旁边要加空格。

Vue 的生命周期函数

等待后期补充知识点

插值操作

Mustache

Mustache 语法中，不仅仅可以直接写变量，也可以写简单的表达式。

计算属性

什么是计算属性？

在模板中我们可以通过插值语法显示一些 data 中的数据，但是在某些特殊情况下，需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示:

比如有 firstName 和 lastName 两个变量，在多个地方显示完整的名称时，就需要写成：{{firstName}} {{lastName}} 。

我们可以将上面的代码换成计算属性：

计算属性是写在实例的 computed 选项中的。
计算属性在使用的时候是不需要加括号的。

<div id="app">
  <!-- 第一种方法：通过定义方法让他们结合在一起 -->
  <h2>{{getFullName()}}</h2>
  <!-- 第二种方法：计算属性（计算属性在定义的时候一般不加动词，如：FullName 和 getFullName） -->
  <h2>{{FullName}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'meng',
      lastName: 'zhao'
    },
    computed: {
      FullName: function(){
        return this.firstName + ' ' + this.lastName
      }
    },
    methods: {
      getFullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

计算属性的复杂操作

<div id="app">
  <h2>总价格：{{totalprice}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      books: [
        { id: 110, name: 'c语言', price: 119 },
        { id: 111, name: 'linux', price: 100 },
        { id: 112, name: 'java', price: 125 },
        { id: 113, name: 'javascript', price: 149 }
      ]
    },
    computed: {
      totalprice: function () {
        // return this.books.reduce()
        let result = 0  
        for (let i = 0; i < this.books.length; i++) {
          result += this.books[i].price
        }
        return result
      }
    },
  })
</script>

计算属性的 setter 和 getter

每个计算属性都包括一个 getter 和一个 setter（不常用）。

set() 方法一般不设置，只读属性。

<!-- 计算属性的完整写法 -->
<div id="app">
  <h2>{{fullName}}</h2>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'kobe',
      lastName: 'Bryant'
    },
    computed: {
      fullName: {
                // 如果不设置 set 函数，则这个是只读属性，不可以进行修改。
        set: function (newValue) {
          const names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[1]
        },
        get: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
    },
  })
</script>

计算属性和 methods 的对比

计算属性是有缓存的，所以在执行的时候它只会调用一次，因此它的性能比 methods 高。

ES6 补充

ES6 详细教程请移步一篇文章带你学会整个ES6进行系统学习 ES6

let/var

事实上 var 的设计可以看成 JavaScript 语言设计上的错误，但是这种错误多半不能修复和移除，以为需要向后兼容。

十年前，Brendan Eich 就决定修复这个问题，于是他添加了一个新的关键字：let 。
let 就是更完美的 var 。

块级作用域：

JS 中使用 var 来声明的一个变量时，变量的作用域主要是和函数的定义有关。
针对于其他块定义来说是没有作用域的，比如 if/for 等，这在我们开发中往往会引起一些问题。

变量作用域：变量在什么范围内是可用的。

没有块级作用域引起的问题：if 的块级

var func;
if(true){
    var name = 'why'
    func = function(){
        console.log(name)
    }
    // func()
}
name = 'kobe'
func()
// console.log(name)

没有块级作用域引起的问题：for 的块级

const 的使用

在很多语言中都存在 const ，主要作用是将某个变量修饰为常量。

在 JavaScript 中也是如此，使用 const 修饰的标识符为常量，不可以再次赋值。

当修饰的标识符不会被再次赋值时，就可以使用 const 来保证数据的安全性。

注意点：

const a = 20
a = 30
// 错误：a不可以被修改。

const name
// 错误：const 修饰的标识符必须赋值。

const obj = {
    name: 'why',
    age: 18,
    height: 1.88
}
obj.name = 'kobe'
obj.age = 20
obj.height = 1.87
// 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。

5.建议：在开发中优先使用 const 。只需要改变某一个标识符的时候才使用let。

对象增强写法

在 ES6 中，对对象字面量进行了很多增强。

属性初始化简写和方法的简写：

属性的简写：

// ES6 之前
let name = 'why'
let age = 18
let obj1 = {
    name: name,
    age: age
}
console.log(obj1)
// ES6 之后
let obj2 = {
    name,age
}
console.log(obj2)

方法的简写:

// ES6 之前
let obj1 = {
    test: function(){
        console.log('obj1的test函数')
    }
}
obj1.test()
// ES6 之后
let obj2 = {
    test(){
        console.log('obj2的test函数')
    }
}
obj2.test()
  ## 事件监听

在前端开发中，需要经常用于交互。

这时，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等。
在 Vue 中使用 v-on 指令来监听事件。

v-on 介绍：

作用：绑定事件监听器。
缩写：@
预期：Function | Inline Statement | Object
参数：event

v-on 参数

当通过 methods 中定义方法，以供 @click 调用时，需要注意参数问题：

情况一：如果该方法不需要额外参数，那么方法后的 () 可以不添加。

但是注意：如果方法本身中有一个参数，那么会默认将原生事件 event 参数传递进去。

情况二：如果需要同时传入某个参数，同时需要 event 时，可以通过 $event 传入事件。

案例讲解：

<div id="app">
  <!-- 时间调用的方法没有参数 -->
  <button @click="btn1Click()">按钮</button>
  <button @click="btn1Click">按钮1</button>
  <!-- 在事件定义时，方法本身是需要一个参数的,那此时未传入参数，那么此时的形参为 undefined -->
  <!-- 在事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的,那浏览器此时会生成一个 event 对象并作为一个参数传入方法中 -->
  <button @click="btn2Click">按钮2</button>
  <!-- 方法定义时，我们需要 event 对象，同时又需要其他参数 -->
  <!-- 在调用方式，如何手动的获取到浏览器参数的 event 对象：$event -->
  <button @click="btn3Click(123,$event)">按钮3</button>
</div>
<script src="./vuecode/vue.js"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<script>
  const app = new Vue({
    el: '#app',
    methods: {
      btn1Click(){
        console.log('btn1Click');
      },
      btn2Click(event){
        console.log('--------',event) ;
      },
      btn3Click(abc){
        console.log('+++++++',abc,event) ;
      }
    }
  })
</script>

v-on 修饰符

.stop：阻止冒泡。

<div id="app" @click="divClick">
  <!-- .stop 修饰符的使用。 -->
  <button @click.stop="btnClick">按钮</button>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    methods: {
      btnClick(){
        console.log('btnClick');
      },
      divClick(){
        console.log('divClick');
      }
    }
  })
</script>

2..prevent：阻止默认行为。

<div id="app">
    <!-- form 默认会自动搜集表单中的数据进行提交 -->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    methods: {
      submitClick(){
        console.log('submitClick');
      }
    }
  })
</script>

3.{keyCode | keyAlias}：只当事件是从特定键触发时才触发回调。

<div id="app">
  <input type="text" @keyup.enter="keyClick">
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    methods: {
      keyClick(){
        console.log('keyClick');
      }
    }
  })
</script>

4..native：监听组件根元素的原生事件。

5..once：只触发一次回调。

<div id="app">
  <button @click.once="btnClick">按钮</button>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    methods: {
      btnClick(){
        console.log('btnClick');
      }
    }
  })
</script>

条件判断

v-if、v-else、v-else-if

这三个指令与 JavaScript 的条件语句 if、else、else if 类似。

Vue 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素或组件。

<div id="app">
  <p v-if="score>90">优秀</p>
  <p v-else-if="score>80">良好</p>
  <p v-else-if="score>60">及格</p>
  <p v-else>不及格</p>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 90
    },
  })
</script>

在逻辑比较多的时候不建议使用这样的方法，可以在计算属性中定义一个属性来进行逻辑判断。

v-if 的原理

v-if 后面的条件为 false 时，对应的元素以及其子元素不会渲染。

也就是根本没有不会有对应的标签出现在 DOM 中。

条件案例

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号">
  </span>
  <span v-else="">
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>
<script src="./vuecode/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isUser: true
    },
  })
</script>

条件案例中存在的问题

问题描述：

如果我们在有输入内容的情况下，切换了类型，就会发现文字依然显示之前输入的内容。
但是应该实现的内容是：切换到另一个 input 元素中了。
在另一个 input 元素中，并没有输入内容。

问题解答：

这是因为 Vue 在进行 DOM 渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue 内部会发现原来的 input 元素不再使用，直接作为 else 中的 input 来使用了。

解决方案：

如果要解决 Vue 中重复利用的问题，可以给对应的 input 加一个 key 。
并且我们要保证 key 是不相同的。

高阶函数

filter()

过滤器，可以遍历数组，返回想要拿到的值。

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

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

当返回 false 时，函数内部会过滤掉这次的 n 。

用法：

let nums = [10,20,111,245,40,77,543,50,]
let newNums = nums.filter(function(n){
    return n < 100
    // 把数组里面满足条件的数添加到新的数组里面
})
// 返回的新数组为[10,20,40,50]

map()

map() 函数会对产生的新数组做一次操作。

// 此时的 newNums 为[10,20,40,50]
let new2Nums = newNums.map(function(n){
    return n*2
    // 遍历数组，将数组中的所有值都乘以2，并返回一个新数组。
})
// 返回的新数组为[20,40,80,100]

reduce()

对数组中所有的内容进行汇总。

// 此时的 new2Nums 为[20,40,80,100]
let total = new2Nums.reduce(function(preValue,n){
    return preValue +n
},0)
// preValue 的初始值为 0 。
// total 的结果为为 240 。

结合使用

// 数组内容为[10,20,111,245,40,77,543,50,]
let total = nums.filter(function(n){
    return n < 100
}).map(function(n){
    return n * 2
}).reduce(function(preValue,n){
    return preValue +n
},0)
// 输出结果不变，依然是 240 。
// 简洁写法：
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre,n)) => pre + n)

Vue 的 MVVM 理解以及计算属性的使用

Vue 的 MVVM 理解以及计算属性的使用

Vue 中的MVVM

计数器中的 MVVM

创建 Vue 实例传入的 options

Vue 的生命周期

Vue 语法基础

代码规范

Vue 的生命周期函数

插值操作

Mustache

计算属性

什么是计算属性？

计算属性的复杂操作

计算属性的 setter 和 getter

计算属性和 methods 的对比

ES6 补充

let/var

const 的使用

对象增强写法

v-on 参数

v-on 修饰符

条件判断

v-if、v-else、v-else-if

v-if 的原理

条件案例

条件案例中存在的问题

高阶函数

filter()

map()

reduce()

结合使用

热门文章

最新文章

相关课程

相关电子书