Vue学习总结_vue学习了什么-CSDN博客

本文链接：https://blog.csdn.net/weixin_46333722/article/details/122652152

Part1

01-Vue做了什么

 1、下载开发版本Vue
 2、Chrome下载开发者调试工具
 3、关闭提示
 修改ico——打开浏览器默认标题前的图标

学了什么

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

02-Vue模板语法

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

03-数据绑定

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

04-el与data的两种写法

 1、el的两种写法
     （1）new Vue时配置el属性
     （2）先创建Vue实例，随后再通过v.@mount('#root')指定el的值
 2、data的两种写法
     （1）对象式
     （2）函数式
     注：学到组件时，data必须使用函数式，否则会报错
 3、一个重要原则
     由Vue管理的函数，一定不要写箭头函数（=>），一旦写了箭头函数，this就不再是Vue实例了

05-MVVM模型

     1、M：模型（model）：data中的数据
     2、V：视图（view）：模板代码
     3、VM：视图模型（ViewModel）：Vue实例
 观察发现：
     1、data中所有的属性，最后都出现在了vm身上
     2、vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用

06-数据代理

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

07-事件处理

 1事件的基本使用：
     1、使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
     2、事件的回调需要配置在methods对象中，最终会在vm上
     3、methods中配置的函数，不要用箭头函数，否则this就不是vm了，是Windows
     4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
     5、@click = "demo" 和 @click = "demo($event)"效果一致，但后者可以传参
 2Vue中的事件修饰符：（可以连着写）
     1、prevent：阻止默认事件（常用）；
     2、stop：阻止事件冒泡（常用）；
     3、once：事件只触发一次（常用）；
     4、capture：使用事件的捕获模式；
     5、self：只有event.target是当前操作的元素时才触发事件
     6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕
 3键盘事件
 	1、Vue中常用的按键别名：
 		回车：enter
 		删除：delete （捕获“删除”和“退格”键）
 		退出：esc
 		空格：space
 		换行：tab (特殊，配合keydown 使用)
 		上：up
 		下：down
 		左：left
 		右：right
 	2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
 	3、系统修饰键（用法特殊）：Ctrl、alt、shift、meta
 		（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
 		（2）配合keydown使用：正常触发事件
 	4、也可以使用keyCode去指定具体的按键（不推荐）
 	5、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

08-计算属性

     1、定义：要用的属性不存在，要通过已有属性计算得来
     2、原理：底层借助了Object.defineproperty方法提供的getter和setter
     3、get函数什么时候执行？
         （1）初次读取时会执行一次
         （2）当依赖的数据发生改变时会被再次调用
     4、优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便（调试时console会显示computed）
     5、备注：
         （1）计算属性最终会出现在vm上，直接读取使用即可(用fullName就可调用计算的值，不需要fullName.get())
         （2）如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
 		（3）简写：只考虑读取，不考虑修改时用简写形式

09-监视属性

 监视属性watch：
     1、当被监视的属性变化时，回调函数(如：handler())自动调用，进行相关操作
     2、监视的属性必须存在，才能进行监视！！
     3、监视的两种写法：
         （1）new Vue时传入watch配置  （一开始就知道要监视谁）
         （2）通过vm.$watch监视      （开始时没有配置监视，后期有监视需求时适用）
 深度监视：
   （1）Vue中的watch默认不监测对象内部值的改变（一层）
   （2）配置deep:true可以监测对象内部值的改变（两层）
 备注：
   （1）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
   （2）使用watch时根据数据的具体结构，决定是否采用深度监视
   （3）简写：不需要immediate,deep，只需要handler时可以用简写
 computed和watch之间的区别：
     1、computed能完成的功能，watch都可以完成
     2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
 两个重要的小原则：
     1、所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象
     2、所有不被Vue管理的函数（定时器的回调函数，Ajax的回调函数，promise的回调函数等），最好写成箭头函数，
       这样this的指向才是vm 或 组件实例对象

10-绑定样式

 绑定样式：
     1、class样式
         写法： :class=“xxx”  xxx可以是字符串、对象、数组
             字符串写法适用于：类名不确定，要动态获取
             对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
             数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
     2、style样式
         :style="{fontSize:xxx}" 其中xxx是动态值
         :style=“[a,b]” 其中a、b是样式对象