vue.js简介

特点

• 虚拟DOM
  1、DOM :成对出现的标签；PC上渲染还可以，但是在移动端渲染DOM效果很差；
  2、虚拟DOM 采用H5的carvers，采用绘制画画的方式，相当于绘制一张图片。之前采用webview在做跳转时，要先把当前的webview销毁，再创建一个webview，性能极其差。虚拟DOM 是换图，当路由时，把所有页面当做图片绘制一次。性能接近原生。
  3、vue性能优于react。

• 数据驱动、数据绑定渲染
  基本的dom标签不会变动，只是以json的数据格式渲染页面数据。业务逻辑只关注数据处理，无需手动管理DOM。

• 组件化、模块化、ES6语法。
  将页面封装成一个个组件，采用积木式变成，这样使页面的复用度达到最高。

vue的MVVM模式

MVVM模式（Model-View-ViewModel），其中ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

Hello World示例

了解一门语言，或者学习一门新技术，编写Hello World示例是我们的必经之路。
这段代码在画面上输出"Hello World!"。

    
        
        
    

    
        
        

            {{ message }}
        
    
    
    

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

1、定义View

2、定义Model

3、创建一个Vue实例或"ViewModel"，它用于连接View和Model

在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到

...

这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。

Vue.js的常用指令

的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：

• v-if指令
• v-show指令
• v-else指令
• v-for指令
• v-bind指令
• v-on指令

1、v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：v-if="expression"。
注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为，只有满足条件的才会被渲染出来。

2、v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性，隐藏还是显示。

3、v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

4、v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：v-for="item in items"，items是一个数组，item是当前被遍历的数组元素。

5、v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听元素的点击事件：。
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。