对于新学习一门技术，一门语言比如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. Trie UVALive 7192 Chip Factory (15长春J)

    题目传送门 题意:从n个数中选出不同的三个数a b c,使得(a+b)^c 最大 分析:先将所有数字按位插入到字典树上,然后删除两个数字,贪心询问与剩下的数字最大异或值. /************* ...

  2. Windows开机自动登录及取消自动登录的设置

    开机自动登录 1.开始菜单搜索框输入 “netplwiz” 按回车 或“Win+R”组合键打开“运行”框内输入“netplwiz” 或“运行”框内输入“control userpasswords2”( ...

  3. 在CMD下运用管理员权限

    方法一:鼠标右键 这个方法比较比较普通,点开开始找到cmd,右击鼠标“以管理员身份运行(A)”这样调用就是管理员的权限: 方法二:快捷模式 在点开win+R后,选择“以管理员身份运行”,然后确定:可以 ...

  4. Jmeter4.0----CSV Data Set Config_对输入参数进行参数化（14）

    1.说明 测试接口时,当请求参数不是固定的,每次请求对应的参数都是不同的,就需要对请求参数进行参数化. 2.步骤 第一步:准备数据 (以报告编制人员为例)首先创建.txt文本,自己编辑要参数化的内容 ...

  5. POJ 1061青蛙的约会。求解(x+mT)%L=(y+nT)%L的最小步数T。

    因为是同余,所以就是(x+mT)%L-(y+nT)%L=0.可以写成(x-y+(m-n)T)%L=0.就是这个数是L的倍数啦.那么我可以这样x-y+(m-n)T + Ls = 0.就可以了,s可正可负 ...

  6. Dom4j-读写xml

    1.示例代码 Document document = DocumentHelper.createDocument(); // 增加命名空间 Namespace sopa12 = Namespace.g ...

  7. java字符串与二进制的相互转化

    public class StrBinaryTurn { // 将Unicode字符串转换成bool型数组 public boolean[] StrToBool(String input) { boo ...

  8. 去除pycharm的波浪线

    PyCharm使用了较为严格的PEP8的检查规则,如果代码命名不规范,甚至多出的空格都会被波浪线标识出来,导致整个编辑器里铺满了波浪线,右边的滚动条也全是黄色或灰色的标记线,很是影响编辑.这里给大家分 ...

  9. 配置百度云盘python客户端bypy上传备份文件

    要求:安装python2.7,安装git 1.git clone https://github.com/houtianze/bypy.git 2.cd bypy 3.sudo python setup ...

  10. NC57访问报错:java.sql.SQLException: Io 异常: Got minus one from a read call

    一.报错信息 1.  前端登录界面 2.  后台应用日志 报错信息一致为: $$callid= $$thread=[Service Monitor and Runtime Enroment] $$ho ...