MVVM模型：
1. M：模型(Model):data中的数据 【数据层，数据可能是我们固定的死数据（写在script里的自定义对象等），更多的是来自我们服务器，从网络上请求下来的数据】
2. V：视图(View):模板代码 【视图层，在前端开发中通常是DOM层，主要给用户展示各种信息】
3. VM：视图模型(ViewModel):Vue实例 【视图模型层，是view&model沟通的桥梁】
总结：可以理解为数据层M中的数据通过视图模型层VM监听绑定,最终在视图层V中展示出来
模板语法：
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容
写法：{
{xxx}}，xxx是js表达式，表达式一般为一个结果，且可以直接读取到data中的所有属性
2.指令语法：
功能：用于解析标签（包括：标签属性，标签体内容，绑定事件……）
写法：v-bind:href="xxx"或简写为 :href="xxx",xxx同样要写js表达式
数据绑定：
1. 单向绑定(v-bind)：数据只能从data流向页面
2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data
2.1 双向绑定一般都应用在表单类元素上(如：input、select等)
2.2 v-model:value 可以简写为v-model，因为v-model默认收集的就是value值
模拟简单的数据双向绑定：
<body>
<input type="text"> 同步： <span></span>
<script>
const input = document.querySelector('input');
const span = document.querySelector('span');
let obj = {};
let data = {
name: 'yy',
}
Object.defineProperty(obj, 'text', {
get() {
return data.name; //数据代理，代理data中的name值
},
set(val) {
input.value = span.innerHTML = val;
}
});
input.value = span.innerHTML = obj.text;
input.addEventListener('input', function(e) {
obj.text = e.target.value;
});
</script>
</body>
收集表单数据：
若：type为text，则v-model收集的是value值，用户输入的就是value值
若：type为radio，则v-model收集的是value值，且要给标签配置value值
若：type为checkbox
1.没有配置input的value属性，那么收集的就是checked(勾选or未勾选，是布尔值)
2.配置input的value属性：
(1)v-model的初始值是非数组，那么收集的就是checked(勾选or未勾选，是布尔值)
(2)v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
Vue中的数据代理：
1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处：更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作(读/写)
data与el的2种写法：
1.el的两种写法：
(1)new Vue时候配置el属性
(2)先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
2.data的两种写法：
(1)对象式
(2)函数式
备注：学到组件时，data必须使用函数式，否则会报错
事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
2.事件的回调需要配置在methods对象中，最终会在vm上
3.methods中配置的函数，不要用箭头函数！否则this就不是vm了
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
5.@click="demo" 和 @click="demo($event)"效果一致，但是后者可以传参
Vue中的事件修饰符：
1.prevent：阻止默认事件(常用)
<a href="https://baidu.com" @click.prevent="showInfo">点我提示信息</a>
2.stop:阻止事件冒泡(常用)
//阻止事件冒泡并只能点击一次
<div class="demo1" @click.once="showInfo">
<!-- 修饰符可以连写 -->
<button @click.stop.once="showInfo">点我</button>
</div>
showInfo() {
alert('msg');
}
3.once:事件只触发一次(常用)
<button @click.once="showInfo">1次</button>
4.capture:使用事件的捕获模式
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
showMsg(msg) {
console.log(msg);
}
5.self:只有event.target是当前操作的元素才是触发事件
<!-- 也能用来阻止冒泡 -->
<div class="demo2" @click.self="showInfo">
<button @click="showInfo">123</button>
</div>
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕
（例：滚轮事件
@wheel.passive="demo"
demo() {
for (let i = 0; i < 20000; i++) {
console.log('i');
}
在输出很多数据时，滚轮事件将先于数据输出前执行）
键盘事件：
1.Vue中常用的按键别名ÿ
最低0.47元/天 解锁文章
235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
