diff --git "a/\350\260\242\345\233\275\345\271\277/21-05-09.md" "b/\350\260\242\345\233\275\345\271\277/21-05-09.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\350\260\242\345\233\275\345\271\277/21-05-11.md" "b/\350\260\242\345\233\275\345\271\277/21-05-11.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\350\260\242\345\233\275\345\271\277/21-05-12.md" "b/\350\260\242\345\233\275\345\271\277/21-05-12.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\350\260\242\345\233\275\345\271\277/21-05-25.md" "b/\350\260\242\345\233\275\345\271\277/21-05-25.md" index b02452e47ad4ffa795f4c6162eda5d008887ad1d..43c670769be28f24e22909d916a4ca1efffbe5e9 100644 --- "a/\350\260\242\345\233\275\345\271\277/21-05-25.md" +++ "b/\350\260\242\345\233\275\345\271\277/21-05-25.md" @@ -1,5 +1,7 @@ -# Vue入门 - +# Vue入门 +> **是什么：** 是一套构建用户界面的 渐进式的JavaScript框架（渐进式、即可以由浅入深的学习和使用）；它是采用从底层向上增量开发的实际； +> **可以用来干什么：** +> **怎么用：** ### Vue安装（也可直接引用） - 下载版本及相应地址： diff --git "a/\350\260\242\345\233\275\345\271\277/21-06-01.md" "b/\350\260\242\345\233\275\345\271\277/21-06-01.md" new file mode 100644 index 0000000000000000000000000000000000000000..c1d35b6559ee9dfa8118914947e223802dda59af --- /dev/null +++ "b/\350\260\242\345\233\275\345\271\277/21-06-01.md" @@ -0,0 +1,111 @@ +### Class 与 Style 绑定 +✨ 对象语法 +``` + + + + + + + Class 与 Style 绑定 + + + + + +
+ 想要了解自然会去了解 +
+ + + + +``` + + +### 数组语法 +``` + + + + + + + Class 与 Style 绑定 + + + + + +
+ 想要了解自然会去了解 +
+ + + + +``` \ No newline at end of file diff --git "a/\350\260\242\345\233\275\345\271\277/21-06-02.md" "b/\350\260\242\345\233\275\345\271\277/21-06-02.md" new file mode 100644 index 0000000000000000000000000000000000000000..dbdea63cfebf36e7dd5dad0acdf4fe72048b3a30 --- /dev/null +++ "b/\350\260\242\345\233\275\345\271\277/21-06-02.md" @@ -0,0 +1,164 @@ +### 列表渲染 +✨ 列表渲染主要是把数组的数据渲染到指定的地方，简化代码工作量。 + +### 在组件上使用 v-for +① 用 v-for 来遍历一个对象的 property。 +``` + + + + + + 列表渲染t + + +
+ + +
+ + + + + +``` + + +② v-for 指令可以绑定数组的数据来渲染一个项目列表： +``` + + + + + + + Document + + + +
+
    +
  1. + {{tois.text}} + +
    2. +
