1.什么是VUE：
VUE是渐进式的基于MVVM设计模式的纯前的JS框架
渐进式：可以在项目中逐步使用VUE的功能，也可以和其他技术混搭。
vs 全家桶：要使用，就必须使用全套所有技术。且不能和其他技术混搭。
框架：原生DOM vs JQuery函数库 vs VUE框架
dom纯手工，更复杂
jquery写更少的代码，完成更多的事
框架：彻底简化了步骤，无需人工干预
VUE只适合于数据操作为主的项目
2.MVVM设计模式
传统前端划分：
HTML：专门保存网页内容和结构的文档
CSS：专门定义网页样式的文档
JS：为网页添加交互行为
问题：不会动态变化，一切交互都只能靠JS添加，导致JS中大量重复的代码和重复的步骤
MVVM模式：
1.界面View：增强版的HTML和CSS，可根据数据自动变化
2.模型数据Model：集中存储一个页面内所有变化的数据
3.视图模型ViewModel：将View界面和Model模型数据包裹起来，统一管理，自动同步修改。
ViewModel中（new Vue()对象）
包含两大子系统：
1.响应系统：将模型数据包裹起来，为每个模型变量自动添加get()和set()保镖
今后只要修改任何模型变量，都自动经过set(),set()中会触发通知：xx变量变为xx新值
2.虚拟DOM树
什么是：创建new Vue时，通过扫面完整DOM树，仅提取可能变化的元素和属性，组成的一棵极精简的DOM树。
优点：1.查找元素快
2.封装了重复性的增删改查DOM操作
虚拟DOM树接到通知，快速找到受影响的元素。
3.绑定语法：学名 插值语法
什么是：让HTML可以自动找到程序中的变量的特殊语法
如何：{{变量或表达式}}
1.先找页面中所有可能发生变化的地方有几处
2.再在模型数据中定义相同数量的变量：
new Vue({
el:"#"
})
data:{
变量名：值,
…:…,
}
强调：HTML中有几处变化，data对象中就要有几个变量与之对应。
{{变量或表达式}}
4.指令
什么是：为HTML添加更多新功能的Vue预置的自定义属性
如何：13种
1.v-bind属性：
v-bind属性专门动态绑定元素的属性值
为什么：要绑定属性值，不能用{{}},只能用v-bind或：简写
何时：属性值需要根据变量动态变化时
<img :src="p,25<100"?'img/1.png':'img/2.png'>
2.控制元素的显示隐藏
1）控制一个元素的显示隐藏
<ANY v-if=“判断条件”
只要条件满足，就显示文件，不满足，就隐藏元素
<ANY v-show=“判断条件”
2）控制多个元素，多选一显示
<ANY v-if=“判断条件”
和v-else-if v-else配合使用
v-show v-if的差别
v-show用display:none控制显示隐藏
v-if用删除结点的方式
3.根据数组反复生成多个相同结构的HTML元素：
如何：
1.data中必须先定义一个可遍历的数组
2.在HTML中使用v-for遍历数组，反复生成多个相同结构的元素
语法：
<要反复生成的元素 v-for ="(elem,i) of 数组" :key=“i”
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
<div id="app">
<ul>
<li v-for = "(elem,i) of tasks" :key="i">{{i+1}}-{{elem}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
tasks:["吃饭","睡觉","打亮亮"]
}
})
</script>
</body>
4.事件绑定：
v-on:事件名=“处理函数”
可简写为
@事件名=“处理函数”
强调：
1.处理函数必须定义在methods中
new Vue({
el:"#app',
data:{...},
methods:{
处理函数(){
this.data中变量
}
}
})
2.其实可以传参：@事件名=“处理函数（实参值)”
3.也可以用事件对象e：用法和DOM中完全一样
获得e:methods:{
事件处理函数(e){…}
}
获得目标元素，实现事件委托：e.target
取消冒泡：e.stopPropagation()
阻止默认行为：e.default();
键盘事件中获得键盘号：e.keyCode
获得鼠标坐标位置：e.screenX,e.screenY
e.clientX,e.clientY
javascript中的e是什么意思？
e 代表事件（event）对象，即所谓的事件驱动源，包含了许多属性和方法。下面以鼠标点击事件为例，作一个测试：
<body>
<div id="app" @click="change">
<button>-</button>
<span>{{n}}</span>
<button>+</button>
</div>
<script>
new Vue({
el:"#app",
data:{
n:1
},
methods:{
change(e){
var tar = e.target;
if(tar.nodeName==="BUTTON"){
this.n += tar.innerHTML == "+"?1:-1;
}
}
}
})
</script>
</body>
5.避免用户短暂看到{{}}
问题：如果new Vue加载慢，则可能短暂看到{{}}
解决：v-cloak可以让元素加载之前暂时隐藏。
使用：v-cloak空有属性名，没有配套的样式，只能自己手写
<div id="app">
<h1 v-cloak >{{name}}</h1>
</div>
<style>
[v-cloak]{display: none;}
</style>
<script>
setInterval(function(){
new Vue({
el:"#app",
data:{
name:"dingding"
},
})
},2000)
</script>
除了用v-cloak，还可以用v-text绑定元素
如何：<ANY v-text="js模板字符串语法，用${变量}动态生成内容"
<h1 v-text =" `姓名：${uname}`"></h1>
<h2 v-text="`性别：${sex==1?'男':'女'}`"></h2>
6.绑定HTML片段
问题：使用{{}}绑定HTML片阶段，页面会显示所有HTML代码
解决：只要绑定HTML片段，使用v-html
如何：
7.只在页面加载之初，绑定一次。之后及时数据变化，也不反复更改页面：v-once
强调：v-once没有任何属性值，写在元素中，就起作用
原理：在构建虚拟DOM树时，会扫描到v-once元素的内容。
首次绑定后，v-once的元素会从虚拟DOM树中一处。从此，再发生变量改变时，不会再修改v-once的元素
8.万一内容的正文中，有{{}}，但是不是用于绑定的，会出错。
解决：v-pre 可阻止内容中的{{}}被编译，而是让{{}}原样显示。
总结：
1.如果元素内容要变化：用{{变量或表达式}}绑定
2.如果元素的属性值要变化：用 :属性名=“变量或表达式"绑定
3.一个元素控制显示隐藏：v-show=“条件”
4.多个元素选其一显示：v-if v-else-if v-else
5.反复生成多个相同结构的元素时：
v-for=”(elem,i) of 数组" :key=“i”
6.只要绑定事件处理函数都用：@事件名=“处理函数”
7.只要不希望用户短暂看到{{}}语法：
v-cloak或v-text
8.只要绑定HTML片段：v-html
9.只要希望只在页面加载之初绑定一次，之后不再变化，就用v-once
10.v-pre 可阻止内容中的{{}}被编译，而是让{{}}原样显示。
3：00
created()就是Vue中的window.load。
都是系统预先定义好的固定函数，在事件发生时自动调用。onload是整个页面加载后才执行。create()是Vue对象加载后就自动执行。
arr.forEach(function(){...})
arr.map(sunction(){})
setInterval(function(){})
setTimeout(function(){})
$ajax({
...
success:function(){...}
}).then(function(){
...
})
this->window 所有回调函数，真正被调用时，前边是没有任何"对象."前缀
所以，通常如果希望回调函数中的this不指window，而是跟外部的this保持一致，都要改为箭头函数。
|