## 1 qvm意义
>[info] qvm是一个适用于移动端的迷你mvvm框架。参考vuejs的设计,进行简化。
>[info] 使用zepto作为基本依赖库，浏览器的原生支持基础上使用最少代码实现一个vvm框架
## 2 vm模型结构
~~~
$qvm = {
$id: 823832887973495 ;qvm对象的全局id。
$elem: #div ;View视图层节点
$model:{
;viewmodel 通过指令directive关联view到model的操作
text:{
ns:ns, ;对象或者指令的namespace
assessor:asccessor, ;同一的外部访问器，vm通过修改它改变
key:text, ;指令名称
directive:[directive], ;指令集
setter:function, ;对象设置方法
getter:function, ;对象获取值方法
tpl:#div ;模板字符串
}
},
data:{ ;model的数据层
}
}
~~~
## 3 q-text修改节点innertHTML
~~~
<div id="demo" q-text='text'></div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/qvm.js"></script>
<script>
var vm = qvm.get({
selector:'#demo',
data:{
text:'<h2>hello world!</h2>'
}
});
setTimeout(function(){
vm.text.accessor = '<h2>Fuck world!</h2>';
},4000)
</script>
~~~
## 4 q-class修改节点class
~~~
<style>
.red{
color: red;
}
.green{
color: green;
}
</style>
<div id="demo" q-text='text' q-class="color"></div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/qvm.js"></script>
<script>
var vm =qvm.get({
selector:'#demo',
data:{
text:'<h2>Hello world!</h2>'
color:'red'
}
});
setTimeout(function(){
vm.text.accessor = '<h2>Fuck World!</h2>'
vm.class.accessor = 'green';
},4000);
</script>
~~~
## 5 q-attr修改属性
~~~
<div><a><img id="demo" q-attr-src="img" width="50" height="30"></a></div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/qvm.js"></script>
<script>
var vm = qvm.get({
selector: '#demo',
data:{
img: 'http://9.url.cn/edu/banner/img/505d9c39_760_300.jpg'
}
});
setTimeout(function(){
vm.attr_src.accessor = 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg';
},4000)
</script>
~~~
## 6 q-data修改数据值
~~~
<div id="demo" q-data-title="text"><a><img q-attr-src="img" width="50" height="30"></a></div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/qvm.js"></script>
<script>
var vm = qvm.get({
selector:'#demo',
data:{
text: 'Ps 大神教程',
img: 'http://9.url.cn/edu/banner/img/505d9c39_760_300.jpg'
}
});
setTimeout(function(){
vm.data_title.accessor = '艺术人生';
},4000)
</script>
~~~
## 7 q-repeat嵌套使用
~~~
<style>
.red{
color: red;
}
.green{
color: green;
}
</style>
<div id="demo" q-class="color" q-repeat="list">
<div>
<img q-attr-src="img" width="50" height="30"><span q-text="title" q-class="color"></span>
</div>
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/qvm.js"></script>
<script>
var list =[{
img: 'http://9.url.cn/edu/banner/img/10b0af94_760_300.jpg',
title: '音乐改变世界'
},{
img: 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg',
title: 'PS 大神教程'
},{
img: 'http://9.url.cn/edu/banner/img/505d9c39_760_300.jpg',
title: '艺术人生'
}];
var vm = qvm.get({
selector: '#demo',
data:{
text: '<h2>Hello World!</h2>',
color: 'red',
list: list
}
});
setTimeout(function(){
delete list[2];
list[0].title='music change the world';
list[1].title='PS master learning';
vm.class.accessor = 'green';
vm.repeat.accessor = list;
},4000);
</script>
~~~
## 8 q-对象内部渲染
~~~
<style>
.red{
color: red;
}
.green{
color: green;
}
</style>
<div id="demo" q-repeat="list">
<div>
<span q-class="color" q-text="title"></span>
<span>
<img q-attr-src="img.src" width="50" height="30">
</span>
<div>
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/qvm.js"></script>
<script>
;data属性
var data = {
title: '<h2>Hello World!</h2>',
color: 'red',
img: {
src: 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg'
}
};
;vm
var vm = qvm.get({
selector: '#demo',
data: {
list: data
}
});
;数据层操作
setTimeout(function(){
data.color = 'green';
data.title = '<h2>Fuck World!</h2>';
data.img.src = 'http://9.url.cn/edu/banner/img/10b0af94_760_300.jpg';
vm.repeat.accessor = data;
},4000);
</script>
~~~
## 9 q-on简单事件绑定
~~~
<style>
.red{
color: red;
}
.green{
color: green;
}
</style>
<div id="demo" q-repeat="list" q-on="click|action">
<div>
<span q-class="color" q-text="title"></span>
<span>
<img q-attr-src="img.src" width="50" height="30">
</span>
<div>
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/qvm.js"></script>
<script>
;数据层
var data = {
title: '<h2>点我!</h2>',
color: 'red',
img: {
src: 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg'
}
};
;vm层
var vm = qvm.get({
selector: '#demo',
data: {
list: data
},
action: function(){
alert('点击事件!');
}
});
</script>
~~~
## 10 q-*自定义directive
~~~
<style>
.red{
color: red;
}
.green{
color: green;
}
</style>
<div id="demo" q-repeat="list" q-on="click|action" q-self='selfProcess'>
<div>
<span q-class="color" q-text="title"></span>
<span>
<img q-attr-src="img.src" width="50" height="30">
</span>
<div>
</div>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/qvm.js"></script>
<script>
;数据层
var data = {
title: '<h2>点我!</h2>',
color: 'red',
img: {
src: 'http://9.url.cn/edu/banner/img/880facff_760_300.jpg'
}
};
;vm层
var vm = qvm.get({
selector: '#demo',
data: {
list: data
},
action: function(){
alert('点击事件!');
},
selfProcess: function(key, vm){
console.log(key, vm);
alert('我是一个自定义处理指令!嘿嘿嘿~')
}
});
</script>
~~~
## 11 参考
[qvm_api](https://ouvens.github.io/frontend-javascript/2015/08/20/mvvm-qvm-frame.html)
[qvm完整代码](https://github.com/ouvens/qvm)
- 概述
- 框架结构
- 编译入口(\entries)
- web-compiler.js(web编译)
- web-runtime.js(web运行时)
- web-runtime-wih-compiler.js(web编译运行)
- web-server-renderer.js(web服务器渲染)
- 核心实现 (\core)
- index.js(核心入口)
- config.js(核心配置)
- core\util(核心工具)
- core\observer(双向绑定)
- core\vdom(虚拟DOM)
- core\global-api(核心api)
- core\instance(核心实例)
- 模板编译(\compiler)
- compiler\parser(模板解析)
- events.js(事件解析)
- helper.js(解析助手)
- directives\ref.js(ref指令)
- optimizer.js(解析优化)
- codegen.js(渲染生成)
- index.js(模板编译入口)
- web渲染(\platforms\web)
- compiler(web编译目录)
- runtime(web运行时目录)
- server(web服务器目录)
- util(web工具目录)
- 服务器渲染(\server)
- render-stream.js(流式渲染)
- render.js(服务器渲染函数)
- create-renderer.js(创建渲染接口)
- 框架流程
- Vue初始化
- Vue视图数据绑定
- Vue数据变化刷新
- Vue视图操作刷新
- 框架工具
- 基础工具(\shared)
- 模板编译助手
- 核心实例工具
- Web渲染工具
- 基础原理
- dom
- string
- array
- function
- object
- es6
- 模块(Module)
- 类(Class)
- 函数(箭头)
- 字符串(扩展)
- 代理接口(Proxy)
- 数据绑定基础
- 数据绑定实现
- mvvm简单实现
- mvvm简单使用
- vdom算法
- vdom实现
- vue源码分析资料