vue零基础（二）——基础知识（mvvm+VueJS表达式）

简知mvvm

Vue引入了MVVM (Model-View-ViewModeD)模式，他不同于MVC架构。

MVC模式:

• Model:数据模型，一些JavaScript对象，比如{name :“小小”,age: 18};
• View:视图，网页中的内容，-般由HTMl模板生成。
• Contoller:控制器(路由)，视图和模型之间的胶水。

MVVM模式:

• Model:它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。

• View:它专注于界面的显示和渲染，在Vue中则是包含一堆声 明式Directive和Component的视图模板。

• ViewModel:它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色。

• View不能直接与Model交互，而是通过Vue实例这个ViewModel来实现与Model的交互。

VueJS表达式

表达式语法

• VueJS表达式要写在双大括号内：{{expression}}
• VueJS表达式把数据绑定到HTML, 这与v-html指令有异曲同工之妙。
• VueJS将在表达式书写的位置“输出”数据。
• VueJS表达式很像JavaScript表达式：他们可以包含文字、运算符和变量。

数字操作

表达式可以算术运算。具体代码

//第一种
<div id="app">
  <h1>{{num_1+num_2}}</h1>
 </div>
 
<script>
  var app=new Vue({
   el:'#app',
   data:{
    num_1:10,
    num_2:20
   }
  })
 </script>
 
 //第二种
 <h1>{{10*20}}</h1>

字符串操作
和其他语言对字符串的操作基本类似，表达式使用string属性或方法。这里例举部分属性：

• 字符串长度：{{‘ABCD’.length}} -------------4
• 字符串截取：{{‘ABCDEFG’.substring(1,3)}}---------------BC
• 字符串转小写：{{‘ABCDEFG’.toLowerCase()}}-----------abcdefg

数组、对象操作

• 对象

Vue中操作对象，就跟JavaScript操作对象一样。也有点类似数据结构的架构体的感觉。

<div id="app">
  <p>{{person.name}} <br>{{person.sex}}</p>
</div>

• 数组
  Vue中操作数组，就跟JavaScript操作数组一样。

<div id="app">
  <p>第一个值为：{{arr[0]}} 数组长度为：{{arr.length}}</p>
</div>