Vue入门之HelloWorld-白红宇

Vue入门之HelloWorld

阅读量：4465 次

发布时间：2019-06-08

本文共 896 字，大约阅读时间需要 2 分钟。

对于新学习一门技术，一门语言比如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>
运行结果
不足之处请大牛多多指正！！！

转载于:https://www.cnblogs.com/xyzmy/p/9563379.html

你可能感兴趣的文章