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. sessionStorage 、localStorage 、 cookie 和session之间的区别

    四者的异同 特性 Session   Cookie localStorage sessionStorage 数据的生命期   在一定时间内保存在服务器上.当访问增多,会比较占用你服务器的性能,考虑到减 ...

  2. GC原理---对象可达判断

    对象可达判断 引用计数算法(Reference Counting) 给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值加1:当引用失效时,计数器减1:任何时刻计数器都为0的对象就是不可能再被 ...

  3. 能耗监测平台GPRS通讯服务器的架构设计

    在这个文章里面我将用一个实际的案例来分享如何来构建一个能够接受3000+个连接的GPRS通讯服务器软件.在这里,我将分享GPRS通讯服务器设计过程中面临的问题,分享通讯协议的设计,分享基于异步事件的设 ...

  4. cmake打印shell

    cmake链接库失败时,可通过打印路径下对应的lib来定位问题 execute_process(COMMAND ls -lt ${CMAKE_CURRENT_SOURCE_DIR}/lib #执行sh ...

  5. redis之漏斗限流

    Redis 4.0 提供了一个限流 Redis 模块,它叫 redis-cell.该模块也使用了漏斗算法,并提供了原子的限流指令.有了这个模块,限流问题就非常简单了.

  6. sql语句将一个表的数据拷贝到另一个表中

    假定有一个a表,一个b表,要将a表的数据拷贝到b表中. 1.如果a表和b表结构相同. insert into b select * from a; 2.如果a表和b表的结构不相同. insert in ...

  7. Python 高级特性：切片、迭代、列表生成式、生成器

    切片(发现了一些新操作) 参考链接:https://www.liaoxuefeng.com/wiki/1016959663602400/1017269965565856 间隔取元素(可以取负数,负数就 ...

  8. linux安装和使用zookeeper

    一.安装条件 想要安装zookeeper,必须先在linux中安装好jdk.安装步骤见: https://www.cnblogs.com/expiator/p/9987351.html 二.下载并解压 ...

  9. python3.0安装django2.0、xadmin

    1.操作环境 Windows10.python3.8 2.安装django2.0 pip install django==2.0 x   1 pip install django==2.0 3.安装相 ...

  10. mssql SQL Server 2008 阻止保存要求重新创建表的更改问题的设置方法

    解决方法: 工具-〉选项-〉左侧有个 设计器-〉表设计器和数据库设计器 -> 阻止保存要求重新创建表的更改(右侧) 把钩去掉即可.