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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue Hello World.</title>

<!-- 引入 Vue 的在线静态资源, 这是使用 Vue 最简单的方法. -->

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<!-- 这里有一个特殊的语法点: 双花括号 -->

<!-- 这里借鉴了模板引擎的语法, 双花括号里面的内容是一个 "可执行" 的表达式. -->

<div id="app">

  <p>{{ message }}</p>

</div>

<script>

// Vue 对象可以理解为是一位聪明的 "工人". 不需要让我们手动修改 DOM.

// el 表示: "element" , 通过它定位页面上的 DOM 节点. 这里的 "#app" 即为 id = "app" 的 DOM 节点.

// data 属性是一个对象, 里面的属性表示作用在 id 为 app 的节点上的 "可控变量".

new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue.js!'

  }

})

</script>

</body>

</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. Nginx-HTTP之listen指令解析

    1. ngx_http_core_listen static char * ngx_http_core_listen(ngx_conf_t *cf, ngx_command_t *cmd, void ...

  2. （转载）完成端口(CompletionPort)详解 - 手把手教你玩转网络编程系列之三

    转自:http://blog.csdn.net/piggyxp/article/details/6922277 前 言 本系列里完成端口的代码在两年前就已经写好了,但是由于许久没有写东西了,不知该如何 ...

  3. IDEA + tomcat 远程调试（JPDA）

    一.修改 tomcat 配置,启动远程调试 Linux(bin\catalina.sh) # 将 localhost 改为 0.0.0.0 if [ -z "$JPDA_ADDRESS&qu ...

  4. ESXi 5.1 识别GPT问题

    使用paredUtil命令 partedUtil mklabel /dev/disks/eui.227c000155707e0b msdospartedUtil mklabel /dev/disks/ ...

  5. EBR-TLV数据格式

    EMV规范中的BER-TLV数据格式:BER-TLV结构由Tag.Length.Value三部分组成. [TAG域]TAG可以由1个与多个字节组成,TAG域的第一个字节编码格式如下: 其中由三部分组成 ...

  6. 利用beautifulsoup下载网页html代码中的css, js, img文件并保存

    # -*- coding:utf-8 -*- from bs4 import BeautifulSoup as BS import urllib.request as rqst import os u ...

  7. openstack部署cinder

    controller 一.创建cinder数据库并设置权限 mysql -u root -p    CREATE DATABASE cinder;    GRANT ALL PRIVILEGES ON ...

  8. Spring源码整理

    转载:https://www.cnblogs.com/ITtangtang/p/3978349.html  感谢博主

  9. python连接mysql数据库实例demo(银行管理系统数据库版)

    主函数: import adminView import os import pickle from bankFunction import BankFunction import time def ...

  10. Python实现计算圆周率π的值到任意位的方法示例

    Python实现计算圆周率π的值到任意位的方法示例 本文实例讲述了Python实现计算圆周率π的值到任意位的方法.分享给大家供大家参考,具体如下: 一.需求分析 输入想要计算到小数点后的位数,计算圆周 ...