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) } } })
网友评论