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

2017-12-06 本文已影响27人 Laughingg

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 实例

创建实例

// 创建 vue 实例（创建的过程是必须使用 new 关键字）
// vue 这样创建的是一个最单纯的 vm 实例对象
// 没有挂载 view, 没有绑定 model
// 其实这个 vm 啥也干不了（说白了就是个废物）
var vm = new Vue();

元素挂载和数据绑定

<!-- 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！

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)
      }
   }
})

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

1. hello world!

2. MVVM

3. Vue 实例

猜你喜欢

热点阅读