Vue2.0新手入门-模板语法-计算属性与监听属性的介绍和差异

💎个人主页: 阿选不出来
💎个人简介: 一名大二在校生, 不定时更新自己学习道路上的一些笔记.
💎目前开发的专栏: JS 🍭Vue🍭JS进阶

01.Vue 是什么?

这里我们引用官方文档的一段话:

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

• 什么是框架?

  框架( Framework )是构成一类特定软件可复用设计的一组相互协作的类。框架规定了你的应用的体系结构。它定义了整体结构，类和对象的分割，各部分的主要责任，类和对象怎么协作，以及控制流程。框架预定义了这些设计参数，以便于应用设计者或实现者能集中精力于应用本身的特定细节.

• 既然有视图层,那还有什么层?

  说到这里,就要谈谈MVC模型了.

  MVC模型

  MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。

  • Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。

  • View（视图） - 视图代表模型包含的数据的可视化。

  • Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

    

02.Vue起步

声明式渲染

<div id="app">
    {{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

03.模板语法

插值语法

文本

<span>Message: {{ msg }}</span>

无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
如果我只想要展现第一次的数据呢?这里就要用到Vue的指令语法了.

指令语法

v-once
v-once属性: 执行一次性的插值,当数据改变时,插值的内容不在更新.

<span v-once>这个将不会改变 {{msg}}</span>

v-html

原始HTML

{{}} 只会将数据解释为普通文本,而非HTML代码,输出真正的HTML,需要使用 v-html 指令:

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<template>
...
data: {
	rawHtml: "<span style="color: red">This should be red.</span>"
}
</template>

展现效果:

这个span的内容将会被替换成 property的值 rawHtml

v-bind

作用: 添加属性.

数据只能从data流向页面.

<div v-bind:id="userId"></div>
<!-- 简写形式 -->
<div :id="userId"></div>

如果添加的属性为布尔型, 只要存在就意味着值为true, 如果userId的值为 null, undefined,false 则 该属性不会被渲染出来.

注意: 对于所有的数据绑定, Vue.js都提供了完全的 Javascript 表达式支持,但是只对单个表达式支持.

指令

含义: 指令 (Directives) 是带有 v- 前缀的特殊 attribute。

作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

<a v-bind:href="url">...</a>

这里 href 是参数, 告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定.

动态参数

前提: 从2.6.0开始, 可以用方括号括起来的 JavaScript 表达式作为一个指令的参数:

<a v-bind:[attributeName]="url"> ... </a>

这里 attributeName 会被作为一个 JavaScript 表达式进行动态求值, 求得的值将会作为最终的参数来使用.

动态参数的值的要求: 预期会求出一个字符串, 异常情况下值为 null 任何其他非字符串类型的值都将会触发一个警告.

动态参数表达式的约束: 某些字符(比如:空格,引号),放入HTMLattribute 名里是无效的. 避免用大写符号来命名键名,因为浏览器会把attribute名强制转为小写.

修饰符

修饰符是以半角句号 . 指明的特殊后缀, 用于指出一个指令应该以特殊方式绑定.

<form v-on:submit.prevent="onSubmit"> ... </form>
<!-- .prevent 修饰符 告诉 v-on 指令对于触发的事件调用 event.preventDefault() -->

部分指令语法的缩写形式

v-bind

<!-- 完整写法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 -->
<a :[key]="url">...</a>

v-on

<!-- 完整写法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写(2.6.0+) -->
<a @[event]="doSomething">...</a>

04.计算属性与侦听器

计算属性

为什么要使用计算属性? 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。

作用: 要用的属性不存在, 要通过已有的属性计算得来.

完整写法:

computed: {
    fullName: {
        get(){
            return this.firstName + '-' + this.lastName
        },
        set(value){
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
        }
    }
}

get()作用: 当有人读取fullName时, get就会被调用, 且返回值就作为fullName的值.

get什么时候调用? 1.初次读取fullName时; 2. 被依赖的数据发生变化时.

set() : 当fullName被修改时调用.

计算属性最终出现在vm上,直接读取使用即可.

如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变.

简写形式:

// 如果计算属性要被修改,那必须写set函数响应这个时候就不能用简写形式.
computed: {
    fullName(){
        return this.firstName + '-' + this.lastName
    }
}

**computed 与 methods 的比较:**两种方式的最终结果完全相同,不同的是计算属性是基于他们的响应式依赖进行缓存的.只有在相关响应式依赖发生改变时才会重新求值.

侦听器

computed与watch之间的区别,什么时候用watch?

1. computed能完成的功能, watch都可以完成.
2. watch能完成的功能,computed不一定能完成, 例如: watch可以进行异步操作.

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

什么时候触发?

1. 当被监视的属性变化时, 回调函数自动调用,进行相关操作.
2. 监视的属性必须存在,才能进行监视!

监视的两种方法

1. new Vue时传入watch配置.
2. 通过vm.$watch监视.

// 法一
new Vue({
    ...
    watch: {
        isHot: {
            immediate: true, //初始化时让handler调用一下,默认值为false
            handler(newValue, oldValue){
                console.log('isHot被修改了!', newValue, oldValue)
            }
            
        }
    }
})
// 法二
vm.$watch('isHot',{
    immediate: true,
    handler(newValue,oldValue){
        //...
    }
})

深度监视

vue中的watch默认不监视对象内部值的改变, 配置deep: true就可以监视对象内部值改变.

简写形式:

vm.$watch('isHot', function(newValue,oldValue){
    //...
})

两个小原则:

1. 所有被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象.
2. 所有不被Vue所管理的函数 (定时器的回调函数, ajax的回调函数), 最好写成箭头函数.这样this的指向才是vm或组件实例对象.

写在最后

• 看到这里有没有收获什么呢?🎀🎀🎀

• 🎈🎈有错误的地方可以在评论区留言,本博会虚心改正的

• 觉的博主写的不错的,可以给个一键三连lia~✨✨