1.IDEA中安装Vue.js插件

2.建立项目以及html文件

1.创建一个 HTML 文件

2.引入 Vue.js

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

3.创建一个 Vue 的实例

 <script type="text/javascript">

     var vm = new Vue({

         el: '#vue',

         data: {

             message: 'Hello Vue!'

         }

     });

 </script>

说明:

  • el:'#vue'：绑定元素的 ID
  • data:{message:'Hello Vue!'}：数据对象中有一个名为 message 的属性，并设置了初始值 Hello Vue!

4.将数据绑定到页面元素

 <div id="vue">

     {{message}}

 </div>

5.完整HTML

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <div id="vue">

     {{message}}

 </div>

 <!--导入Vue.js-->

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

 <script type="text/javascript">

     let vm = new Vue({

         el: '#vue',   //绑定元素的 ID

         data: {       //数据对象中有一个名为 message 的属性，并设置了初始值

             message: 'Hello Vue!'

         }

     });

 </script>

 </body>

 </html>

3.通过MVVM模式更新数据

在控制台修改 vm.message 中的内容，没有主动操作DOM就让页面发生了变化。

MVVM 模式中要求 ViewModel 层就是使用 观察者模式 来实现数据的监听与绑定，以做到数据与视图的快速响应。

2.第一个Vue程序的更多相关文章

  1. 第一个vue程序(极客时间Vue视频笔记)

    第一个vue程序 <body> <div class="app"> {{message}}--{{message+','+message}} <div ...

  2. Vue.js——2.第一个Vue程序

    代码 <div id="app"> <p>{{msg}}</p> </div> <script> let vm=new ...

  3. Vue（一）创建第一个Vue程序

    一.下载安装nodeJs 基于node.js,利用淘宝npm镜像安装相关依赖.由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像 -- npm install -g cnpm --registry= ...

  4. 第一个vue程序：hello,vlue

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. 第一个vue程序

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 一个Java程序猿眼中的前后端分离以及Vue.js入门

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...

  7. 读懂源码：一步一步实现一个 Vue

    源码阅读:究竟怎样才算是读懂了? 市面上有很多源码分析的文章,就我看到的而言,基本的套路就是梳理流程,讲一讲每个模块的功能,整篇文章有一大半都是直接挂源码.我不禁怀疑,作者真的看懂了吗?为什么我看完后 ...

  8. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  9. vue-用Vue-cli从零开始搭建一个Vue项目

    Vue是近两年来比较火的一个前端框架(渐进式框架吧). Vue两大核心思想:组件化和数据驱动.组件化就是将一个整体合理拆分为一个一个小块(组件),组件可重复使用:数据驱动是前端的未来发展方向,释放了对 ...

随机推荐

  1. MySQL实战45讲学习笔记：第二十七讲

    一.一主多从的切换正确性 在前面的第24.25和26篇文章中,我和你介绍了 MySQL 主备复制的基础结构,但这些都是一主一备的结构. 大多数的互联网应用场景都是读多写少,因此你负责的业务,在发展过程 ...

  2. LeetCode 752：打开转盘锁 Open the Lock

    题目: 你有一个带有四个圆形拨轮的转盘锁.每个拨轮都有10个数字: '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' .每个拨轮可以自由旋转:例如把 ' ...

  3. oracle聚合函数XMLAGG用法简介

    XMLAGG函数语法基本如图,可以用于列转行,列转行函数在oracle里有好几种方法,wm_concat也可以做 这里介绍wm_concat是因为XMLAGG实现效果和wm_concat是一样的,只是 ...

  4. java 金额数字转换大写算法

    根据人民币大写金额规范,转换有几点要注意的: 阿拉伯数字中间有"0"时,中文大写金额中间可以只写一个"零"字.如￥1,409.50,应写成人民币壹仟肆佰零玖圆伍 ...

  5. .NET Core 学习笔记之 WebSocketsSample

    1. 服务端 代码如下: Program: using Microsoft.AspNetCore; using Microsoft.AspNetCore.Hosting; namespace WebS ...

  6. .net core 3.0中动态卸载程序集

    动态加载程序集在一些插件式的应用中非常常见,.net core 2.0中可以通过AssemblyLoadContext中提供程序集的动态加载功能,但取不支持卸载.现在,在.net core 3.0中提 ...

  7. 基于cephfs搭建高可用分布式存储并mount到本地

    原文:https://www.fullstackmemo.com/2018/10/11/cephfs-ha-mount-storage/ 服务器硬件配置及环境 项目 说明 CPU 1核 内存 1GB ...

  8. C#写日志工具类

    代码: using System; using System.Collections.Generic; using System.IO; using System.Linq; using System ...

  9. JS读取xml

    xml文件 <?xml version="1.0" encoding="utf-8"?> <root> <data id=&quo ...

  10. Linux下实现不活动用户登录超时后自动登出

    方法一:通过修改.bashrc或.bash_profile文件来实现  通过修改home目录下的.bashrc或.bash_profile文件来实现.这两个文件选择其中一个在末尾加入如下一行,具体操作 ...