特点
虚拟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指令可以缩写为@符号。