直接复制以下代码到 html 文件中即可运行.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue Hello World.</title>
  6. <!-- 引入 Vue 的在线静态资源, 这是使用 Vue 最简单的方法. -->
  7. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  8. </head>
  9. <body>
  10. <!-- 这里有一个特殊的语法点: 双花括号 -->
  11. <!-- 这里借鉴了模板引擎的语法, 双花括号里面的内容是一个 "可执行" 的表达式. -->
  12. <div id="app">
  13.   <p>{{ message }}</p>
  14. </div>
  15.  
  16. <script>
  17. // Vue 对象可以理解为是一位聪明的 "工人". 不需要让我们手动修改 DOM.
  18. // el 表示: "element" , 通过它定位页面上的 DOM 节点. 这里的 "#app" 即为 id = "app" 的 DOM 节点.
  19. // data 属性是一个对象, 里面的属性表示作用在 id 为 app 的节点上的 "可控变量".
  20. new Vue({
  21.   el: '#app',
  22.   data: {
  23.     message: 'Hello Vue.js!'
  24.   }
  25. })
  26. </script>
  27. </body>
  28. </html>
 
Vue 对象可以理解为是一位聪明的 工人. 不需要让我们手动修改 DOM.
el 表示: element , 通过它定位页面上的 DOM 节点. 这里的 #app 即为 id = "app" 的 DOM 节点.
data 属性是一个对象, 里面的属性表示: 作用在 id 为 app 的节点上的 可控变量.
 
完成后保存, 我们就可以直接在浏览器中看到效果 
 

怎样理解 Vue 的 "Hello, World!" 代码?的更多相关文章

  1. 理解vue中的scope的使用

    理解vue中的scope的使用 我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取 ...

  2. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  3. 深入理解vue

    一 理解vue的核心理念 使用vue会让人感到身心愉悦,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全. 倘若用一句话来概括vue,那么我首先想到 ...

  4. 深入理解 Vue 组件

    深入理解 Vue 组件 组件使用中的细节点 使用 is 属性,解决组件使用中的bug问题 <!DOCTYPE html> <html lang="en"> ...

  5. vue系列---理解Vue中的computed,watch,methods的区别及源码实现(六)

    _ 阅读目录 一. 理解Vue中的computed用法 二:computed 和 methods的区别? 三:Vue中的watch的用法 四:computed的基本原理及源码实现 回到顶部 一. 理解 ...

  6. 深入理解vue的watch

    深入理解vue的watch vue中的wactch可以监听到data的变化,执行定义的回调,在某些场景是很有用的,本文将深入源码揭开watch额面纱 前言 watch的使用 watch的多种使用方式 ...

  7. 手摸手带你理解Vue响应式原理

    前言 响应式原理作为 Vue 的核心,使用数据劫持实现数据驱动视图.在面试中是经常考查的知识点,也是面试加分项. 本文将会循序渐进的解析响应式原理的工作流程,主要以下面结构进行: 分析主要成员,了解它 ...

  8. 手摸手带你理解Vue的Watch原理

    前言 watch 是由用户定义的数据监听,当监听的属性发生改变就会触发回调,这项配置在业务中是很常用.在面试时,也是必问知识点,一般会用作和 computed 进行比较. 那么本文就来带大家从源码理解 ...

  9. 不一样的角度理解Vue组件

    什么是组件 以Java.C#等面向对象编程语言的角度去理解Vue组件,能够发现组件和面向对象编程的方式和风格很相似.一切事物皆为对象,通过面向对象的方式,将现实世界的事物抽象成对象,现实世界中的关系抽 ...

随机推荐

  1. Java 多线程：什么是线程安全性

    线程安全性 什么是线程安全性 <Java Concurrency In Practice>一书的作者 Brian Goetz 是这样描述"线程安全"的:"当多 ...

  2. leetcode题目142.环形链表Ⅱ(中等)

    题目描述: 给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 p ...

  3. BigDecimal常用的加减乘除算法、比较大小、不展示多余的零、保存两位小数点

    项目中涉及到了BigDecimal的加.减.乘.比较大小.精确度的问题.所以在此总结一下,方便以后复习. //加法 BigDecimal coins = new BigDecimal("0& ...

  4. TIZ_c 第0周总结(2019/10/15-2019/10/22)工欲善其事必先利其器

    TIZ_c 第0周总结(2019/10/15-2019/10/22)工欲善其事必先利其器 任务清单 给自己取一个酷酷的id,并选择1-2个喜欢的方向.(只是初步选择,后期可更改) 改下群名片.例如yo ...

  5. incredibuild(分布式任务软件)脚本

    IncrediBuild 可以在Server段通过修改单个任务的进程上限来实现提升任务执行速度. IncredBuild本机版也可以用来进行本机实现多线程任务分发,这样可以充分利用多核资源. 提交分布 ...

  6. Python接口测试-利用登录后的session用到登录后的接口中

    有些接口是在登录后才能调用的,例如“立即出借”只有在登录后才能到出借窗口,解决: 主要是添加了: s =requests.session() 完整代码: '''登录 ''' print('*'*100 ...

  7. 性能监控系统 | 从0到1 搭建Web性能监控系统

    工具介绍 1. Statsd 是一个使用Node开发网络守护进程,它的特点是通过UDP(性能好,及时挂了也不影响主服务)或者TCP来监听各种数据信息,然后发送聚合数据到后端服务进行处理.常见支持的「G ...

  8. 将蓝牙rssi(信号强度)转换成距离

    遇到一个问题,是将蓝牙rssi(信号强度)转换成距离的问题. 这一问题没有准确的解决办法,但是有人做过一个拟合回归函数,其变化规律比较类似于rssi的变化规律,函数如下: d = ^(abs(rssi ...

  9. 微信一键登录（微信OAuth2.0）

    1.注册微信开放平台https://open.weixin.qq.com,一定要清楚微信开放平台和微信公众平台是分别独立的,不能共用. 2.登录进入——管理中心,网站应用,创建网站应用.填写申请,企业 ...

  10. 手把手教你把5V的Arduino改造成3.3V版本

    Arduino Pro Mini是基于ATmega328的微控制板,支持5V/3.3V电压.但是我们比较容易买到的是5V供电的版本,有的时候需要用到3.3V版本(比如我们的软控DAC).怎样才能让这款 ...