vue入门教程 简单实现一个hello world

vue入门教程 简单实现一个hello world

此篇适合没学习过vue的小白观看,有一定基础可观看笔者vue笔记相关文章,本文主要介绍,和讲解vue。

1.vue运行模式

vue入门教程 简单实现一个hello world_第1张图片

简单如下图

vue入门教程 简单实现一个hello world_第2张图片

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!

这里简单示例,


<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>Documenttitle>
  <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的实例
vue入门教程 简单实现一个hello world_第3张图片

打开实例,可以再原型链上找到$data,通过原型链的原理,我们可以通过vm.message直接访问到数据
vue入门教程 简单实现一个hello world_第4张图片

上图中的get,和set便是vue数据双向绑定的原理,后续会讲解,下面来见证下数据双向绑定

在控制台中执行下列操作,你会发现页面显示内容发生了改变。

vue入门教程 简单实现一个hello world_第5张图片

vue入门教程 简单实现一个hello world_第6张图片

你可能感兴趣的:(vue入门教程)