# vue-easy **Repository Path**: noviceLuo/vue-easy ## Basic Information - **Project Name**: vue-easy - **Description**: vue单功能学习 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-11-07 - **Last Updated**: 2021-11-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # vue-easy ## 介绍 vue单功能学习 ## 问题 ``` 学习Lodash高效js库 JSX渲染函数 如何编写,什么时候使用？ 函数式组件如何使用？ 如何使用Vuex-model模块？ 如何使用proviue/inject? 了解watch-API 自定义事件 未看懂？ ``` ## 杂项 >1.单元测试 ``` 使用场景 1.通用性组件 2.工具类 ``` >2.key ``` 当元素绑定一个的key被修改后对应标签也会被重新销毁并挂载 ``` ## 单词 ``` ViewModel component template beforeCreate created beforeMount mounted 挂载完成 beforeUpdate 准备更新 =>() updated 更新完毕 beforeDestroy 准备销毁 =>(解除绑定、销毁子组件及事件监听器) destroed 销毁完毕 data prop computed 计算属性 watch 监听属性 methods 方法 ------------------------ 数组变异方法： push pop shift unshift splice sort reverse 非变异 filter concat slice ------------------------ modifier 修饰符 render Mustache 双括号 kebab-case 短横线分隔命名 PascalCase 首字母大写命名 .$forceUpdate 强制更新 vm.$forceUpdate() ``` ## 修饰符 ``` 事件 .prevent 阻止默认行为(跳转、重载页面) event.preventDefault() .stop 阻止事件继续传播 .capture 添加事件监听器时使用事件捕获模式(即内部元素触发的事件先在此处理，然后才交由内部元素进行处理) .self 只有当 event.target 是当前元素自身时触发处理函数 .once 将只会触发一次 .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 `onScroll` 完成。这其中包含 `event.preventDefault()` 的情况;(不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。) .native 自定义组件直接监听一个原生事件 ------------------------------- 键盘 .enter .tab .delete .esc .space .up .down .left .right ``` ### 2019 11-07 日志(教程->模板语法) >1.Vue.js是什么 ``` vue是一套用于构建用户界面的渐进式框架。 ``` >2.vue-指令(只能写表达式,不能写业务逻辑) ``` v-once 渲染一次Dom v-html 可解析html元素 v-text 挂载文本元素 {{}} 挂载文本元素 v-model 双向数据绑定 v-if 条件判断,不满足时销毁dom v-else-if v-else v-show display: none v-bind 绑定值,简写: v-on 绑定事件 @ v-for 循环数组、对象(value, key, index) ``` >3.数据渲染机制 ``` 当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的【响应式系统】中。当这些属性的值发生改变时，视图视图将会产生“响应”，即匹配更新为新的值。 当数据发生改变时,视图会进行重新渲染。值得注意的是只有当实例被创建时就已经存在于【data】中的属性才是响应式的。也就是说如果你添加一个新的属性，将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。 Object.freeze()会阻止修改现有的属性，也意味着响应系统无法在跟踪变化。 ``` >4.动态参数-(指令) ``` 对动态参数的值的约束: 动态参数预期会求出一个字符串,异常情况下值为null。这个特殊的null值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。 对动态参数表达式的约束: -> 【编译警告】 某些字符: 空格和引号,放在HTML attrbute名里面是 无效的。 在DOM中使用模板时,还需要避免使用大写字符来命名键名,因为浏览器会把attribute名全部强制转为小写 -> 在DOM中使用模块时会被转为 v-bind:[someattr]。除非在实例中有一个名为“someattr”的 property，否则代码不会工作。 ``` >5.v-model ``` 在input中 v-model 是 :value=val 和 @input=enevt 的简写 在checkbox和radio使用 checked属性和change事件 在select 将value作为prop,并将change作为事件 自定义v-model(09节4.50s未理解) ``` ### 2019 11-8日志(教程-组件基础) >1.计算属性和监听器 ``` 计算属性： 计算属性是基于它们的【响应式依赖】进行缓存的，只有在相关响应式依赖发生改变时他们才会重新求值。 每当触发重新渲染时，调用才会再次执行函数。 computed: { // 只触发一次 now: function () { return Date.now() } } 计算属性默认只有getter,可以添加setter属性 watch：(https://cn.vuejs.org/v2/api/#vm-watch) 使用watch选项允许我们执行异步操作(如访问API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。 ``` >2.Style绑定 ``` 1. :style绑定属性系统会内置添加前缀 2. 自定义组件定义属性时会覆盖最外层元素的属性,style、class会追加。如果最外层元素属性不想被替换和覆盖可以在自定义组件添加(inheritAttrs: false) ``` >3.条件渲染 ``` 当v-if和v-for一起使用时,v-for比v-if优先级更高。 ``` >4.事件处理 ``` 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法 v-on:click="enevt($event)" ``` >5.自定义组件的v-model ``` 第一步：指定 prop(值),指定event(事件) 第二步: 通过props接收值 第三步：元素触发事件 $emit('指定事件') ``` >6.解析DOM模板时注意事项 ``` 有些HTML元素,如ul、ol、table、select，对于哪些元素可以出现在其内部是有严格限制的。而有些元素如li、tr、option，只能出现在它某些特定的元素内部。
``` >7.单项数据流 ``` 每次父组件发生更新时，子组件中所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。 props: ['name], data() { return { newName: this.name // 方法一: 另存 } }, computed: { lowerCaseName() { return this.name.toLowerCase() // 方法二: 需要进行转换值 } } ``` ### 2019 11-11日志(教程-动态组件 & 异步组件) >1.Prop ``` 1.禁用特性继承 如果你不希望组件的根元素继承特性，你可以在组件的选项中设置inheritAttrs: false。 Vue.component('my-component', { inheritAttrs: false, // ... }) 这尤其适合配合实例的 $attrs 属性使用，该属性包含了传递给一个组件的特性名和特性值。 有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些特性会【被赋予哪个元素】。在撰写基础组件的时候是常会用到的： Vue.component('base-input', { inheritAttrs: false, props: ['label', 'value'], template: ` ` }) // 把值赋给lable->包裹的 input ``` >2.自定义事件 ``` 1.子组件向父组件传递自定义事件 this.$emit('myEvent') 2.将原生事件绑定到组件 3.属性$listeners属性,作用在组件上的所有监听器(未理解) 4.(.sync)修饰符 ``` >3.动态组件 & 异步组件 ``` ``` ### 2019 11-18日志(教程-过渡&&动画) >1.访问根实例($root) ``` 1.内联模板 当inline-tamplate这个特殊的特性出现在一个子组件上时,这个组件将会使用其里面的内容作为模板,而不是将其作为分发的内容。这使得模块的撰写工作更加灵活。

desc

 2.X-Template 3.强制更新 $forceUpdate ``` >2.过渡 & 动画 ``` 1.vue提供了transition封装组件,在下列情况中,可以给任何元素和组件添加进入/离开过渡 条件渲染(使用v-if) 条件展示(使用v-show) 动态组件 组件根节点 2.过渡的类名 在进入/离开的过渡中，会有6个class切换 v-enter: 定义进入过渡的开始状态。在元素被《插入之前生效》,在元素被《插入之后的下一帧移除》。 v-enter-active:定义进入过渡生效时的状态。在《整个进入过渡》的阶段中应用,在元素被插入之前生效，在过渡/动画《完成之后》移除。这个类可以用来定义进入过渡的过程时间,延迟和曲线函数。 v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧(与此同时v-enter被移除)，在过渡/动画完成之后移除。 v-leave: 定义离开过渡的开始状态。 v-leave-active:定义离开过渡生效的状态。 v-leave-to: 定义离开过渡的结束状态。 类名定义：《name》 默认前缀 v- 自定义前缀: 解析为 my-name-enter 3.自定义过渡类名(可以和第三方CSS动画库结合使用Animate.css) enter-class enter-active-class enter-to-class leave-class leave-active-class leave-to-class 4.同时使用过渡和动画 type特性设置 animation 或 transition 5.显性的过渡持续时间 定制一个显性的过渡持续时间 duration 定制进入和移出的持续时间 6.JavaScript钩子 @before-enter @enter @after-enter @enter-cancelled @before-leave @leave @after-leave @leave-cancelled 当只用javascript过渡的时候,在enter 和 leave中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。 推荐对于仅使用javascript过渡的元素添加 v-bind:css="false"，vue会跳过css检测,这也可以避免过渡过程中css的影响。 7.初始渲染的过渡 可通过appear特性设置节点在初始渲染的过渡 自定义类名 appear appear-class appear-to-class appear-active-class 自定义javascript钩子 @before-apper @appear @after @appear-cancelled 8.过渡模式 mode: in-out: 新元素先进行过渡,完成之后当前元素过渡离开。 out-in: 当前元素先进行过渡,完成之后新元素过渡进入。 9.过渡列表 不同于tansition，它会以一个真实元素呈现,默认为一个 span 。你可以通过tag特性更换为其它元素。 过渡模式不可用,因为我们不在互相切换特有的元素。 内部元素总是需要提供唯一为key属性值 css过渡的类将会应用在内部元素中,而不是这个组/容器本身。 ``` ### 2019 11-19日志(教程-混入~) >1.混入 ``` 1.基础 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行合并。发生冲突时以组件数据优先。 同名钩子函数将合并为一个数组，因此都将被调用。《混入对象的钩子》将在组件自身钩子《之前调用》。 值为对象的选项，例如:methods、components和directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。 2.全局混入 注意: 一旦使用全局混入，它将影响每一个之后创建的Vue实例。 Vue.mixin({ }) ``` >2.自定义指令 ``` 1.注册一个全局自定义指令 Vue.directive('focus', { // 当被绑定的元素插入到DOM中时 inserted: function (el) { // 聚焦元素 el.focus() } }) 2.注册局部指令 directives: { focus: { inserted: function (el) { el.focus() } } } 3.钩子函数 网址(https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0) 4.钩子函数参数 网址(https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0) 除了el之外，其它参数都应该是(只读)的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的dataset来进行。 5.动态指令参数 网址(https://cn.vuejs.org/v2/guide/custom-directive.html#%E5%8A%A8%E6%80%81%E6%8C%87%E4%BB%A4%E5%8F%82%E6%95%B0) 6.函数简写 在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写: Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value }) 7.对象字面量 如果指令需要多个值，可以传入一个javascript对象字面量。记住，指令函数能够接受所有合法的javascript表达式。
Vue.directive('dome', function (el, binding) { console.log(binding.value.color) console.log(binding.value.text) }) ``` >3.渲染函数 & JSX (未理解) ``` 1.基础 网址(https://cn.vuejs.org/v2/guide/render-function.html#%E5%9F%BA%E7%A1%80) 2.虚拟DOM return createElement('h1', this.title) ```