第一天 基础
1、基础
### 数组的变异（括号中的能改变原数组）
- 操作数组的方法（pop push unshift shift splice recerse sort）
indexOf lastIndexOf concat slice
## forEach filter（过滤） map（映射）some every reduce （includes finding es6）
## node 版本>8.5 webstorm(vscode , sublim) >2017版本
## 框架和库
- 框架 vue 拥有完成的解决方案 我们写好 人家调用我
- 库 jQuery underscore zepto animate.css 我们调用他
## 渐进式 （渐进增强）
- vue全家桶 vuejs + vue-route + vuex + axios
- 通过组合 完成一个完整的框架
## MVC（backbone）
- model 数据
- view 视图
- controller 控制器
## MVVM （angular ，vue ） 双向的
- model 数据
- view 视图
- viewModel 视图模型
## Object。defineProperty（es5）的没有替代方案
- 不支持IE8<=
## 安装 vue
- cdn的方式
- npm安装 node package manager
npm init -y
初始化会产生一个package.json的文件 这个文件用来描述项目的依赖，不能有大写
特殊字符 中文，而且不要和安装的包的名字相同
这个文件不能写注释
1.arr.js
console.log("hello")
let arr = [1,2,3,4,5];
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
}
console.log("------------------------")
arr.forEach(function (item) {
console.log(item)
})
for(let key in arr){
console.log(key);
}
for(let val of arr){
console.log(val);
}
let obj = {school:'zfpx',age : 8};
for(let val of Object.keys(obj)){
console.log(val);
}
for (let val of Object.keys(obj)){
console.log(obj[val]);
}
let newAry = [1,2,3.4,5].filter(function (item) {
1.helloWord.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
</head>
<body>
<div id="app">
<!-- moustache 小胡子语法 表达式 可以放赋值 取值 三 元-->
{{ msg }}<br>
{{ msg === 'hello,world'?1:0}}
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data:{
msg : 'hello,world'
}
});
</script>
</body>
</html>
2.arrow-fn.js
let a = b => c=>c+b ;
2.direvtive.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mvvm</title>
</head>
<body>
<div id="app">
{{ msg }}
<!-- 表单元素 input CheckBox textarea radio select-->
<!-- vue 的 “指令” directive 只是dom上的行间属性，vue给这类属性赋予一定的意义 来
实现特殊的功能 所有的指令都以 v-开头
value 属性默认情况下回被 vue 忽略掉 selected checked 都没有意义-->
<!-- 数据影响视图 v-model 会将msg的值赋予输入框，输入框的值改变了会影响数据-->
<input type="text" v-model="msg" />
<!--Object。defineProperty ES5-->
<!--v-text === {{}} 防止{{}}出现在页面上-->
<!--下面的div中不能放东西-->
<div v-text="msg"></div>
<!-- v-once 只绑定一次 当数据再次发生变化 也不导致页面刷新-->
<div v-once>
{{msg}} {{msg}}
</div>
<!-- v-heml 把HTML字符串当做HTML渲染，一定是可以信任的HTML-->
<div v-html="p">{{p}}</div>
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data:{
msg:'hello,world',
p:"hello
>"
}
});
</script>
</body>
</html>
2.mvvm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mvvm</title>
</head>
<body>
<div id="app">
{{ msg }}
<!-- 表单元素 input CheckBox textarea radio select-->
<!-- vue 的 “指令” directive 只是dom上的行间属性，vue给这类属性赋予一定的意义 来
实现特殊的功能 所有的指令都以 v-开头
value 属性默认情况下回被 vue 忽略掉 selected checked 都没有意义-->
<!-- 数据影响视图 v-model 会将msg的值赋予输入框，输入框的值改变了会影响数据-->
<input type="text" v-model="msg" />
<!--Object。defineProperty ES5-->
<!--v-text === {{}} 防止{{}}出现在页面上-->
<!--下面的div中不能放东西-->
<div v-text="msg"></div>
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data:{
msg:'hello,world'
}
});
</script>
</body>
</html>
3.defineProperty.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>defineProperty</title>
</head>
<body>
<input type="text" id="input">
<script type="text/javascript">
let obj ={};
let temp = {};
Object.defineProperty(obj, 'name', {
get(){
return temp["name"]
},
set(val){
temp["name"] = val;
input.value = val ;
}
});
input.value = obj.name;
input.addEventListener('input',function () {
obj.name = this.value;
})
</script>
</body>
</html>
4.reactivity.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reactivty</title>
</head>
<body>
<div id="app">
{{a.school}}
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el:'#app',
data:{
a: {}
}
});
vm.a = {school : 'fengfanli' ,age: '8' , address : 'xxx'};
</script>
</body>
</html>
5.reactivity.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reactivty</title>
</head>
<body>
<div id="app">
{{a.school}}
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el:'#app',
data:{
arr : [1,2,3,4,5],
}
});
vm.arr = vm.arr.map(item=>item*=3);
</script>
</body>
</html>
6.v-for.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<div id="app">
<!-- 要循环谁 就在谁的身上增加 v-for 属性-->
<!-- 默认是value of 数组 / (value,index) of 数组-->
<!-- 我感觉第一个是 对象，第二个就是索引-->
<ul>
<li v-for = "(fruit,index) of fruits"> {{fruit.name}} {{index+1}}
<ul>
<li v-for="(c,childindex) in fruit.color">{{index+1}}.{{childindex}}{{c}}</li>
</ul>
</li>
</ul>
<div v-for="c in 'aaa'">{{c}} </div>
<div v-for="c in 5">{{c}} </div>
<div v-for="(value,key,index) in obj">{{key}}:{{value}}:{{index}} </div>
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data: {
obj : {name : 'feng', age :9 ,address :'xxx'},
fruits : [
{name : '香蕉',color:['green','yellow']},
{name : '苹果',color:['red','green','yellow']},
{name : '西瓜',color:['pink']}
]
}
});
</script>
</body>
</html>
7.event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>event</title>
</head>
<body>
<!-- v-on === @ -->
<!--传参 可以加 括号， 不传参 就不要加-->
<!-- 如果不传递参数， 则不要写括号会自动传入 **事件源** ，如果写括号了要手动传入 $event 属性-->
<div @mousedown="fun($event,1)" id="app" > 请点我呀</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el:'#app',
methods:{
fun(event,a){console.log(event)},
},
data:{
a :1,
}
})
</script>
</body>
</html>
8.todo.html
