vue入门教程 简单实现一个hello world
vue入门教程简单实现一个hello world此篇适合没学习过vue的小白观看,有一定基础可观看笔者vue笔记相关文章,本文主要介绍,和讲解vue。1.vue运行模式简单如下图view:表示视图层,就是显示的ui界面model:表示数据层,用于定义数据修改和操作业务逻辑viewModel:用于同步view和model的对象在MVVM架构下,View 和 Model 之间并没...
vue入门教程 简单实现一个hello world
此篇适合没学习过vue的小白观看,有一定基础可观看笔者vue笔记相关文章,本文主要介绍,和讲解vue。
1.vue运行模式
简单如下图
view:表示视图层,就是显示的ui界面
model:表示数据层,用于定义数据修改和操作业务逻辑
viewModel:用于同步view和model的对象
在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。
ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理
2.实战简单创建一个hello World!
这里简单示例,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})
</script>
</body>
</html>
在vue中在data中定义的属性,可以再视图层,中通过双花括号的方式渲染到页面,此时,页面上会渲染出hello world!
此时打开控制台,输入vm,可以再控制台中打印出vue的实例
打开实例,可以再原型链上找到$data,通过原型链的原理,我们可以通过vm.message直接访问到数据
上图中的get,和set便是vue数据双向绑定的原理,后续会讲解,下面来见证下数据双向绑定
在控制台中执行下列操作,你会发现页面显示内容发生了改变。
更多推荐
所有评论(0)