直接复制以下代码到 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. moveUp()

    这个函数内容有点多,想讲一下大概思路: 向上移有两种情况1.前面为空白 这种情况有两个步骤 (1)将人当前的位置设置为空白(0), (2)再讲人前面的位置设置为人(2)2.前面为箱子 当前面为箱子时有 ...

  2. HDU2795线段树入门 简单查询和修改

    http://acm.hdu.edu.cn/showproblem.php?pid=2795 #include<iostream> using namespace std; ; int h ...

  3. jetbrains 2019 激活 error 1653219 解决办法

    我以前用PyCharm按照http://idea.lanyus.com/上的激活码直接可激活. 后来用到IDEA(最新版)了之后激活报错.错误代码为1653219. 后参考博客 解决办法: 把host ...

  4. JDK8记FullGC时候Metaspace内存不会被垃圾回收

    本文链接:https://blog.csdn.net/a15939557197/article/details/90635460背景前段时间有一个这样的需求:第三方调用接口,30分钟内调用120W次: ...

  5. Linux shell利用sed如何批量更改文件名详解[转载]

     需求背景: 目录A用来存放自动化的包生成的apk文件,现在开发修改了包名的 命名规则:环境名称(pro|uat)-release-日期-v版本号.apk 原来的是思路是通过正则表达式匹配新的包名,但 ...

  6. web.config 配置无后缀文本的访问

    在 www.sslforfree.com 申请ssl免费证书,我参考了别人分享的方法,采用了文件验证的方式.可是按照步骤把文件放好后,一直访问不了,总是跳到了404. 确定文件路径和上传的文件都没问题 ...

  7. 配置lumen的log为daily模式

    1.首先添加服务提供者类LogServiceProvider <?php namespace App\Providers; use Illuminate\Support\ServiceProvi ...

  8. 20190925 - 在 macOS 下为 vscode 添加 code 命令行

    在 macOS 下为 vscode 添加 code 命令行最简单办法是:Ctrl + Alt + P,安装 Shell Command: Install 'code' command in PATH, ...

  9. ReDOS攻击

    正则表达式拒绝服务攻击(Regular Expression Denial of Service)当开发人员编写的正则表达式存在缺陷时,攻击者可以构造特殊的字符串来大量消耗服务器资源,最终造成拒绝服务 ...

  10. Summary of OAuth 2.0

    Summary of OAuth 2.0 1 Problems: This pattern of applications obtaining user passwords obviously has ...