第4讲：vue内置命令（文本插值，属性绑定，v-text,v-html）

MVVM

        什么是MVVM？

         MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

        View层：

视图层

在我们前端开发中，通常就是 DOM 层。

主要的作用是给用户展示各种信息。

Model层：

数据层

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

在我们计数器的案例中，就是后面抽取出来的 obj ，当然，里面的数据可能没有这么简单。

ViewModel层：

视图模型层

视图模型层是 View 和 Model 沟通的桥梁。

一方面它实现了 Data Binding ，也就是数据绑定，将 Model 的改变实时的反应到 View 中

另一方面它实现了 DOM Listener ，也就是 DOM 监听，当 DOM 发生一些事件 ( 点击、滚动、 touch 等 ) 时，可以监听到，并在需要的情况下改变对应的 Data 。

options

  在上一章的HelloWorld中我们创建Vue实例的时候需要传入一个options对象。

  这个options对象可以包含哪些属性？

文档： https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

  目前，我们需掌握如下属性：

el:

– 类型：string | HTMLElement

– 作用：决定之后Vue实例会管理哪一个DOM。

data:

– 类型：Object | Function （组件当中data必须是一个函数）

– 作用：Vue实例对应的数据对象。

methods:

– 类型：{ [key: string]: Function }

– 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

  而随着学习的深入，我们还需要掌握其它的属性，这些我们将在后面的学习中提及。

文本插值

在使用数据绑定前需在 Vue 组件对象内声明所需的变量

data() { msg: 'Hello Vue!'  }

数据绑定最基础的形式是文本插值，使用 “Mustache” 语法（双花括号）

Message: {{ msg }}

Mustache 标签会被相应数据对象的 msg属性的值替换。每当这个属性变化时它也会更新。

绑定属性

        Vue.js 在数据绑定内支持全功能的 JavaScript 表达式，如下

{{ number + 1 }}
{{ age >= 18 ? '成年' : '未成年' }}
{{ message.split('').reverse().join('') }}

        表达式将在所属的 Vue 实例的作用域内计算。每个绑定只能包含单个表达式。

{{ var a = 1 }}

{{ if (ok) { return message } }}

计算属性

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。

如果需要多于一个表达式的逻辑，应当使用计算属性。

示例：

结果：a=1, b=2

说明：

computed 计算属性内部必须定义函 数

b() 相当于一个 b 变量的 get 方法；

在 data 中定义的变量 名称 不能与 computed 中定义的函数同名，但可以当做 data 中定义的变量一样使用

指令插值

v-text指令主要是防止页面首次加载时 {{}} 出现在页面上。将对象中数据变量值显示在绑定的标签内容上。

 

  =>

{{ msg }}

  后者在页面首次加载时可能会出现 {{ msg }}

v-html指令

v-html 指令类似于 v-text 指令 ;

它 与 v-text 区别在于 v-text 输出的是纯文本，浏览器不会对其再进行 html 解析，但 v-html 会将其当 html 标签解析后输出 。

v-html 指令应尽量避免使用，否则会带来危险 (XSS 攻击 跨站脚本攻击 ), 一般只在可信任内容上使用 v-html ，永不用在用户提交的内容上 ;

本人从事软件项目开发20多年，2005年开始从事Java工程师系列课程的教学工作，录制50多门精品视频课程，包含java基础，jspweb开发，SSH,SSM，SpringBoot，SpringCloud,人工智能，在线支付等众多商业项目，每门课程都包含有项目实战，上课PPT，及完整的源代码下载，有兴趣的朋友可以看看我的在线课堂

讲师课堂链接：https://edu.csdn.net/lecturer/893