扫码关注微信订阅号 不迷路
一、Vue.js介绍
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。
当然了,在使用Vue.js时,你也可以结合其他库一起使用,比如jQuery。
1、MVVM模式
下图不仅概括了MVVM模式(Model-View-ViewModel),还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。
MVVM
ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。
当创建了ViewModel后,双向绑定是如何达成的呢?
首先,我们将上图中的DOM Listeners和Data Bindings看作两个工具,它们是实现双向绑定的关键。
从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。
二、极简入门helloWorld示例
1、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 此处是View-->
<div id="app">
{{message}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
// 配合 谷歌浏览器的 调试工具 Vue Devtools 调试vue项目使用
Vue.config.devtools = true
// 此处是Model
var exampleData = {
message: "hello world !"
}
// 此处是创建一个 vue实例 或者 ViewModel ,他是连接View 与Model的。 这就是 VUE的 MVVM模型 Model-View-ViewModel
new Vue({
el: "#app",
data: exampleData
})
</script>
</html>
2、运行
html页面 用google浏览器 访问 ,打开 调试工具 Vue Devtools 的效果如下: 修改 message值 页面数据随之改变。
3、运行过程解读
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
-
定义View
-
定义Model
-
创建一个Vue实例或"ViewModel",它用于连接View和Model
-
在创建Vue实例时,需要传入一个选项对象,选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
-
在这个示例中,选项对象的el属性指向View,el: '#app’表示该Vue实例将挂载到id=“app"这个元素;data属性指向Model,data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法,最基础的形式是文本插值,使用一对大括号语法,在运行时{{ message }}会被数据对象的message属性替换,所以页面上会输出"Hello World!”。 -
el 是element的缩写,注意以下三种写法的区别
// el:"#app", //对应的 id选择器
// el:".app", //对应的 class选择器
// el:“div”, //对应的 html类型