19_非单文件名组件中VueComponent构造函数&重要的内置关系
摘要：总结： 关于VueComponent: 1.school组件本质上是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。 2.我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象， 即Vue帮
阅读全文
posted @
2021-11-14 10:48
我不想一直当菜鸟
阅读(52)
推荐(0) 编辑
18_非单文件组件
摘要：Vue使用组件的三大步骤： 一、定义组件（创建组件） 二、注册组件 三、使用组件（写组件标签） 一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 区别如下： 1.el不写，w
阅读全文
posted @
2021-11-13 09:44
我不想一直当菜鸟
阅读(64)
推荐(0) 编辑
18_生命周期
摘要：总结： 常用生命周期钩子： 1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始操作】 2.beforeDestroy:清除定时器、绑定自定义事件取消订阅消息等【收尾工作】 关于销毁Vue实例： 1.销毁后借助Vue开发者工具看不到任何信息。 2.销毁后自定义事件会失效
阅读全文
posted @
2021-11-11 18:05
我不想一直当菜鸟
阅读(45)
推荐(0) 编辑
17_自定义指令
摘要：总结： 自定义指令总结： 一、定义语法： （1）局部指令： new Vue({ directives:{指令名，配置对象} }) 或者 new Vue({ directives:{指令名，回调函数} }) （2）全局指令： Vue.directive(指令名，配置对象) 或 Vue.directiv
阅读全文
posted @
2021-11-05 10:09
我不想一直当菜鸟
阅读(67)
推荐(0) 编辑
16_内置指令
摘要：1.v-text指令: 作用：向其所在节点中渲染文本内容 与插值语法的区别： v-text会替换掉节点中的内容，{{xx}}则不会 之前学过： v-bind : 单向绑定解析表达式，可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监
阅读全文
posted @
2021-11-03 22:35
我不想一直当菜鸟
阅读(32)
推荐(0) 编辑
15_过滤器
摘要：总结： 过滤器： 定义：对要显示的数据进行特定格式化后显示（适用于一些简单逻辑处理） 语法： 1.注册过滤器（全局）Vue.filter(name,callback) 或 new Vue{filters:{}} 2.使用过滤器：{{xxx |过滤器名}} 或 v-bind:属性 ="xxx | 过滤
阅读全文
posted @
2021-11-02 15:25
我不想一直当菜鸟
阅读(31)
推荐(0) 编辑
14_收集表单数据
摘要：总结: 收集表单数据： 若：<input type="text"/>,则v-model收集的是value值，用户输入的就是value值 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值 若：<input type="checkbox"/
阅读全文
posted @
2021-11-01 23:12
我不想一直当菜鸟
阅读(100)
推荐(0) 编辑
13_总结Vue数据监测
摘要：总结： Vue监视数据的原理： 1.vue会监视data中所有层次的数据 2.如何监视对象中的数据？ 通过setter实现监视，且要在new Vue时就传入要检测的数据。 （1）对象中后追加的属性，vue默认不做响应式的处理 （2）如需给后添加的属性做响应式，请使用如下API: Vue.set(ta
阅读全文
posted @
2021-10-31 17:40
我不想一直当菜鸟
阅读(186)
推荐(0) 编辑
12_列表渲染
摘要：1.基本列表 总结： v-for指令: 1.用于展示列表数据 2.语法：v-for=("item,index") in xxx" :key="yyy" 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） 遍历数组 遍历对象 遍历字符串 遍历指定次数 1 <!DOCTYPE html>
阅读全文
posted @
2021-10-30 13:11
我不想一直当菜鸟
阅读(38)
推荐(0) 编辑
11_条件渲染
摘要：总结： 条件渲染： 1.v-if 写法： （1）v-if="表达式" （2）v-else-if="表达式" (3）v-else-if="表达式" 适用于：切换频率较低的场景 特点：不展示DOM元素直接被移除 注意：v-if可以和 v-else-if、v-else-if一起使用，但要求结构不能被“打断
阅读全文
posted @
2021-10-29 11:24
我不想一直当菜鸟
阅读(44)
推荐(0) 编辑
10_绑定样式
摘要：总结： 绑定样式： 1.class样式： 写法：class="xxx",xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定。但并不确定用不用 2.style样式
阅读全文
posted @
2021-10-29 10:35
我不想一直当菜鸟
阅读(43)
推荐(0) 编辑
watch对比computed
摘要：总结： computed和watch之间的区别： 1.computed能完成的功能，Watch都可以实现 2.watch能完成的功能，computed不一定能完成，比如：watch可以进行异步操作 两个重要的小原则： 1.所被vue管理的函数，最好写成普通函数，这样this指代的才是vm或组件实例对
阅读全文
posted @
2021-10-28 19:10
我不想一直当菜鸟
阅读(78)
推荐(0) 编辑
09_监视属性
摘要：1.天气案例 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="vi
阅读全文
posted @
2021-10-28 17:05
我不想一直当菜鸟
阅读(41)
推荐(0) 编辑
08_计算属性
摘要：案例姓名拼接三种方法实现 1.通过插值语法实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
阅读全文
posted @
2021-10-27 21:04
我不想一直当菜鸟
阅读(47)
推荐(0) 编辑
07_事件的处理
摘要：1.事件的基本使用 总结： 1.使用v-on：xxx或 @xxx绑定事件，其中xxx是事件名 2.事件的回调需要配置在methods对象中，最终会在vm上 3.methods中的配置函数，不要用箭头函数！否则this就不是vm了 4.methods中的配置函数，都是被Vue所管理的函数，this的指
阅读全文
posted @
2021-10-27 11:04
我不想一直当菜鸟
阅读(41)
推荐(0) 编辑
06_数据代理
摘要：总结： 1.Vue中的数据代理 通过vm对象来代理data对象中属性的操作（读/写） 2.Vue中数据代理的好处：更加方便的操作data中的数据 3.基本原理： 通过Object.defineProperty()把data对象中的所有属性添加到vm上 为每一个添加到vm中的属性，都指定一个gette
阅读全文
posted @
2021-10-26 19:51
我不想一直当菜鸟
阅读(53)
推荐(0) 编辑
05_理解MVVM模型
摘要：总结： MVVM模型： 1.M:模型（Model）:data中是的数据 2.V:视图（View）：模板代码 3.VM:视图模型（ViewModel）:Vue实例 观察发现： 1.data中所有属性，最后都出现在vm身上 2.vm身上的所有属性，及Vue原型上所有属性，在Vue模板中都可以直接使用 整
阅读全文
posted @
2021-10-26 15:09
我不想一直当菜鸟
阅读(52)
推荐(0) 编辑
04_el和data的两种写法
摘要：总结： data与el的两种写法 1.el的两种写法 （1）new Vue时需要配置el属性； （2）先创建Vue实例，然后再通过vm.$mount('#root')指定el的值 2.data的两种写法 (1)对象式 (2)函数式 注意：在运用组件时，data必须使用函数式，否则会报错。 3.一个重
阅读全文
posted @
2021-10-26 13:32
我不想一直当菜鸟
阅读(79)
推荐(0) 编辑
03_数据绑定
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport"
阅读全文
posted @
2021-10-25 18:04
我不想一直当菜鸟
阅读(42)
推荐(0) 编辑
02_Vue模板语法
摘要：Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js的表达式，且可以直接读取到data中的所有属性 2.指令语法： 功能：用于解析标签（包括标签属性、标签体内容、绑定事件....） 举例：v-bind:href ="xxx"或简写为 :href="
阅读全文
posted @
2021-10-25 10:50
我不想一直当菜鸟
阅读(52)
推荐(0) 编辑
