Vuejs初步学习

按照官网的介绍,Vuejs有两个主要的技术,第一:数据绑定;第二:组件系统;对于它的组件系统,我倒觉得不太成熟,所以,暂时就使用一下数据绑定吧,用熟一点,还是可以节省不少时间的。

数据绑定的核心优势就是,可以用逻辑代码中的数据改变直接触发页面的变化,省去了传统使用的DOM操作,因为DOM操作比较麻烦,而且重复度高,因此省去了这个步骤,还是有蛮大帮助的。再来,数据驱动视图的思想很符合逻辑,界面中的变化实际上就是数据的变化引起的,如果业务逻辑中的数据变化可以直接反映到界面上,那么只要关注业务逻辑的处理就可以了。

最简单常用的就是,界面中的一些事件触发和服务器的通信,然后服务器发送新的数据,界面根据服务器的数据更新视图,以下是示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script src="js/vue.js"></script>
<title>Vuejs_数据绑定测试</title>
</head>

<body>
<div id="app">
<div>接收到的消息:{{{message}}}</div>
<button @click="receiveMessage">开始接收消息</button>
</div>
</body>
<script>
 var vm = new Vue({
   el: '#app',
   data: {
   message: '<p></p>'
 },
 methods: {
   receiveMessage: function () {
     /*模拟服务器返回延迟*/
     setTimeout(function () {
     $.get("http://localhost:8001", function (data) {
     console.log(data);
     /*这里不能使用this.message,$.get()方法里面的this指向不是vue实例*/
     vm.message = vm.message.concat(data.result);
     }); }, 200);
   }
  }
 });
</script>
</html>

服务器端代码(node.js)

var http = require('http');
console.log('test node.js http_server...');
http.createServer(function (request, response) {
    var data = {'result': '<p>来自服务器端代码片段</p>'};
    response.writeHead(200, {'Content-Type': 'application/json;charset=utf-8', 'Access-Control-Allow-Origin': '*'});
    response.end(JSON.stringify(data));
}).listen(8001);

console.log('node.js server run at http://localhost:8001/...');
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,523评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,252评论 4 61
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,572评论 7 249
  • 年轻人都会迷茫,你的迷茫与社会、国家、体制没有关系,只跟你的年纪有关系,即便是六十岁的时候你也会迷茫,这是人生每时...
    Molly_zhang阅读 236评论 0 0