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. Paper | No-reference Quality Assessment of Deblocked Images

    目录 故事背景 本文方法(DBIQ) 发表在2016年Neurocomputing. 摘要 JPEG is the most commonly used image compression stand ...

  2. strcspn()函数

    函数描述: 检索字符串 str1 开头连续有几个字符都不含字符串 str2 中的字符. 函数声明: #include<string.h> size_t strcspn(const char ...

  3. 02Shell变量

    Shell变量 什么是 shell 变量 shell变量就是 用一个固定的字符串去表示不固定的内容 变量的类型 自定义变量 定义变量 变量名=变量值 (显式赋值) 变量名必须以字母或下划线开头,区分大 ...

  4. Program 3 – CS 344

    Program 3 – CS 344OverviewIn this assignment you will write your own shell in C, similar to bash. No ...

  5. 5个问题带你了解export和import的使用以及export和export defalut 的区别

    问题一:export和import是什么? ES6新增模块(module)语法 问题二:export和import的作用是什么? export:规定模块的对外接口,相当于导出功能  import:用于 ...

  6. ssh框架被淘汰的原因

    SSH就是Struts2+Spring+Hibernate. 三个组件的简单介绍 Struts2:通俗的讲就是为了完成MVC模型中的C的功能,也就是编写具体的业务逻辑的地方.从他的设计上来看就是请求到 ...

  7. 【目标检测】关于如何在 PyTorch1.x + Cuda10 + Ubuntu18.0 运行 CenterNet 源码

    这几天一直在尝试运行CenterNet的源码,但是出现各种问题,本已经打算放弃,中午吃完饭又不甘心,打算重新安装环境再来一遍,没想到竟然成功了.所以,坚持下去,黑夜过后便是黎明. 注意:gcc/g++ ...

  8. mongodb复杂条件查询 (or与and)

    分类专栏: mongodb   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/tjbsl/ ...

  9. C# 灵活切换开发/测试/生成环境web.config

    web.config <configuration> <connectionStrings configSource="config\Sit.db.config" ...

  10. Java中级—JSP九大内置对象和动作

    一.内置对象 在JSP中,内置对象又称为隐含对象,是指在不声明和创建的情况下就可以被使用的一些成员变量.JSP一共提供有9个内置对象,分别是request(响应对象).pageContext(页面上下 ...