1 Array的方法
主要掌握 forEach() map() filter() every() some() 参数都是function(item,index,arr){}
reduce() concat()
2 defineProperty
Object.defineproperty
3 数据劫持简单版(双向数据绑定简单版)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="inp" name="">
<div id="main">
{{ name }}
{{ name }}
{{ name }}
</div>
<script>
//1 初始化数据
var data ={
name:'penkey'
}
//Object.defineProperty
//2 数据劫持
var val = null;
var str = main.innerHTML;
// console.log(str)
Object.defineProperty(data,"name",{
get:function(){
return val;
},
set:function(newVal){
val = newVal;
complie();
},
})
//初始化劫持数据
data.name = 'penkey';
//初始化文本框内容
inp.value = data.name;
//模板编译
function complie(){
main.innerHTML = str.replace(/\{\{\s*([^\s]+)\s*\}\}/g,function(){
return data[arguments[1]];
})
}
//修改视图文本框
inp.onkeyup = function(){
data.name = this.value;
}
</script>
</body>
</html>
Vue尝鲜
1 声明式渲染 模板中先声明变量然后再把数值复制过去
2 响应式 数据视图同时变
指令:Vue中v-开头的都叫指令
创建Vue实例 虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm
(ViewModel 的缩写) 这个变量名表示 Vue 实例。
$el: 是指Vue活动的范围
$options 是创建vue实例传入的参数
$el :
function Vue(options){
this.$options = options;
//this.$el = options.el;
this.$data = options.data;
function getEl(el)
{
if(typeof el == 'string')
{
if(el !="body" && el!="html")
{
return document.querySelector(el)
}
else{
throw new Error("error");
}
}
else
{
return el;
}
}
this.$el=getEl(options.el)
}