Vue 的开始
1 框架的 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元素。
2 Vue 对象的生命周期
3 简单例子
// html页面
<div id="app">
{{ message }}
<h1>{{details()}}</h1>
</div>
// js 脚本
var app = new Vue({
el:'#app',
data:{
message:'欢迎学习VUE'
},
methods: {
details: function() {
return this.message ;
}
}
})
显示结果如下
data 用于定义属性
页面中的双大括号{{ }} 用于输出对象属性和函数返回值。
methods 用于定义的函数,可以通过 return 来返回函数值。
说明:methods中的方法名不能和data中的变量名一样
3.2 在创建Vue实例时,需要传入一个选项对象,选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
选项对象的el属性指向View,el: '#app'
表示该Vue实例将挂载到<div id="app">...</div>
这个元素;data属性指向Model,data: exampleData
表示我们的Model是exampleData对象。
4 除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。
<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>Alexa : {{alexa}}</h1> </div> <script type="text/javascript"> // 我们的数据对象 var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) document.write(vm.$data === data) // true document.write("<br>") // true document.write(vm.$el === document.getElementById('vue_det')) // true </script>
参考文献:
https://www.jianshu.com/p/816e524a189f
http://www.runoob.com/vue2/vue-start.html
如果觉得有用,想赞助一下请移步赞助页面:赞助一下