VUE 入坑系列一双向绑定

html代码 <div id="app"> <p>{{message}}</p> <span>message1</span> <input v-model="message"> <span>message2</span> <input v-model="message"> </div> javascript代码 var vm =…

VUE 入坑系列一事件

html代码 <div id="app"> <button v-on:click="counter += 1">加1</button> <button @click="counter += 1">加2</button> <button v-on:click="minusOne">减1</button> <button @click=&qu…

VUE 入坑系列一基础语法

html代码 <div id="app"> {{message}} </div> JavaScript代码 var vm = new Vue({ el: "#app", data: { message: "Hello Vue!" } });…

前言最近做了一些小项目,小组里写前端的确实有点拉胯,于是自己动手写前端,因为大一学过web前端基础,所以对HTML,CSS还有印象,就直接对JS下手了,学了两天把JS大致搞明白了,顺便对JQuery和Ajax都学了下,然后对之前的项目稍微改进了一下,自信心爆棚直接上框架Vue Vue简介 (说真的我觉得这个logo是真好看) Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架:Vue 只关注视图层, 采用自底向上增量开发的设计:的目标是通过尽可能简单的 AP…

Vue入坑第一篇

写在前面的话:文章是个人学习过程中的总结,为方便以后回头在学习.文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. 一.前言本篇作为vue入门的一篇总结,目地在使用vue一些简单的特性去打开vue的学习之门. 二.搭建vue开发环境搭建vue的开发环境一般有两种方式,一种是使用vue-cli脚手架,这个需要具备Node的一些基础知识:第二种方式是在我们编写的html页面中引入vue.js文件,就可以使用vue了.后续vue基础的学习会用使用…

VUE JS 使用组件实现双向绑定

1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据set时,在数据属性上添加监控,这样数据发生改变时,就会触发他上面的watcher,而ANGULARJS 是使用脏数据检查来实现的. 另外VUEJS 入门比ANGULARJS 简单,中文文档也很齐全. 2.组件实现在使用vue开发过程中,我们会需要扩展一些组件,在表单中使用,比如一个用户选择器.…

gulp入坑系列(2)——初试JS代码合并与压缩

在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/6159809.html 在之前建立的项目中写入,在根目录新建js文件夹,并在文件夹中新建两个js文件,代码如下: index.js: var index={}; index={ test:function(argument){ console.log('test'); } } index.test()…

3-STM32带你入坑系列(自己封装点亮一个灯的库--Keil)

2-STM32带你入坑系列(点亮一个灯--Keil) 首先建一个stm32f103x.h的文件,然后 #include "stm32f103x.h" 还记得上一节现在呢就是做一个库,我就是想控制IO的时候方便一点,列如 PA 通过某种方式 CRL/CRH/IDR/ODR/BSRR/BRR/LCKR PB 通过某种方式 CRL/CRH/IDR/ODR/BSRR/BRR/LCKR PC ; PD ; PE ...... 额,直接进入正题要是可以这样就好了 PA->CR…

2-STM32带你入坑系列(点亮一个灯--Keil)

1-STM32带你入坑系列(STM32介绍) 首先是安装软件这一节用Kei来实现,需要安装MDK4.7这个软件,怎么安装,自己百度哈.都学习32的人了,不会连个软件都不会安装吧....还是那句话没有百度一下解决不了的事情,如果有那就是百度两下(除了科研和探索人类未知领域) 建个文件夹我用的是STM32F103C8t6 大家根据自己的选择建一个主函数的 .c文件编译一下启动文件里面有个执行 SystemInit函数的调用,因为咱没有这个函数,所以报错了,其实寄存器开发用不到,实际上这…

1-STM32带你入坑系列(STM32介绍)

由于自己的物联网开发板上的单片机是用的STM32,但是有些朋友没有用过,所以我将用这块开发板,带着大家入门STM32 先介绍一下STM32,我是在大三下学期的时候开始接触STM32,当时是想做一个小车,要用摄像头,所以学习了STM32. 大家可以看我的这一系列的文章 https://www.cnblogs.com/yangfengwu/category/802676.html 说一下哈,如果学单片机的,最好要学习一下STM32,因为现在大部分公司都在用,或者这个系列的,或者都是Cortex-M…

