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. Java 并发系列之十三：安全发布

    1. 定义 发布对象(Publish): 使一个对象能够被当前范围之外的代码所使用 对象逸出(Escape): 一种错误的发布.当一个对象还没有构造完成时,就使它被其他线程所见 1.1 发布对象 pu ...

  2. Redis系列1——概述

    1. 简介 Redis,key-value内存存储的数据库,全称“”Remote Dictionary Service(Sever)“”,默认端口号:6379 Redis是一个开源的使用ANSI C语 ...

  3. yum安装软件报错Error: Nothing to do

    今天在一台新服务器上装一些常用软件,一开始安装ncdu(一个很好用的磁盘分析工具,用来查找大文件),报错如下: 在网上找了各种办法,什么更新yum啊,清理yum缓存啊的,统统没用 最后的找到的问题是, ...

  4. 物联网架构成长之路(43)-k8s从入门到放弃

    0. 前言 这段时间要入门一下CI/CD了,以前简单的了解过Jenkins,现在要把以下的这个图的架构搭建起来.国外可能一两个命令就安装完成的事情,我折腾了2天多,真的差点放弃了. 1. 安装Virt ...

  5. 生成 RSA 公钥和私钥的方法

    在使用 RSA 加密算法时,需要使用到一对 公钥 和 私钥,生成 公钥 和 私钥 需要借助 openssl 这款工具,下载这款工具的地址如下: http://slproweb.com/products ...

  6. Ubuntu 16.04上anaconda安装和使用教程，安装jupyter扩展等 | anaconda tutorial on ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/23014ca5/,欢迎阅读最新内容! anaconda tutorial on ubuntu 16.04 Guide versio ...

  7. 使用 jQuery.TypeAhead 让文本框自动完成 （一）（最简单的用法）

    项目地址:https://github.com/twitter/typeahead.js 直接贴代码了: @section headSection { <script type="te ...

  8. 通过Filebeat把日志传入到Elasticsearch

    学习的地方:配置文件中预先处理字段数据的用法 通过Filebeat把日志传入到Elasticsearch Elastic Stack被称之为ELK (Elasticsearch,Logstash an ...

  9. DataTable 转List

    忘了出处   ,这个是转别人的 public class DataToList<T> where T : new() { /// <summary> /// 利用反射和泛型 / ...

  10. MySQL5.7增量备份恢复全实战

    一. 简介 1. 增量备份 增量备份是指在一次全备份或上一次增量备份后,以后每次的备份只需备份与前一次相比增加或者被修改的文件.这就意味着,第一次增量 备份的对象是进行全备后所产生的增加和修改的文件; ...