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

 

转载于:https://www.cnblogs.com/zhaopengcheng/p/9368181.html