Vue入坑教程（二）——项目结构详情介绍

之前已经介绍了关于Vue的脚手架vue-cli的安装,以及一些文件目录介绍.具体可以查看<vue 入坑教程(一)--搭建vue-cli脚手架> 下面简单说一下具体的文件介绍 (一) package.json 配置文件 package.json是项目的配置文件,里面是项目的相关的包依赖,npm运行命令,位于项目根目录. { "name": "ddlcwecaht", ---------------------项目名称 "version"…

入坑第二式 golang入坑系列

史前必读: 这是入坑系列的第二式,如果错过了第一式,可以去gitbook( https://andy-zhangtao.gitbooks.io/golang/content/ )点个回放,看个重播.因为我把第二式的入坑宣言和二式第一节的内容放在了一起,内容有些多.所以史前必读就不写那么多了. 所以直接请出入坑宣言: 飞龙在天乾卦九五此式跃起凌空,居高下击,先声夺人!以一飞冲天之式上跃双膝微曲,提气丹田,待觉真气上升,放松肌骨,存想玉枕穴间,急发掌劲取敌首.肩.胸上三路不知是金庸老先生造就了…

vue iview render里面没有双向绑定 renderHeader 要序列化反序列一下

vue iview render里面没有双向绑定 renderHeader 要序列化反序列一下 renderHeader: (h, params) => { return [ h('RadioGroup', { props: { value: '3', type: 'button' }, on: { 'on-change': value => { // params.index 行 params.column.key 列 this.tableData.some((item, index,…

vue 数组和对象的双向绑定不响应问题

对象和数组的数据类型是对象,对象是对象这个是毫无疑问的.数组可以把索引当成键名,把索引对应的元素当成该键名的键值. vue对象有些操作不能双向绑定的原因是vue未改变原对象,以及未给新增属性增加set方法. 解决方法: 给对象增加新属性,改变数组某个值得时候使用$set()方法. 比如 this.$set(this.obj, 'name', 'value').…

Docker入坑系列（二）

Docker入坑系列(二) 上一篇我们为Docker创造了一个良好的生活环境,这一篇我们就开始让Docker活起来. 安装Docker ok,原文地址在这里. 当然,我只是自己翻译了一下而已- -跟着做了一遍就安装好啦. # Docker 是一个能够让应用自动化部署的基础软件框架."容器"是封装好的,轻量级的便携式应用模块 # Docker is a container-based software framework for automating deployment of appl…

Docker入坑系列（一）

Docker入坑系列(一) 引用嘛,当然是来引用别人说的东西啦. Docker 是一个开源项目,诞生于 2013 年初,它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linux 基金会,遵从了 Apache 2.0 协议,项目代码在 GitHub 上进行维护. PS: 由于小轩对Centos7命令不太熟,所以此次系统选择的Centos6.5.(其实是手里只有6.5和7的镜像啦,不想再下载啦.) 针对Centos6.x最小化安装之后的一些个人习惯,参见:Centos6.x最小…

vue Object.defineProperty Proxy 数据双向绑定

Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象对于数组不能监听到数据的变化虽然 Vue 中确实能检测到数组数据的变化,但是其实是使用了 hack 的办法,并且也是有缺陷的. const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto) // hack 以下几个函数 const met…

[vue]通过watch实现数据双向绑定

modal:单向绑定 <head> <meta charset="UTF-8"> <title>test</title> <style> .mask { width: 100%; height: 100%; position: fixed; background: rgba(0, 0, 0, .35); top: 0; left: 0 } .dialog { width: 400px; height: 150px; backg…

Vue源码学习之双向绑定

首发地址:CJWbiu's Blog 原理: ‘当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器.’ 上面那段话是Vue官方文档中截取的,可以看到是使用Object.defineProper…