Vue 一（自用）（看的尚硅谷）_如何写一个自用的vue 对象-CSDN博客

本文链接：https://blog.csdn.net/qq_61307529/article/details/120369456

一、初识vue
1.想要让vue工作，就必须创建一个vue实例，且要传入一个配置对象
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的vue语法；
3.root容器里的代码被称为“Vue模板”
4.Vue实例和容器是一一对应的
5.真实开发中只有一个Vue实例，并且配合组件一起使用
6.{{...}}中的...要写js表达式，且...可以自动独到data中的所有属性
7.一旦data中的数据发生改变，页面中用到数据的地方会自动更新

注意区分js表达式和js语句
   js表达式：可以产生一个值
   （1）a
   （2）a+b
   （3）test（1）
   （4）a === b ？"2","4";
   js代码（语句）
   （1）if（）{}
   （2）for（）{}

二、Vue模板（两大类）
1.插值语法：
功能：用于解析标签体内容
写法：{{...}}，...是js表达式，且可以直接读取到data中的所有属性。
2.指令语法：
功能：解析标签（包括：标签属性、标签体内容、绑定时间……）。
举例：v-bind:href="..."或简写为:href="...",...同样写js表达式，且可直接读取到data的所有属性
备注：Vue中有许多指令，且形式都是：v-... 此处只是拿v-bind举例

三、数据绑定（2种）
1.单向绑定（v-bind）：只能从data流向页面
2.双向绑定（v-model）：还可从页面流向data
备注：
1，双向绑定一般应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model ，因为v-model默认收集的就是value值。

四、el和data的两种写法
1.el
(1)new Vue 时配置el的属性
(2)先创建Vue实例，随后再通过vm.$mount('#root')指定el的值
2.data
(1)函数式
(2)对象式
如何选择：目前都可，在学习组件时，data必须使用函数式，否则会报错
3.重要原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。这类函数目前只学习了data

五、MVVM模型
1.M:模型(Model):data中的数据
2.V:视图(View):模板代码
3.VM:视图模型(ViewModel):Vue实例

发现：
1.data中所有的属性，最后都出现在了vm上
2.vm身上所有的属性，及Vue原型上所有的属性，都能在Vue模板中直接使用。

六、数据代理
1.Vue中的数据代理：
通过vm对象来代理data对象中的属性操作(读/写)
2.Vue中数据代理的好处：
更方便操作data中的数据
3.基本原理
通过Object.defineProperty()把data对象的属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。

七、事件处理
1.事件的基本使用
(1)使用v-onclick:...或@...绑定时间，其中...是事件名
(2)事件的回调需要配置在methods对象中，最终会在vm上
(3)methods中配置的函数不要用箭头函数，否则this就是window对象
(4)methods里的函数是目前遇到的第二类由Vue管理的函数（见四、3.重要原则）this指向vm或组件实例对象
(5)@click="demo"和@click="demo($event)"效果相同，但后者可传参
2.事件修饰符
(1)prevent:阻止默认事件（常用）
(2)stop：阻止事件冒泡（常用）
(3)once：事件只触发一次（常用）
(4)capture：使用事件的捕获模式
(5)self：只有event.target是当前事件的时候才能触发事件
(6)passive：默认事件立刻执行，无需等待事件回调执行完毕
注：修饰符可以连用如：@click.prevent.stop=""
3.键盘事件
(1)Vue中常用的按键别名
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab(特殊，由于tab本身自带的功能，使其必须配合keydown使用)
上 => up
下 => down
左 => left
右 => right
(2)Vue未提供别名的按键，可以通过按键原始的key值去绑定，但如果是像CapLock一样的有两个字符组成的key值需要用cap-lock的形式。
(3)系统修饰符（用法特殊）：ctrl、alt、shift、meta（win键）
·配合keyup使用：按下修饰键的同时，再按下其他键，然后释放其他键，随后释放其他其他键，事件才会被触发
·配合keydown则无上述情况
(4)也可以使用keyCode去指定具体按键（不推荐）
(5)Vue.config.keyCodes.自定义键名 =键码，可以去定制按键别名
注：如果想要连按两个按键才触发事件，则可写成：keyup.ctrl.y="" 如果这两个键中有一个是系统修饰符，则必须先按系统修饰符的键再按另一键才有效果，两个都是则没有影响