
我的博客即将入驻“云栖社区”,诚邀技术同仁一同入驻。
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式。目的是保存下来,方便自己查阅。 !官方文档:https://cn.vuejs.org/v2/guide/ 01. vue 介绍 <html> <head> <meta charset="utf-8"/> <title>vue 介绍</title> <!-- <script src="js/vue.min.js"></script> --> <script src="https://unpkg.com/vue"></script> </head> <body> <!-- 官方文档:https://cn.vuejs.org/v2/guide/ --> <!-- 绑定 --> <div id="app"> <!-- ①声明式渲染 --> <p>{{ info }}</p> <p v-text="info"></p> <p v-html="info"></p> <p v-once>{{ info }}</p> <p>{{ info }}</p> <p>{{ info.concat("!!!") }}</p> <p>{{ info ? "has info" : "no info" }}</p> <!-- <p>{{ var info2 = "info2" }}</p> --> <!-- <p>{{ if (info) {return "info2"} }}</p> --> <!-- ②绑定元素特性 --> <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息!</span> <!-- ③条件:控制切换一个元素是否显示 --> <p v-if="seen">现在你看到我了</p> <!-- ④循环:绑定数组的数据来渲染一个项目列表 --> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> <!-- ⑤处理用户输入 --> <button v-on:click="reverseMessage">逆转消息</button> </br> <!-- ⑥表单输入和应用状态之间的双向绑定 --> <input v-model="info"> <!-- ⑦使用组件 --> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> <!-- ①②③④⑤⑥⑦⑧⑨⑩ --> </div> <!-- 数据 --> <script> var data = { info : "Hello world", // ①⑥ message: '页面加载于 ' + new Date().toLocaleString(), // ② seen: true, // ③ todos: [ // ④ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ], groceryList: [ // ⑦ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其它什么人吃的东西' } ] } // 注册组件(全局)// ⑦ Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) // 创建根实例 var vm = new Vue({ el: '#app', data: data, methods: { reverseMessage: function () { // ⑤ this.message = this.message.split('').reverse().join('') } } }) </script> </body> </html>
本文摘录自知乎的一个问题的答案,作为我的一篇笔记。感谢原作者。 作者:李乐丁 链接:https://www.zhihu.com/question/60577602/answer/178077799 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 还差得远,js和python压根不是同一个目标,要说餐食,是大家一起蚕室php。 backend的场景比frontend复杂多了,除了最常见的拉起个server处理请求这种在线业务外,还有各种由时间、任务或数据触发的离线计算,各种资源分配、管理、采集和监控处理,以及无数的一次性程序,无论按代码量、数据量还是计算量来看,非在线业务才是backend的大战场。 对于非在线业务而言,主要强调的是吞吐量和研发效率,所以一个带有庞大标准库的、使用同步模型但易于并行、语法简单但规整、有多语言粘合性的语言,才是大家最爱。这是python真正的活跃地带,js的异步模型相比就太复杂了,async/await并不能cover全部,backend不喜爱不成熟的东西。 说回在线业务,无论什么总是可以分出三层来,交互层、业务层和数据层。交互层node是很适合的,但主要对手是php;业务层最看重质量和性能,目前还没有替代java和c/c++的方案;至于数据层都是各种成熟软件。 总的来说js和python不是敌人,各擅胜场而已。
版本一 版本二 版本三 版本四
本文地址:http://www.cnblogs.com/hhh5460/p/7397006.html 说明 以前的那个例子的思路是后端监控数据存入数据库;前端ajax定时查询数据库。 这几天在看websocket。前端有一个js库:socket.io.js,后端python也有很多库实现了websocket,flask就有一个好用的扩展:flask-socketio。 在参考了这里之后,将前面那个例子改写成后端后台线程一旦产生数据,即刻推送至前端。 好处是不需要前端ajax定时查询,节省服务器资源。 项目一共两个文件: app.py templates/index.htmll app.py 路由及后台线程 ''' 服务器cpu监控程序 思路:后端后台线程一旦产生数据,即刻推送至前端。 好处:不需要前端ajax定时查询,节省服务器资源。 作者:hhh5460 时间:2017.8.19 ''' import psutil import time from threading import Lock from flask import Flask, render_template, session, request from flask_socketio import SocketIO, emit # Set this variable to "threading", "eventlet" or "gevent" to test the # different async modes, or leave it set to None for the application to choose # the best option based on installed packages. async_mode = None app = Flask(__name__) app.config['SECRET_KEY'] = 'secret!' socketio = SocketIO(app, async_mode=async_mode) thread = None thread_lock = Lock() # 后台线程 产生数据,即刻推送至前端 def background_thread(): """Example of how to send server generated events to clients.""" count = 0 while True: socketio.sleep(5) count += 1 t = time.strftime('%M:%S', time.localtime()) # 获取系统时间(只取分:秒) cpus = psutil.cpu_percent(interval=None, percpu=True) # 获取系统cpu使用率 non-blocking socketio.emit('server_response', {'data': [t, *cpus], 'count': count}, namespace='/test') # 注意:这里不需要客户端连接的上下文,默认 broadcast = True !!!!!!! @app.route('/') def index(): return render_template('index.html', async_mode=socketio.async_mode) # 与前端建立 socket 连接后,启动后台线程 @socketio.on('connect', namespace='/test') def test_connect(): global thread with thread_lock: if thread is None: thread = socketio.start_background_task(target=background_thread) if __name__ == '__main__': socketio.run(app, debug=True) index.html 页面文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ECharts3 Ajax</title> <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.bootcss.com/socket.io/1.5.1/socket.io.min.js"></script> <!-- ECharts 3 引入 --> <script src="http://echarts.baidu.com/dist/echarts.min.js"></script> </head> <body> <!--为ECharts准备一个具备大小(宽高)的Dom--> <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <script type="text/javascript"> // 作者:hhh5460 // 时间:2017.8.19 //--- 折柱 --- var myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: '服务器系统监控' }, tooltip: {}, legend: { data:['cpu1','cpu2','cpu3','cpu4'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: 'cpu1', type: 'line', data: [] },{ name: 'cpu2', type: 'line', data: [] },{ name: 'cpu3', type: 'line', data: [] },{ name: 'cpu4', type: 'line', data: [] }] }); // 本人笔记本有四个cpu,读者朋友请根据自己的情况,相应修改!! // 五个全局变量:time、cpu1、cpu2、cpu3、cpu4 var time = ["","","","","","","","","",""], cpu1 = [0,0,0,0,0,0,0,0,0,0], cpu2 = [0,0,0,0,0,0,0,0,0,0], cpu3 = [0,0,0,0,0,0,0,0,0,0], cpu4 = [0,0,0,0,0,0,0,0,0,0] //准备好统一的 callback 函数 var update_mychart = function (res) { //res是json格式的response对象 // 隐藏加载动画 myChart.hideLoading(); // 准备数据 time.push(res.data[0]); cpu1.push(parseFloat(res.data[1])); cpu2.push(parseFloat(res.data[2])); cpu3.push(parseFloat(res.data[3])); cpu4.push(parseFloat(res.data[4])); if (time.length >= 10){ time.shift(); cpu1.shift(); cpu2.shift(); cpu3.shift(); cpu4.shift(); } // 填入数据 myChart.setOption({ xAxis: { data: time }, series: [{ name: 'cpu1', // 根据名字对应到相应的系列 data: cpu1 },{ name: 'cpu2', data: cpu2 },{ name: 'cpu3', data: cpu3 },{ name: 'cpu4', data: cpu4 }] }); }; // 首次显示加载动画 myChart.showLoading(); // 建立socket连接,等待服务器“推送”数据,用回调函数更新图表 $(document).ready(function() { namespace = '/test'; var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace); socket.on('server_response', function(res) { update_mychart(res); }); }); </script> </body> </html> 效果图