第一个Vue程序简单小例子

第一章 第一个Vue程序


文章目录

  • 第一章 第一个Vue程序
  • 前言
  • 一、创建Vue工程
  • 二、下载Vue.js插件
  • 三、创建html
    • 1.创建demo1.html
    • 2.预览数据
  • 总结


前言

Vue从入门到精通学习笔记


一、创建Vue工程

第一次学习为了快速实现,创建一个空文件夹vue-first,在IDEA中打开此文件夹作为工程。

二、下载Vue.js插件

在IDEA的Settings里的Plugins里安装Vue.js插件。
第一个Vue程序简单小例子_第1张图片

三、创建html

1.创建demo1.html

代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

head>
<body>


<div id="app">
     {{message}}
div>


<script src="http://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
<script>
    var vm = new Vue({
        el: "#app",
        //模板数据层
        data: {
            message: "hello vue!"
        }
    })
script>

body>
html>

2.预览数据

在IDEA左上角点击网页预览,得到如下界面:
第一个Vue程序简单小例子_第2张图片
按F12打开开发人员工具,在控制台输入下述代码之后回车,我们会发现页面显示的值也随之变化。

vm.message='hello'

第一个Vue程序简单小例子_第3张图片


总结

如上所述操作,并没有修改网页源代码,就让页面的内容发生了变化, 这就是借助了Vue的数据绑定功能实现的; MVVM架构中要求的View Model层就是通过此方法来实现数据的监听与绑定, 做到数据与视图的无感响应。

你可能感兴趣的:(VUE,vue.js,前端,javascript)