码迷,mamicode.com
首页 > 其他好文 > 详细

Vue入门之HelloWorld

时间:2018-08-31 00:24:18      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:back   mil   翻译   oct   utf-8   html   hello   lan   style   

       对于新学习一门技术,一门语言比如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

标签:back   mil   翻译   oct   utf-8   html   hello   lan   style   

原文地址:https://www.cnblogs.com/xyzmy/p/9563379.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!