React和Vue中的数据绑定

React和Vue中的数据绑定

数据的单向绑定

我们在做原生页面开发的时候,如果涉及到前端的数据动态展现,是如何做的呢?(这里排除了后端直接返回嵌入数据的HTML页面的模式,比如说PHP中的模式),比如下面的例子:

1
<p></p>
1
2
const data = { value: 'hello' }
document.querySelector('p').innerText = data.value;

通过 JavaScript 原生的DOM操作方式,将数据动态填充到DOM中,就是数据(Data)到模板(DOM)的绑定,这就是数据单向绑定。

在Vue-Router中使用跳转动画

在Vue-Router中使用跳转动画

过渡动效

<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:

1
2
3
<transition>
<router-view></router-view>
</transition>
使用vue+v-chart制作一个漂亮的饼状图

使用vue+v-chart制作一个漂亮的饼状图

废话不说直接上代码

Vue-SSR(Server-Side-Renderer)服务器端渲染指南

Vue-SSR(Server-Side-Renderer)服务器端渲染指南

介绍

什么是服务器端渲染 (SSR)?

Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记”激活”为客户端上完全可交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是”同构”或”通用”,因为应用程序的大部分代码都可以在服务器客户端上运行。

Vue-Router简明教程(基础)

Vue-Router简明教程(基础)

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为
Vue-Router简明教程(进阶)

Vue-Router简明教程(进阶)

导航守卫

译者注

“导航”表示路由正在发生改变。

正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。

使用Django+Vue.js快速构建项目

使用Django+Vue.js快速构建项目

安装Django

1
pip install django

如果需要virtualenv的话,请先创建虚拟环境。

1
virtualenv venv -p/usr/local/bin/python3
Vuex的基本概念和使用方法

Vuex的基本概念和使用方法

什么是Vuex

Vuex是一个Vue.js的扩展库,是一个关于状态管理模式的库,提供的作用主要是用于Vue应用的全局数据管理。

安装vue dev tool extension for chrome 后,Vuex可以使用Chrome DevTool中进行调试。

Vue组件-Component解析

Vue组件-Component解析

基本示例

这里有一个 Vue 组件的示例:

1
2
3
4
5
6
7
8
9
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
Agile Angularjs Animation Application Artificial Intelligence BP Babel Bokeh Book C4.5 CART CD CLI CSS CentOS Cinder Clipboardjs Concept Continuous Delivery DeepLearning Department DevOps Develop Development Directive Distribution Django Document ES5 ES6 Echarts Engine Entropy Filter Front End Gallery Git Gradient descent Hexo Horizon ID3.5 Icarus JavaScript Javascript KVM LaTeX LibreOffice Linux MNIST Machine Learning Matrix MiddleWare Module Native Network Nginx NodeJS OOP OpenStack OpenStackApi Operations Oprations PDF Pipline Probability Python React Relational algebra Restful Route SVD SVM Scalar Sigmoid Team Tempest Tensor TensorFlow Testing Time TimeMachine Tips Vector Vmware Vue Vuex WSGI Web Word Cut aliyun auth babel certbot decision tree git homebrew jwt keystone loader mathematics migrate openstack pdf2html pm2 singular value decomposition vue-router vue-ssr webpack 事件 事件代理 事件冒泡 事件捕获 低通滤波器 入门 全局变量 全局对象 全栈 公式 决策树 函数 分类器 加速 匹配滤波边缘检测 卷积 卷积核 原型链 双向绑定 反向传播 发布 变量类型 官方示例 对偶形式 对象 平移和查分边缘检测 感知机模型 拉格朗日乘子法 推导 提交阶段 数据绑定 最大似然估计 最小二乘估计 最小二乘法 朴素贝叶斯 机器学习 条件概率 梯度下降 梯度方向边缘检测 概念 概率 求导 流程 源码阅读 生命周期 矩阵 神经网络 私有对象 线性回归 联合概率 识别 贝叶斯判定准则 边缘检测 边际概率 闭包 间隔 高斯分布 高通滤波器
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×