Vue 学习笔记04——从 Hello Vue! 到 mvvm

1. hello world!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 导入 vue.js lib -->
    <script src="vue.js"></script>
</head>
<body>
    <!-- view -->
    <div id="app">
        {{ message }}
    </div>

    <script>

        // model
        const  data = {
            message: 'Hello Vue!'
        }

        // view model
        const vm = new Vue({

            // 挂载视图到 vue 实例
            el: '#app',

            // 把模型数据添加到 vue 实例
            // 绑定数据到 vue 实例
            data: data
        })
    </script>
</body>
</html>

这个是我们每个学习 vue.js 的人都看过的入门代码。
但是看过后又有几个人能够真正的理解呢?

2. MVVM

Snip20171206_13.png

Vue.js是当下很火的一个JavaScript MVVM库,以数据驱动和组件化的思想构建的。

Vue.js提供了更加简洁、更易于理解的API。

数据驱动: 意思是我们不需要手动的去操作 DOM,DOM 是依据数据的变化而自动的变化。我们要改变(操作)的是 model。

Model-View-ViewModel
ViewModel 是vue.js 的核心,就是一个 Vue 示例。
Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是其他包裹在 <body> 元素中的任何元素。

依据上图看:

  • ViewModel 中的 DOM Listeners 工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
  • 更新Model中的数据时,ViewModel 中的 Data Bindings 工具会帮我们更新页面中的DOM元素。


    通过更新 model 来动态的更新 DOM !
<!-- view -->
<div id="app">
     {{ message }}
 </div>

 // model
const  data = {
     message: 'Hello Vue!'
}

// view model
const vm = new Vue({

   // 挂载视图到 vue 实例
   el: '#app',

    // 把模型数据添加到 vue 实例
    // 绑定数据到 vue 实例
    data: data
})

el: '#app' : 是 view-model 和 view 产生联系的关键一步。
data: data:是 view-model 和 model 产生联系的关键一步。
vue 帮我们做的就是 DOM 监测 和数据绑定。
我们要做的就是处理好 view 和 view- model , view-model 和 model 的关系。

简要的说就是,根据数据来展示特定的视图(界面),根据视图 (界面) 的调整变化来更改特定的数据。从而来完成特定的功能需求。

通过 hello world 和 mvvm 的解说,基本可以了解 vue 实例可以干啥子了。
下面要解决的问题是 vue 实例怎么用。

3. Vue 实例

  1. 创建实例
    // 创建 vue 实例(创建的过程是必须使用 new 关键字)
    // vue 这样创建的是一个最单纯的 vm 实例对象
    // 没有挂载 view, 没有绑定 model
    // 其实这个 vm 啥也干不了(说白了就是个废物)
    var vm = new Vue();
    
  2. 元素挂载和数据绑定
    <!-- view -->
    <div id="app"></div>
     
    // model
    const  data = { }
    // vm配置
    const vmConfig = {
    
        // 挂载视图到 vue 实例
        el: '#app',
    
         // 把模型数据添加到 vue 实例
         // 绑定数据到 vue 实例
         data: data
    }
    // view model
    const vm = new Vue(vmConfig)
    
    最直接的写法(建议的写法)
    //  简洁优雅,高端大气上档次
    var vm = new Vue({
       // 挂载视图到 vue 实例
       el: '#app',
       // 把模型数据添加到 vue 实例
       data: { 
       }
    })
    // 挂载的 view 且绑定了 model 的 vm 才是完整的 vm!
    
  3. vm 实例初始化的时候常用的配置选项
    var vm = new Vue({
        // view
        // el 只有在 Vue 实例初始化的时候可以进行设置。
        // 如果在初始化的时候没有挂载元素, 可以调用 vm.$mount('HTMLElement') 来进行手动挂载。
        // vm 对象可以监察到 挂载元素的所有变化
        // 只有将元素挂载到 vm, vm 才能够将 vm 绑定的数据展示到元素(这句话很重要哦!)
        el: '#app',
    
        // 一个字符串模板作为 Vue 实例的标识使用。
        // 模板将会 替换 挂载的元素。
        // 挂载元素的内容都将被忽略,除非模板的内容有分发插槽。
        // <div id="app"></div> 被 <App><App/> 替换
        template: '<app></app>',
    
        // 注册组件
        // 注册组件后,就可以在模板中使用 <App></App> 组件
        // 注册的组件只能使用在模板中
        components: { App },
    
        // model
        data: { 
          message: 'Hello Vue!'
        },
    
        methods: {
            reverseMessage: function () {
              // 更改属性值
              this.message = this.message.split('').reverse().join('')
          }
        },
    
        // 属性值观察
        watch: {
            message: function (newValue, oldValue) {
              console.log('newValue:', newValue, 'oldValue:', oldValue)
          }
       }
    })