+
+ + + + + + +``` + + +🤺 在控制台，输入 app4.tois.push({ text: '唐人街探案3' })后 +![变化](./imgs/2021-06-04_154055.png) + + +③ v-for就是渲染的指令，需要使用-item in items- 形式的特殊语法，items 是源数据数组，item 是数组元素迭代的别名。 +``` + + + + + + + 列表渲染t + + +
+
+ + +
+ + +
+ + + + + + +``` + + +✨ Vue数组变更方法 + :tw-2744: pop()和shift()方法不接受传参，传参了也没有什么用。 + :tw-2744: 空数组可以删除，不报错，但返回undefined。 +``` +var list = [3,4,5,6] +``` + +| push() | 向数组的尾部添加若干元素，并返回数组的新长度 | +|---|---| +| pop() | 从数组的尾部删除一个元素（删且只删除一个元素），返回被删除的元素 | +| unshift() | 从数组的头部删除一个元素（删且只删除一个元素），返回被删除的元素 | +| sort() | 用于对数组的元素进行排序 | +| reverse() | 用于颠倒数组中元素的顺序 | \ No newline at end of file diff --git "a/\350\260\242\345\233\275\345\271\277/21-06-04.md" "b/\350\260\242\345\233\275\345\271\277/21-06-04.md" new file mode 100644 index 0000000000000000000000000000000000000000..93332cbbaeb0c65ff98f3df1b1e137dbc53b5dca --- /dev/null +++ "b/\350\260\242\345\233\275\345\271\277/21-06-04.md" @@ -0,0 +1,134 @@ +### 事件处理方法 +🤷 用 v-on:click.prevent.self 会阻止所有的点击。 +🤷 v-on:click.self.prevent 只会阻止对元素自身的点击。 +``` + + + + + + + Document + + + +
+
+ +
+
+ + + + + + + +``` + + +### 监听事件 +🤷 用 v-on 指令监听 DOM 事件。 +``` + + + + + + Document + + +
+
+ + +
+ + + + + + +``` + + +### 事件修饰符 + + 🤷 阻止单击事件继续传播 + ``` + +``` + +🤷🤷 提交事件不再重载页面 +``` +
+``` + + + 🤷🤷🤷 修饰符可以串联 + ``` + +``` + + +🤷🤷🤷🤷 只有修饰符 +``` +
+``` + + +🤷🤷🤷🤷🤷 添加事件监听器时使用事件捕获模式 +🤷🤷🤷🤷🤷 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 +``` +
...
+``` + + +🤷🤷🤷🤷🤷🤷 只当在 event.target 是当前元素自身时触发处理函数 +🤷🤷🤷🤷🤷🤷 即事件不是从内部元素触发的 +``` +
...
+``` + + + diff --git "a/\350\260\242\345\233\275\345\271\277/21-06-05.md" "b/\350\260\242\345\233\275\345\271\277/21-06-05.md" new file mode 100644 index 0000000000000000000000000000000000000000..ab3daca01c4dbad65055fe8602f1ec7411b23029 --- /dev/null +++ "b/\350\260\242\345\233\275\345\271\277/21-06-05.md" @@ -0,0 +1,75 @@ +### 表单输入绑定 +``` + +
+ 你好！ + 您好！ +
+
+ 是 + 否 + + + + + + + + +``` + + +### 选择框 +🤦 单选时： +``` + +
+ + Selected: {{ selected }} +
+ + + + +``` diff --git "a/\350\260\242\345\233\275\345\271\277/21-06-08.md" "b/\350\260\242\345\233\275\345\271\277/21-06-08.md" new file mode 100644 index 0000000000000000000000000000000000000000..be81cc2e2641762d88d16f1f3b6f41f855fe1d42 --- /dev/null +++ "b/\350\260\242\345\233\275\345\271\277/21-06-08.md" @@ -0,0 +1,30 @@ +# 组件基础 +> **是什么：** 本质上是一个vue实例，可以独立出来重复利用（在大多数的网页中，网页都包含header、menu、body、footer等部分，在很多时候，同一个系统中的多个页面，可能仅仅是页面元素设计成一个个组件，当需要使用到的时候，引用这个组件即可） + +> **可以用来干什么：** + +> **怎么用：** + +### 示例 + **全局组件** +``` +
+ +
+ + +``` + **局部组件** +``` + +``` \ No newline at end of file diff --git "a/\350\260\242\345\233\275\345\271\277/21-06-09.md" "b/\350\260\242\345\233\275\345\271\277/21-06-09.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\350\260\242\345\233\275\345\271\277/21-06-11.md" "b/\350\260\242\345\233\275\345\271\277/21-06-11.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\350\260\242\345\233\275\345\271\277/21-06-12.md" "b/\350\260\242\345\233\275\345\271\277/21-06-12.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\350\260\242\345\233\275\345\271\277/21-06-15.md" "b/\350\260\242\345\233\275\345\271\277/21-06-15.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/\350\260\242\345\233\275\345\271\277/21-06-16.md" "b/\350\260\242\345\233\275\345\271\277/21-06-16.md" new file mode 100644 index 0000000000000000000000000000000000000000..33abae2a19265ebe8cb88aba4137739950dc0f8f --- /dev/null +++ "b/\350\260\242\345\233\275\345\271\277/21-06-16.md" @@ -0,0 +1,8 @@ +# Vue Router +> **是什么：** 它是vue.js官方的路由管理器。 + +> **能用来干什么：** 它可以实现的功能有1. 嵌套的路由/视图表；2. 模块化的、基于组件的路由配置；3. 路由参数、查询、通配符；4. 基于 Vue.js 过渡系统的视图过渡效果；5. 细粒度的导航控制；6. 带有自动激活的 CSS class 的链接；7. HTML5 历史模式或 hash 模式，在 IE9 中自动降级；8. 自定义的滚动条行为。 + +> **怎么用：** + +### 安装 diff --git "a/\350\260\242\345\233\275\345\271\277/21-06-18.md" "b/\350\260\242\345\233\275\345\271\277/21-06-18.md" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391