对于新学习一门技术,一门语言比如JAVA、Python等都是从编写Hello World开始的,这样一来有益于初学者的人门,并给予初学者一定的信心,所以我也从HelloWorld开始讲起。


干货:

  对于学习新的一门技术最好都是重从它的官网开始(如果是中文的官网最好,嘿嘿,因为本人的英文水平也是有限的),Vue的官网就是非常好它的官网可以支持翻译成多种语言的,所以对于英文不好的小伙伴是一个福利。Vue官网: https://cn.vuejs.org/ 
第一步引入Vue.js文件

  vue.js文件分为两种文件:

          第一种是:开发版本

          第二种是:生产版本

  在这里我们使用的是开发版本的,等项目完成发布之后再引入生产版本


代码:  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello World</title>
<script src="/js/vue.js"></script>
</head>
<body>
  <h1>Hello</h1>
  <div id="app">
   {{message}}//两者的值保持一致的,显示的值就是 hello vue!
  </div>
<script>
  var vm = new Vue({
  el:'#app',//这个app就是DIV的属性值里的app
  data:{
   message:'hello world!'
  }
});
</script>
</body>
</html>
运行结果

不足之处请大牛多多指正!!!

Vue入门之HelloWorld的更多相关文章

  1. Vue 入门之概念

    Vue 简介 Vue 是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 [view].新的 Vue 版本参考了 React 的部分设计,当然也有自己独特的地方,比如 Vue 的单文件组 ...

  2. 【Vue 入门】使用 Vue2 开发一个展示项目列表的应用

    前言 一直没有找到一个合适的展示个人项目的模板,所以自己动手使用 Vue 写了一个.该模板基于 Markdown 文件进行配置,只需要按一定规则编写 Markdown 文件,然后使用一个 在线工具 转 ...

  3. vue入门|ElementUI使用指南

    vue入门|ElementUI使用指南 1.开发前务必熟悉的文档: vue.js2.0中文,项目所使用的js框架 vue-router,vue.js配套路由 vuex 状态管理 Element UI框 ...

  4. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  5. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  6. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  7. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  8. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  9. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

随机推荐

  1. 基于CentOS系统下的Oracle的安装

    背景 最近的数据库的实验课,要求利用虚拟机安装CentOS系统,并在此系统上安装Oracle_11g软件实现监听,在windows系统上安装SQL Developer软件作为客户端 ,从而可以在SQL ...

  2. Luogu P4144 大河的序列 贪心+脑子

    首先向颜神犇致敬...还是自己太菜,又不仔细思考,上来就翻题解$qwq$ 首先有一种贪心方法:即,$ans=2*max(dirty_i)$ 证明:若现在的答案为$ans$,考虑一个新的数$x$对答案的 ...

  3. java基础---GC

    一.Java基础: GC即:garbage collection垃圾回收机制.Java是自动回收垃圾的,像c c++等语言没有自动垃圾回收机制,长时间开启服务器就会导致 内存泄漏,占用内存 Java的 ...

  4. div可编辑 可拖动

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.可编辑: <div id="move" contentEditable="true">可编 ...

  5. postgresql备份数据库

    备份数据库:pg_dump -U username -h localhost -f /me.sql 数据库名; 恢复数据库:psql -U username -h localhost -f /me.s ...

  6. Storm概念学习系列之Storm与Hadoop的角色和组件比较

    不多说,直接上干货! Storm与Hadoop的角色和组件比较 Storm 集群和 Hadoop 集群表面上看很类似.但是 Hadoop 上运行的是 MapReduce 作业,而在 Storm 上运行 ...

  7. centos服务器nginx相关命令

    1.找到nginx路径: ps aux | grep nginx -> /usr/local/nginx/sbin/nginx 2.nginx配置检查: /usr/local/nginx/sbi ...

  8. c/s和b/s的区别及实例说明【转】

    B/S结构,即Browser/Server(浏览器/服务器)结构,是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构.在这种结构下,用户界面完全通过WWW浏览器实现,一部分事务逻辑 ...

  9. SQLServer2008 开启远程连接

    关闭防火墙 基本的设置可以参考下面的链接: http://wenku.baidu.com/link?url=qjZKZCCoa5T3EGd_rqSjl6Tuhb1wYjIHyXri630QxuAIKu ...

  10. SpringMVC05 return (Json)

    这里要主要的是js文件要引入,文中不做解释 1.导入包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xs ...