直接复制以下代码到 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. IDEA项目结构只剩下了pom,而代码都找不到了

    大体效果就是下面这个样子的, 只剩下一个pom文件了. 解决方式: 本来想彻底排查下的,但是最后发现 直接删除.idea文件, 重新引入项目,就可以解决,可能就是编译器发神经吧 下面是排查的过程,不过 ...

  2. 解决WAMP Server与IIS端口冲突问题

    版本前提: 腾讯云服务器 windows server 2012 R2 WampServer3.10  64bit 有两种思路 一.修改wamp端口 文件位置   C:\wamp64\bin\apac ...

  3. ubuntu下如何关闭某个端口？

    1. 开启防火墙 sudo ufw enable 2. 关闭某个端口,如80端口 sudo ufw deny 80 3. 查询当前防火墙状态 sudo ufw status

  4. 关于go module

    从Go 1.11开始引入module,用于版本管理. 通过使用module,工程目录的位置不用必须放在GOPATH下. 当前版本是1.13,下文中将以Go1.13为例介绍module. 在Go 1.1 ...

  5. 【Linux命令】find命令

    [find命令] 说明:find命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查 ...

  6. Rsa加密类

    需要导入Base64.jar包 import java.io.ByteArrayOutputStream; import java.security.Key; import java.security ...

  7. RabbitMQ 使用参考

    http://www.zouyesheng.com/rabbitmq.html 安装 基本概念 基本形式 持久化 调度策略 5.1. fanout 5.2. direct 5.3. topic 5.4 ...

  8. 横向对比分析Python解析XML的四种方式

    横向对比分析Python解析XML的四种方式 在最初学习PYTHON的时候,只知道有DOM和SAX两种解析方法,但是其效率都不够理想,由于需要处理的文件数量太大,这两种方式耗时太高无法接受. 在网络搜 ...

  9. DELPHI ClientData使用详解

    在三层结构中,TClientDataSet的地位是不可估量的,她的使用正确与否,是十分关键的,本文从以下几个方面阐述她的使用,希望对你有所帮助. 1.动态索引procedure TForm1.DBGr ...

  10. Elasticsearch常见错误与配置简介

    一.常见错误 1.1 root用户启动elasticsearch报错 Elasticsearch为了安全考虑,不让使用root启动,解决方法新建一个用户,用此用户进行相关的操作.如果你用root启动, ...