## 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源碼分析資料