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!"。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这是我们的View-->
<div id="app">
{{ message }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script>
</html>
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
1、定义View
2、定义Model
3、创建一个Vue实例或"ViewModel"，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
在这个示例中，选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；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是类似的，例如监听<A>元素的点击事件：<a v-on:click="doSomething">。
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。
