您的位置: 首页  >  文章  >  vuejs2.0从入门到放弃--入门实例（四）

vuejs2.0从入门到放弃--入门实例（四）

分类: 文章 • 2024-10-31 23:06:10

最近，很多小伙伴有疑惑，想学vuejs必须先了解复杂的构建工具和命令行操作吗！！答案是否定的！

对于很多做前端的同学，涉及到命令行和构建工具，想必大家都比较发憷，没有人指导，根本就不理解不了命令行的操作，导致好多想学习vue的同学被扼杀在摇篮里。今天就跟大家一起开启，没有命令行的vue学习之旅，本文适合小白，高手自动忽视。

现在，大部分的vuejs的资料都是用vue-cli去构建项目的，给不懂nodejs、不会命令行操作的前端小白们设置了很高的门槛，由于本人也是小白一步一步走过来的，所以，对此事深有体会，废话不多说。

vuejs本来很简单易上手的，初学阶段，我们完全可以像使用jquery一样去使用vuejs。直接用<script>标签引入，就这么简单，如果会用<script>标签引入并使用jquery，那么你就踏出了使用vuejs的第一步。

[html] view plain copy
  1. <script src="你的路径/vue.js"></script>  

如果你没有vuejs文件，可以去github上搜vue，结果里第一个star数量最多的就是咯，去路径 vue/dist/ 下载 vue.js 或者 vue.min.js 都可以，就像jquery.js 和 jquery.min.js一个道理。如下图

vuejs2.0从入门到放弃--入门实例（四）

接下来，就可以正常使用vuejs了。

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>vue快速上手</title>  
  6. <style type="text/css">  
  7.   
  8. </style>  
  9. </head>  
  10. <body>  
  11. <div class="container">  
  12.     <h3>个人信息</h3>  
  13.     <!-- person 指向 vm实例的data.person对象 -->  
  14.     <p>我叫{{person.name}}</p>  
  15.     <p>我今年{{person.age}}岁了</p>  
  16.     <p>我是做{{person.job}}工作的</p>  
  17. </div>  
  18.   
  19.   
  20. <script type="text/javascript" src="你的路径/vue.js"></script>  
  21. <script type="text/javascript">  
  22. // 实例化一个 vue 对象  
  23. var vm = new Vue({  
  24.     // vue 对象的容器  
  25.     el: '.container',  
  26.     // 数据对象集合  
  27.     data: {  
  28.         // 预留出person占位，防止报错  
  29.         person:{}  
  30.     },  
  31.     // 方法集合  
  32.     methods: {  
  33.       
  34.     }  
  35. })  
  36. </script>  
  37. </body>  
  38. </html>  

这个时候，界面是这样的，如下图

vuejs2.0从入门到放弃--入门实例（四）

接下来，我们来获取个人信息的数据，这里有两种方法可以获取。第一种，直接在vue体系内，在methods方法集合中获取。第二种，由于vue跟一些UI框架（如layui）一起用的时候，会导致一些form类的组件不能用（个人猜测是因为事件监听导致的），所以，我们在整个页面的结构上获取数据，然后复制给vue实例。

直接在vue体系内获取数据，我们模拟一个ajax获取数据的方法，如下

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>vue快速上手</title>  
  6. <style type="text/css">  
  7.   
  8. </style>  
  9. </head>  
  10. <body>  
  11. <div class="container">  
  12.     <h3>个人信息</h3>  
  13.     <!-- person 指向 vm实例的data.person对象 -->  
  14.     <p>我叫{{person.name}}</p>  
  15.     <p>我今年{{person.age}}岁了</p>  
  16.     <p>我是做{{person.job}}工作的</p>  
  17.       
  18.     <!-- 点击按钮去个人信息数据 -->  
  19.     <button @click="getData">获取数据</button>  
  20. </div>  
  21.   
  22.   
  23. <script type="text/javascript" src="你的路径/vue.js"></script>  
  24. <script type="text/javascript">  
  25. // 个人信息数据  
  26. var userInfo = {  
  27.     name: '安小夏',  
  28.     age: 18,  
  29.     job: 'web前端'  
  30. };  
  31.   
  32. // 实例化一个 vue 对象  
  33. var vm = new Vue({  
  34.     // vue 对象的容器  
  35.     el: '.container',  
  36.     // 数据对象集合  
  37.     data: {  
  38.         // 预留出person占位，防止报错  
  39.         person:{}  
  40.     },  
  41.     // 方法集合  
  42.     methods: {  
  43.         getData: function(){  
  44.             // this.person 指向的是 data.person  
  45.             this.person = userInfo;  
  46.         }  
  47.     }  
  48. })  
  49. </script>  
  50. </body>  
  51. </html>  


运行以上代码，点击“获取数据”按钮，会看到 变量 userInfo 里的数据会显示到页面中，如下图所示

vuejs2.0从入门到放弃--入门实例（四）


是不是很简单，省去了很多操作DOM的步骤，瞬间感觉自己的年轻了。

还有第二种方法，时间跟篇幅有限，想继续探讨的朋友，可以去查看原文  http://blog.qianduanchina.cn/post/5a4450882d630d5801b945f6  ，希望能够帮到初学的你！

相关推荐