在前一章基础上开发。

1、下载vue.js。(https://cn.vuejs.org/v2/guide/installation.html)

在hello-vue根目录下创建js文件夹，并将该vue.js放入。

2、新建index2.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8" >

    <title>第一个vue项目</title>

    <script src="js/vue.js"></script>

  </head>

  <body>

    <div id="app">

      <!-- 模板，用于展示数据 -->

      {{msg}}

    </div>

    <script>

      new Vue({

        el:"#app",

        data() {

          return {

            msg:"hello 遥远2!"

          }

        },

      })

    </script>

  </body>

</html>

完整结构

最后，运行任务

vue（4）hello world的更多相关文章

  1. 一步一步学习Vue（六）

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  2. 一步一步学习Vue（十一）

    本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var ...

  3. vue（9）—— 组件化开发 - webpack（3）

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

  4. vue（8）—— 组件化开发 - webpack（2）

    webpack的常用loder和插件 loder和插件是什么,现在暂且不表,看到后面你就懂了 引入css问题 直接用link标签导入css 在前面的 vue(7)—— 组件化开发 — webpack( ...

  5. vue（2）—— vue简单语法运用，常用指令集

    按照前面的文章:vue(1)——node.js安装使用,利用npm安装vue  安装完vue之后,就可以使用vue了 vue vue简介 前面安装好vue之后,确实还没有对vue进行介绍,首先,官网: ...

  6. 一步一步学Vue（六）

    本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleIt ...

  7. 下载vuejs,Hello Vue（vscode）

    下载vuejs,Hello Vue(vscode) Hello Vue 下载使用vue.js 动图演示 Vue的基本使用步骤  传送门:https://cn.vuejs.org/v2/guide/in ...

  8. 一步一步学Vue（九） 路由元数据

    一步一步学Vue(九):https://www.cnblogs.com/Johnzhang/p/7260888.html

  9. 一步一步学Vue（六）https://www.cnblogs.com/Johnzhang/p/7242640.html

    一步一步学Vue(六):https://www.cnblogs.com/Johnzhang/p/7237065.html  路由 一步一步学Vue(七):https://www.cnblogs.com ...

  10. vue（element）中使用codemirror实现代码高亮，代码补全，版本差异对比

    vue(element)中使用codemirror实现代码高亮,代码补全,版本差异对比 使用的是vue语言,用element的组件,要做一个在线编辑代码,要求输入代码内容,可以进行高亮展示,可以切换各 ...

随机推荐

  1. [tensorflow]异或门的实现

    一段小程序:待理解 import tensorflow as tf import numpy as np #输入训练数据,这里是python的list, 也可以定义为numpy的ndarray x_d ...

  2. ubuntu apt指令分析

    ubunut安装软件时候需要查看源内可供选择的安装包的一些信息,此处提供一些指令方便以后查阅 apt-get sudo apt-get update #更新源 sudo apt-get upgrade ...

  3. Luogu 4281 [AHOI2008]紧急集合 / 聚会

    BZOJ 1832 写起来很放松的题. 首先发现三个点在树上一共只有$3$种形态,大概长这样: 这种情况下显然走到三个点的$lca$最优. 这种情况下走到中间那个点最优. 这种情况下走到$2$最优. ...

  4. Excel课程学习第二课单元格格式设置

    今天要讲的是单元格格式的设置,字体字号的设置,边框设置,合并单元格之类的. 下面看看具体的内容: 1.使用单元格格式工具美化表格 1.1设置单元格格式的对话框在哪里? 下图中三个小箭头都能打开设置单元 ...

  5. Google androd性能优化经典

    2015年伊始,Google发布了关于Android性能优化典范的专题,一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍了Android系统中有关 ...

  6. RobotFramework教程使用笔记——robotframwork中文乱码显示问题

    转自:https://www.cnblogs.com/dreamyu/p/6878795.html 接口.数据库返回信息有中文的时候会显示unicode的样式,前面带个U这样的显示,如果我们想让它正常 ...

  7. KindEditor 销毁与自动高度冲突解决

    前提准备情况: KindEditor(KE)  +  easyUI 1.通过 EasyUI.Window 打开一个窗口,窗口中包含一个 KE编辑器:在次打开WIndow 的时候 KE会出现编辑器里面的 ...

  8. 【IIS】编译器失败，错误代码为 -2146232576

    把新写的 ASP.NET MVC 代码发布到 阿里云虚拟机后,报如下错误: 编译器失败,错误代码为 -2146232576 参考了 iis 错误 -2146232576 和 asp.net mvc5本 ...

  9. Failed to export using the options you specified. Please check your options and try again

    参考这篇<从ASP.NET传递参数给水晶报表> http://www.cnblogs.com/insus/p/3281114.html  是可以传递参了.但是点击报表的菜单条上的打印图标没 ...

  10. 「BZOJ 3994」「SDOI 2015」约数个数和「莫比乌斯反演」

    题意 设\(d(x)\)为\(x\)的约数个数,求\(\sum_{i=1}^{n}\sum_{j=1}^{m}d(ij)\). 题解 首先证个公式: \[d(ij) = \sum_{x|i}\sum_ ...