diff --git "a/\351\203\221\345\277\240\347\246\271/2021.5.27-el\345\261\236\346\200\247\357\274\214template\345\261\236\346\200\247\357\274\214render\345\207\275\346\225\260,$mount \345\222\214 el\347\232\204\345\214\272\345\210\253.md" "b/\351\203\221\345\277\240\347\246\271/2021.5.27-el\345\261\236\346\200\247\357\274\214template\345\261\236\346\200\247\357\274\214render\345\207\275\346\225\260,$mount \345\222\214 el\347\232\204\345\214\272\345\210\253.md" index 19c1ad5fbbb1396a0a5d32e187e58765bf4e6a20..3fc0cd59bff76d7e61e60124afa4e4abf2266698 100644 --- "a/\351\203\221\345\277\240\347\246\271/2021.5.27-el\345\261\236\346\200\247\357\274\214template\345\261\236\346\200\247\357\274\214render\345\207\275\346\225\260,$mount \345\222\214 el\347\232\204\345\214\272\345\210\253.md" +++ "b/\351\203\221\345\277\240\347\246\271/2021.5.27-el\345\261\236\346\200\247\357\274\214template\345\261\236\346\200\247\357\274\214render\345\207\275\346\225\260,$mount \345\222\214 el\347\232\204\345\214\272\345\210\253.md" @@ -68,6 +68,5 @@ let vm = new Vue({ ``` - # 参考 https://blog.csdn.net/weixin_44818614/article/details/106242125 \ No newline at end of file diff --git "a/\351\203\221\345\277\240\347\246\271/2021.5.29-Vue Attribute.md" "b/\351\203\221\345\277\240\347\246\271/2021.5.29-Vue Attribute.md" index ef4e071468531d78ca2db64d110a6e5ed1555365..19bec6527d6bd5c5f1d397a4557f2c572bf27a1b 100644 --- "a/\351\203\221\345\277\240\347\246\271/2021.5.29-Vue Attribute.md" +++ "b/\351\203\221\345\277\240\347\246\271/2021.5.29-Vue Attribute.md" @@ -11,14 +11,16 @@ ... -```` +``` * 用法:
动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
``` ``` + ## v-on * 缩写 --- @
+ ``` ... @@ -28,9 +30,14 @@ ... -```` + +``` * 用法:
就是用于绑定事件的
``` -```` \ No newline at end of file +``` + +## v-model + +Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。 \ No newline at end of file diff --git "a/\351\203\221\345\277\240\347\246\271/2021.5.31--\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\233\221\345\220\254\345\261\236\346\200\247.html" "b/\351\203\221\345\277\240\347\246\271/2021.5.31--\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\233\221\345\220\254\345\261\236\346\200\247.html" index eedcf1105f50ab80bcb4bb50de3c9e41a9fa8df4..6ab3741611ad12e96e6dec0afadba74759dbd728 100644 --- "a/\351\203\221\345\277\240\347\246\271/2021.5.31--\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\233\221\345\220\254\345\261\236\346\200\247.html" +++ "b/\351\203\221\345\277\240\347\246\271/2021.5.31--\350\256\241\347\256\227\345\261\236\346\200\247\345\222\214\347\233\221\345\220\254\345\261\236\346\200\247.html" @@ -16,16 +16,16 @@

Computed reversed message: "{{ reversedMessage }}"

- + - -
-

大家好，我是{{name}}

-
+ +
+

大家好，我是{{name}}

+
diff --git "a/\351\203\221\345\277\240\347\246\271/2021.6.1--Class \344\270\216 Style \347\273\221\345\256\232.md" "b/\351\203\221\345\277\240\347\246\271/2021.6.1--Class \344\270\216 Style \347\273\221\345\256\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..9e510e58f737e254c18d92f0bb15ee0d270cc454 --- /dev/null +++ "b/\351\203\221\345\277\240\347\246\271/2021.6.1--Class \344\270\216 Style \347\273\221\345\256\232.md" @@ -0,0 +1,140 @@ +# 序言 +操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可 +## 简单的绑定 +当ISA为true时class属性atcttc存在。且被绑定的class和普通的class可以共存 +，属性在页面上显示时合并到一个class里。 +``` + + +
+ 中国人民大团结 +
+ + + +``` + +## 绑定一个返回对象的计算属性 +``` +
+ 中国人民大团结 +
+ + + +``` +## 数组语法 +第一种绑定一个数组对象 +``` +
+ 中国人民大团结 +
+ + data: {array:["ui","cttv"]}, +``` +第二种绑定一个数组（但是感觉多此一举） +``` +
+ 中国人民大团结 +
+//传入ab + data: {ui:a,cttv:b }, +``` +## 用在组件上 + + + + +# 绑定内联样式 +v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名： + +``` +
+ 中国人民大团结 + +
+ + + + +``` +当然直接绑定一个样式更好 +``` +
+ 中国人民大团结 +
+ + + + +``` +你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法
+

当然要注意一个小问题

+ +``` +为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute： + +
+ +
+建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。 + +因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。 +``` +# 用在对象上就稍微有点不一样 + +``` +
+ +
  • + {{index}}.{{name}}:{{value}} + +
    • +
    + + + + +``` +## 结果 +``` +1.name:cctv +2.Function:让小朋友看电视动漫打磨时间，让大人看新闻观察世界 +3.item:保有数量14频道 +``` +在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。 +# 数组更新检测 +## 变更方法 +Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括： +``` +push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。 +pop() 方法用于删除并返回数组的最后一个元素。 +shift() 方法用于添加并返回数组的第一个元素。 +unshift()方法用于删除并返回数组的第一个元素。 +splice(index，item，newVaule)删除原数组index开始的item数量成员，并可以在删除的位置添加新成员 +sort():排序函数 +reverse()：倒叙函数 +``` +## 作业 +``` + + +
    + + + + 　 +
  • + {{item.name}}-{{index+1}} +
    • +
    + + + + + + +``` diff --git "a/\351\203\221\345\277\240\347\246\271/2021.6.4-\347\273\221\345\256\232\344\272\213\344\273\266.md" "b/\351\203\221\345\277\240\347\246\271/2021.6.4-\347\273\221\345\256\232\344\272\213\344\273\266.md" new file mode 100644 index 0000000000000000000000000000000000000000..e72191a4bf407a2fdb58462bfb3680a1181bca22 --- /dev/null +++ "b/\351\203\221\345\277\240\347\246\271/2021.6.4-\347\273\221\345\256\232\344\272\213\344\273\266.md" @@ -0,0 +1,132 @@ +# 绑定事件 +## 简单的绑定 + +``` +
    + + + +
    + + + +``` +# 事件对象$event +在DOM事件的回调函数中传入参数$event，可以获取到该事件的事件对象,通过该对象自带的一些属性，我们可以避免过多的冗余代码，细化代码。(还没研究出来怎么用2333) + +## srcElement +其中srcElement就是当前这个标签元素，可以根据此属性来获取当前点击事件的标签元素。
    +（在页面上用this操作好像不行）
    +比如我们可以对获取的元素进行操作，就像原生js那样，如下： +``` +say:function(e){ + console.log(e); + e.srcElement.style.background="red"; +} + +``` +* 除此之外我们还可以对标签自身的属性进行修改，比如说改变button按钮的文字 值，这个时候是使用的$event下面的textContent进行修改。
    +# 事件修饰符 +``` +.stop修饰符是用来阻止冒泡事件的发生的 +.prevent是拦截默认事件，passive是不拦截默认事件。 +注：passive和prevent冲突，不能同时绑定在一个监听器上。 + +.capture是在捕获的过程监听 +我们对Dom的操作作为事件会从最外面的祖先Dom逐步传递到目标Dom（捕获过程），然后再从目标的Dom原路传出去（冒泡过程）。通常我们只监听冒泡过程 + +.self阻止事件传递 +在Vue中，由于事件捕获和冒泡的存在，当点击某个元素时会引发其父元素（父父元素、父父父元素…）的点击事件发生，使得点击某个元素时达不到想要的效果。.self修饰符可以很好的解决这一情况，.self修饰符只有在点击事件绑定的元素与当前被点击元素一致时才触发点击事件。 + +.once点击一次时 + +.passive是不拦截默认事件。 +``` +相对应的是 +``` + + + + +
    + + + + + +
    + + + +
    ...
    + + + +
    ...
    +``` +使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 +* 理解.capture是在捕获的过程监听,还有响应之后冒泡 +``` +
    +
    +
    +
    +
    + 789 +
    + +
    +
    +
    +
    + + +``` +控制台输出0123443210。
    +这是因为 @click.capture="say(4)" 的响应要先在前面父级先捕获，然后逐级往下。中间没有写capture的事件是不会捕获的会直接向下一个子集传递。而到了最后一个子集事件响应控制台输出了父级到子集的01234。响应以后冒泡事件发生从子集往父级。capture存在于否不影响冒泡的从子集往外。这个特性可以用来设计许多机制。 + +## 进阶事件修饰符 +* 绑定联合按键 +``` +
    + + + + +
    + + + +``` +此外还有很多。。。。 +# 引用 +Vue事件修饰符（一）.stop .capture：https://www.jianshu.com/p/a515f95d9cef。
    +vue中的.self修饰符:https://blog.csdn.net/XuM222222/article/details/80276884?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
    \ No newline at end of file diff --git "a/\351\203\221\345\277\240\347\246\271/2021.6.6--\350\241\250\345\215\225\347\273\221\345\256\232.md" "b/\351\203\221\345\277\240\347\246\271/2021.6.6--\350\241\250\345\215\225\347\273\221\345\256\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..82ada7f9b3f5a973a19ccc9151422d22dcc63164 --- /dev/null +++ "b/\351\203\221\345\277\240\347\246\271/2021.6.6--\350\241\250\345\215\225\347\273\221\345\256\232.md" @@ -0,0 +1,177 @@ +# 表单绑定 +

    你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。

    +# v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件： + +* text 和 textarea 元素使用 value property 和 input 事件； +* checkbox 和 radio 使用 checked property 和 change 事件； +* select 字段将 value 作为 prop 并将 change 作为事件。 + + +## 小记 +v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。 +你应该通过 JavaScript 在组件的 data 选项中声明初始值。 + +``` +
    + + +
    + + + + + Multiline message is: +

    {{ message }}

    +
    +