MVVM 和 VUE
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>todo-list-jquery</title>
</head> <body>
<div>
<input type="text" id="txt-title">
<button id="btn-submit">submit</button>
</div>
<ul id="ul-list"></ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var $txtTitle = $('#txt-title');
var $btnSubmit = $('#btn-submit');
var $ulList = $('#ul-list');
$btnSubmit.click(function() {
var title = $txtTitle.val();
if (!title) {
return;
}
var $li = $('<li>' + title + '</li>');
$ulList.append($li);
$txtTitle.val('');
})
</script>
</body> </html>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>todo-list-vue</title>
<script src="./vue-2.5.13.js"></script>
</head> <body>
<div id="app">
<div>
<input v-model="title">
<button v-on:click="add">submit</button>
</div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
title: '',
list: [],
},
methods: {
add: function() {
if (this.title) {
this.list.push(this.title);
this.title = '';
}
}
}
})
</script>
</body> </html>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>vue-demo</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head> <body>
<div id="app">
<p>{{name}}</p>
<p>{{age}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'zs',
age:20
}
})
console.log(vm.age)
</script>
</body> </html>
在控制台修改vm.age 或者vm.name，立刻会被监听渲染出来
Object.defineProperty(obj, prop, descriptor)
例子：
var obj = {};
var _name = 'zs';
Object.defineProperty(obj,'name',{
get:function(){
console.log('get',_name);//监听
return _name;
},
set:function(newVal){
console.log('set',newVal);//监听
_name = newVal;
}
});
var vm = {};
var data = {
name: 'zs',
age: 20
};
var key, value;
for (key in data) {
// 命中闭包，新建一个函数，保证key的独立的作用域
(function(key) {
Object.defineProperty(vm, key, { //data属性代理到vm上
get: function() {
console.log('get', data[key]); //监听
return data[key];
},
set: function(newVal) {
console.log('set', newVal); //监听
data[key] = newVal;
}
})
})(key)
}
var obj = {
name: 'xx',
age:20,
getAddress:function(){
console.log('bj');
}
}
// 不用with
function fn(){
console.log(obj.name);
console.log(obj.age);
obj.getAddress();
}
fn()
// 使用with
function fn1(){
with(obj) {
console.log(name);
console.log(age);
getAddress();
}
}
fn1()
<div id="app">
<p>{{price}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
price:100
}
})
</script>
render函数如下：
// 以下是手写的 render 函数 使用 with ，代码简洁一些
function render() {
with(this) {
return _c(
'div', {
attrs: { "id", "app" }
}, [
_c('p', [_v(_s(price))])
]
)
}
}
// 不用 with 的改写的 render 函数
function render1() {
return vm._c(
'div', {
attrs: { "id", "app" }
}, [
vm._c('p', [_vm.v(vm._s(vm.price))])
]
)
} // 模版中所有信息都包含在了 render 函数中
// this === vm
// price 即 this.price 即vm.price, 即 data 中的 price
// _c 即 this._c , 即 vm._c
看下控制台：
<div id="app">
<div>
<input v-model="title">
<button v-on:click="add">submit</button>
</div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
对应的render函数：（通过在vue-2.5.13.js源码中 console.log（code.render）得出）
with(this){
return _c(
'div',
{attrs:{"id":"app"}},
[_c('div',
[_c(
'input',
{
directives:[
{
name:"model",
rawName:"v-model",
value:(title),
expression:"title"
}
],
domProps:{"value":(title)},
on:{
"input":function($event){
if($event.target.composing)return;
title=$event.target.value
}
}
}
),
_v(" "),
_c(
'button',
{
on:{
"click":add
}
},
[_v("submit")]
)
]),
_v(" "),
_c(
'ul',
_l(
(list),function(item){
return _c(
'li',
[
_v(
_s(item)
)
]
)
}
）
)
]
)
}
vm._update(vnode) {
const prevVnode = vm._vnode;
vm._vnode = vnode;
if (!prevVnode) {
// 初次渲染
vm.$el = vm.__patch__(vm.$el, vnode);
} else {
// re-render
vm.$el = vm.__patch__(prevVnode, vnode);
}
}
function updateComponent() {
// vm._render即上面的render函数，返回vnode
vm._update(vm._render())
}
// updateComponent实现了vdom的patch
// 页面首次渲染执行updateComponent（执行第一个patch）
// data中每次修改属性，执行updateComponent，修改data，set中可以执行updateComponent
附：Vue的生命周期
MVVM 和 VUE的更多相关文章
- MVVM 和 VUE三要素：响应式、模板引擎、渲染
MVVM 和 VUE三要素:响应式.模板引擎.渲染:https://blog.csdn.net/weixin_37644989/article/details/94409430
- 简简单单的Vue1（MVVM与Vue的双向绑定原理）
既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 Vue 在此之前的文章我们讲述了前端开发的工具,语言的知识,接下来我们从头开始学习一个 ...
- MVVM以及vue的双向绑定
原文:https://www.cnblogs.com/onepixel/p/6034307.html MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核 ...
- 【前端知识体系-JS相关】深入理解MVVM和VUE
1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- vue和mvvm的一些小区别
Vue.js 和 MVVM 小细节 MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这 ...
- Vue.js 和 MVVM 的小细节
Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...
- 基于vue实现一个简单的MVVM框架（源码分析）
不知不觉接触前端的时间已经过去半年了,越来越发觉对知识的学习不应该只停留在会用的层面,这在我学jQuery的一段时间后便有这样的体会. 虽然jQuery只是一个JS的代码库,只要会一些JS的基本操作学 ...
- Vue.js 是如何实现 MVVM 的？
目录 框架到底为我们做了什么? 如何理解 MVVM ? 如何实现 MVVM - 以 Vue.js 为例 Vue 如何实现响应式 Vue 如何解析模板 Vue.js 运行机制 手写一个 Vue.js 框 ...
随机推荐
- 简介jsp
1.JSP简介 Java动态网页技术标准(Java Server Pages)是基于Servlet技术以及整个Java体系的Web开发技术是用于动态生成HTML文档的Web页面模板JSP是为了改进Se ...
- Win32 CMD批处理命令
1. win32批处理下,另开一个console执行进程X 使用start [/K|/C],示例: //------------------------------------------------ ...
- 使用tinymce富文本
1.tinymce入门参考 https://www.tiny.cloud/docs/general-configuration-guide/basic-setup/ 2.tinymce安装选项 htt ...
- 仿今日头条横向滚动导航栏--原生js
咳咳!先打一波小广告,在上一篇里忘记了,那啥……我的那个个人博客做好了-->(我的博客)<--.嘿嘿 好嘞,言归正传,说说我们的效果. 其实就是实现横向滑动,进行选择. 原理: 鼠标按下, ...
- 代码的重构（Refactor-Extract）
1.vs中的代码重构快捷方式:Refactor-Extract: 选中两个需要重构的部分完整代码,右击,选中Refactoe-Extract-Extract Method: 该选中的代码会自动形成一个 ...
- LCA（最近公共祖先）——Tarjan
什么是最近公共祖先? 在一棵没有环的树上,每个节点肯定有其父亲节点和祖先节点,而最近公共祖先,就是两个节点在这棵树上深度最大的公共的祖先节点. 换句话说,就是两个点在这棵树上距离最近的公共祖先节点. ...
- Go语言常量
常量是一个简单值的标识符,在程序运行时,不会被修改的量. 常量中的数据类型只能是布尔型.数字型(整数型.浮点型和复数)和字符串型. 常量的定义格式: //const 常量名 类型 值 const id ...
- itext实现合同尾部签章部分自动添加，定位签名
使用的pom <!-- pdf处理 start--> <dependency> <groupId>com.itextpdf</groupId> < ...
- vue 自学笔记(三) 计算属性与侦听器
一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...
- Python模块练习题
练习题: 1.logging模块有几个日志级别? #INFO,WARNING,DEBUG,CRITICAL,ERROR 2.请配置logging模块,使其在屏幕和文件里同时打印以下格式的日志 2017 ...