直接复制以下代码到 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. MySQL单机安装

    操作系统:CentOS 7 MySQL:5.6 MySQL的卸载 查看MySQL软件 卸载MySQL 查看是否还有 MySQL 软件,有的话继续删除. 安装MySQL 启动MySQL 设置root用户 ...

  2. 【Spring Boot】 Spring Boot 2.x 版本 CacheManager 配置方式

    Spring Boot 1.X RedisCacheManager 配置方式 @Bean public CacheManager cacheManager(RedisTemplate redisTem ...

  3. Nginx之核心结构体ngx_cycle_t

    1. ngx_listening_t 结构体 ngx_cycle_t 对象中有一个动态数组成员叫做 listening,它的每个数组元素都是 ngx_listening_t 结构体,而每个 ngx_l ...

  4. linux基础技巧

    命令行颜色显示: \[\e]0;\u@\h: \w\a\]${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\0 ...

  5. 修改网卡缓存，解决Linux 网卡丢包严重问题

    Linux 网卡丢包严重 生产中有一台linux设备并发比较大,droped包比较多,尤其是在跑游戏数据包的时候,存在严重的丢包现象,怀疑网卡性能不足,在更换设备前想能不有通过软件方法解决,通过网上一 ...

  6. sqlserver创建链接服务器连接sqlserver脚本

    示例: EXEC sp_addlinkedserver @server='MyLinkServer', --链接服务器别名 @srvproduct='', @provider='SQLOLEDB', ...

  7. C++ STL——类型转换

    目录 一 类型转换 注:原创不易,转载请务必注明原作者和出处,感谢支持! 注:内容来自某培训课程,不一定完全正确! 一 类型转换 类型转换的含义是通过改变一个变量的类型为别的类型从而改变变量的表示方式 ...

  8. JVM学习笔记之JDK、JRE、JVM的关系(二)

    JDK(Java Development Kit)是针对Java开发员的产品,是整个Java的核心,包括了Java运行环境JRE.Java工具和Java基础类库.Java Runtime Enviro ...

  9. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_4-1.单机和分布式应用的登录检验讲解

    笔记 第四章 开发在线教育视频站点核心业务之JWT微服务下的用户登录权限校验 1.单机和分布式应用的登录检验讲解     简介:讲解单机和分布式应用下登录校验,session共享,分布式缓存使用 1. ...

  10. JAVA RMI分布式原理和应用

    RMI(Remote Method Invocation)是JAVA早期版本(JDK 1.1)提供的分布式应用解决方案,它作为重要的API被广泛的应用在EJB中.随着互联网应用的发展,分布式处理任务也 ...