From 341ffca7f3d88cb85e5e0a7f6a9d96756930c49d Mon Sep 17 00:00:00 2001 From: woi <5649616543@qq.com> Date: Mon, 7 Jun 2021 15:33:05 +0800 Subject: [PATCH 1/7] =?UTF-8?q?5=E6=9C=8826=E6=97=A5=E7=9A=84=E7=AC=94?= =?UTF-8?q?=E8=AE=B0Vue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../note-2021-05-26.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename "\347\216\213\344\273\260\346\226\207/note-2021-05.26.md" => "\347\216\213\344\273\260\346\226\207/note-2021-05-26.md" (98%) diff --git "a/\347\216\213\344\273\260\346\226\207/note-2021-05.26.md" "b/\347\216\213\344\273\260\346\226\207/note-2021-05-26.md" similarity index 98% rename from "\347\216\213\344\273\260\346\226\207/note-2021-05.26.md" rename to "\347\216\213\344\273\260\346\226\207/note-2021-05-26.md" index 87f8e6e..a4f1217 100644 --- "a/\347\216\213\344\273\260\346\226\207/note-2021-05.26.md" +++ "b/\347\216\213\344\273\260\346\226\207/note-2021-05-26.md" @@ -36,7 +36,7 @@ Vue指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。 对对对！！！ - 好可惜。。。。 + 好可惜。。。

这里有显示吗？？有的有的 -- Gitee From 1e7b067828f11f952e2b66e626161b7e059a0948 Mon Sep 17 00:00:00 2001 From: woi <5649616543@qq.com> Date: Mon, 7 Jun 2021 15:46:48 +0800 Subject: [PATCH 2/7] =?UTF-8?q?6=E6=9C=881=E6=97=A5=E7=9A=84=E7=AC=94?= =?UTF-8?q?=E8=AE=B0Vue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../note-2021-06-01.md" | 130 ++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 "\347\216\213\344\273\260\346\226\207/note-2021-06-01.md" diff --git "a/\347\216\213\344\273\260\346\226\207/note-2021-06-01.md" "b/\347\216\213\344\273\260\346\226\207/note-2021-06-01.md" new file mode 100644 index 0000000..224f27f --- /dev/null +++ "b/\347\216\213\344\273\260\346\226\207/note-2021-06-01.md" @@ -0,0 +1,130 @@ +# 大二第二学期课堂笔记 + +### Description +课堂笔记 2021-06-01 + +### Content + +### 用 v-bind 操作元素的 class 列表和内联样式 + +1. 绑定HTML Class +``` +对象语法 + + 可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存; + +数组语法 + + a. 可以把一个数组传给 v-bind:class，以应用一个 class 列表; + b. 也可以用三元表达式根据条件切换列表中的 class; + c. 数组语法中也可以使用对象语法： + +``` +``` + + +
+ + +
+ 对象语法2 +
+ + 对象语法3 + + +
+ + 数组语法1 + +
+ +
+ + + +``` + +2. 绑定内联样式 +``` +对象语法 + + a. 绑定内联样式的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象; + b. CSS property 名可以用驼峰式或短横线分隔 (要用引号括起来) 来命名; + c. 直接绑定到一个样式对象会让模板更清晰; + d. 对象语法也常常结合返回对象的计算属性使用。 + +数组语法 + + v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上。 + + 例如：
+``` +``` +
+ + 对象语法1 + +
+ + 对象语法2 + +
+ + +``` \ No newline at end of file -- Gitee From 0050047437b13c5000087b42b5d76ce12701bf8f Mon Sep 17 00:00:00 2001 From: woi <5649616543@qq.com> Date: Mon, 7 Jun 2021 16:16:17 +0800 Subject: [PATCH 3/7] =?UTF-8?q?6=E6=9C=882=E6=97=A5=E7=9A=84=E7=AC=94?= =?UTF-8?q?=E8=AE=B0Vue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../note-2021-06-02.md" | 123 ++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 "\347\216\213\344\273\260\346\226\207/note-2021-06-02.md" diff --git "a/\347\216\213\344\273\260\346\226\207/note-2021-06-02.md" "b/\347\216\213\344\273\260\346\226\207/note-2021-06-02.md" new file mode 100644 index 0000000..97754bd --- /dev/null +++ "b/\347\216\213\344\273\260\346\226\207/note-2021-06-02.md" @@ -0,0 +1,123 @@ +# 大二第二学期课堂笔记 + +### Description +课堂笔记 2021-06-02 + +### Content + +### 列表渲染 + +1. 用 v-for 基于数组来渲染列表 +``` +v-for 指令需要使用 item in items 形式(支持第二个可选参数 index )的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 +(也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法) +``` + +``` +
+ +
  • +
      +
    • + {{par}} +_+ + {{index+1}} . {{item.name}} +
      • +
    +
    • + +
    + + +``` + +2. 在 v-for 中使用对象 +``` +可以用 v-for 来遍历一个对象的 property。(其中可以提供第二个参数[键名] name ;第三个参数作索引 index ) + +// 在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。 * +``` + +``` +
    + + + +
    + + +``` + +3. 维护状态 +``` +当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。 + + a. 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，需要为每项提供一个唯一 key attribute ; (这是 Vue 识别节点的一个通用机制，key 与 v-for 特别关联) + b. 建议尽可能在使用 v-for 时提供 key attribute 。 + +
    + +
    + +// 不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。 +``` + +4. 数组更新检测 +``` +Vue会包裹被侦听的数组方法，所以这些数组方法也将触发视图更新; ---打开控制台可以调用数组方法 + + a. 数组的变更方法会变更调用这些方法的原始数组; + + b. 数组的非变更方法不会变更原始数组，而总是返回一个新数组(替换数组)。 + --注：这并不会导致 Vue 丢弃现有 DOM 并重新渲染整个列表。 + +``` +- 由于 JavaScript 的限制，Vue **不能检测数组和对象的变化**。 +``` +a. 在浏览器控制台中通过索引的方式改变数组的数组元素的值或者向对象新增对象属性时视图不会更新; +b. 而且修改选项对象data中的任何一个值时，会引起data中所有的内容发生变化。 +``` \ No newline at end of file -- Gitee From 692ce9d416397ad4b14b0d2513ca0909c4af1c89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E4=BB=B0=E6=96=87?= <1071588432@qq.com> Date: Mon, 7 Jun 2021 20:00:25 +0800 Subject: [PATCH 4/7] =?UTF-8?q?6=E6=9C=884=E6=97=A5=E7=9A=84=E7=AC=94?= =?UTF-8?q?=E8=AE=B0Vue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../note-2021-06-04.md" | 168 ++++++++++++++++++ 1 file changed, 168 insertions(+) create mode 100644 "\347\216\213\344\273\260\346\226\207/note-2021-06-04.md" diff --git "a/\347\216\213\344\273\260\346\226\207/note-2021-06-04.md" "b/\347\216\213\344\273\260\346\226\207/note-2021-06-04.md" new file mode 100644 index 0000000..7103472 --- /dev/null +++ "b/\347\216\213\344\273\260\346\226\207/note-2021-06-04.md" @@ -0,0 +1,168 @@ +# 大二第二学期课堂笔记 + +### Description +课堂笔记 2021-06-04 + +### Content + +### 事件处理 + +1. 用 v-on 指令监听 DOM 事件 + +``` + a. 直接把Javascript代码写在 v-on 指令中; + + b. 面对大多数处理逻辑复杂的事件，可以直接绑定一个调用方法; + + c. 在内联 JavaScript 语句中调用方法 +``` +``` +
    + +

    你点击了{{counter}}次

    + +
    + + + +
    + + +
    + + +``` + +2. 事件修饰符 + +``` +在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求; + +但为了解决DOM事件细节，Vue.js 为 v-on 提供了事件修饰符, 修饰符是由点开头的指令后缀来表示的,且修饰符可以串联: + +---- + .stop 阻止单击事件继续传播(阻止事件向上级DOM元素传递); + + .prevent 提交事件不再重载页面; + + .capture 添加事件监听器时使用事件捕获模式(即内部元素触发的事件先在此处理，然后才交由内部元素进行处理); + + .self 只当在 event.target 是当前元素自身时触发处理函数(即事件不是从内部元素触发的); + + .once 点击事件将只会触发一次(且还能被用到自定义的组件事件上); + + .passive 尤其能够提升移动端的性能; + (.passive 和.prevent 不能一起用，因为 .prevent 将会被忽略，.passive 会告诉浏览器你不想阻止事件的默认行为) + +// 注：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。 +``` +``` +
    + +
    + +
    + +
    + + +``` + +3. 按键修饰符 + +``` +Vue 允许为 v-on 在监听键盘事件时添加按键修饰符; + +Vue 为支持旧浏览器提供了常用的按键码别名： + .enter + .tab + .delete (捕获“删除”和“退格”键) + .esc + .space + .up + .down + .left + .right +``` +``` + +
    + + + +
    + + + data:{ + + }, + methods:{ + + submit:function(){ // 按键修饰符 + console.log('在 `key` 是 `Enter` 时调用了此方法'); + } +``` + +``` +系统修饰键 + +以下修饰符的实现需要同时按两个键或在按键时同事单击鼠标 + .ctrl + .alt + .shift + .meta (win键) + + +.exact 修饰符 + + .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。 + + +鼠标按钮修饰符 ---这些修饰符会限制处理函数仅响应特定的鼠标按钮。 + + .left + .right + .middle +``` \ No newline at end of file -- Gitee From 2b9edd485613c1c83df31ff4c73100ce432ae095 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E4=BB=B0=E6=96=87?= <1071588432@qq.com> Date: Mon, 7 Jun 2021 20:50:33 +0800 Subject: [PATCH 5/7] =?UTF-8?q?6=E6=9C=885=E6=97=A5=E7=9A=84=E7=AC=94?= =?UTF-8?q?=E8=AE=B0Vue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../note-2021-06-05.md" | 147 ++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 "\347\216\213\344\273\260\346\226\207/note-2021-06-05.md" diff --git "a/\347\216\213\344\273\260\346\226\207/note-2021-06-05.md" "b/\347\216\213\344\273\260\346\226\207/note-2021-06-05.md" new file mode 100644 index 0000000..26debe1 --- /dev/null +++ "b/\347\216\213\344\273\260\346\226\207/note-2021-06-05.md" @@ -0,0 +1,147 @@ +# 大二第二学期课堂笔记 + +### Description +课堂笔记 2021-06-05 + +### Content + +### 表单输入绑定 + +1. 基础语法 +``` +用 v-model 指令在表单 、 +
    --> + + Yeah!! +
    + + +
    + + + + + +
    + + +
    + {{item.displayName}} +
    + + + + + +``` + +2. 值绑定 +``` +对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值); + +可以用 v-bind 实现把值绑定到 Vue 实例的一个动态 property 上,并且这个 property 的值可以不是字符串; + + + + + + + + + +``` + +3. 修饰符 +``` + .lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步; + + .number 可以给 v-model 添加 number 修饰符,自动将用户的输入值转为数值类型; + + .trim 给 v-model 添加 trim 修饰符,可以自动过滤用户输入的首尾空白字符。 +``` \ No newline at end of file -- Gitee From a86ac66fb899a1d4ce3b226ca7cdc9ab2b39722f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E4=BB=B0=E6=96=87?= <1071588432@qq.com> Date: Mon, 14 Jun 2021 22:36:04 +0800 Subject: [PATCH 6/7] =?UTF-8?q?6=E6=9C=888=E6=97=A5=E7=9A=84=E7=AC=94?= =?UTF-8?q?=E8=AE=B0Vue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../note-2021-06-08.md" | 133 ++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 "\347\216\213\344\273\260\346\226\207/note-2021-06-08.md" diff --git "a/\347\216\213\344\273\260\346\226\207/note-2021-06-08.md" "b/\347\216\213\344\273\260\346\226\207/note-2021-06-08.md" new file mode 100644 index 0000000..c09d851 --- /dev/null +++ "b/\347\216\213\344\273\260\346\226\207/note-2021-06-08.md" @@ -0,0 +1,133 @@ +# 大二第二学期课堂笔记 + +### Description +课堂笔记 2021-06-08 + +### Content + +### 组件基础 + +1. 关于组件 + +``` + a. 组件是可复用(任意次数)的 Vue 实例，且带有一个名字; + b. 它们与 new Vue 接收相同的选项,但没有根实例特有的 el 选项; + c. 组件的 data 选项必须是一个函数,这样可以确保每个实例可以维护一份被返回对象的独立的拷贝; + d. 每用一次组件，就会有一个它的新实例被创建。 +``` + +2. 组件注册 + +``` + 为了能在模板中使用，组件必须先注册以便 Vue 能够识别。 + + 有两种组件的注册类型：全局注册和局部注册--- + + 全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中; + 通过 Vue.component() 进行全局注册; +``` + +``` +
    + + + + +
    + + + + +``` +3. 通过 Prop 向子组件传递数据 + +``` + a. Prop 让我们可以在组件上注册的一些自定义 attribute; + + b. 用一个 props 选项将自定义属性包含在该组件可接受的属性列表中; + + c. 一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop; + + d. 还可以使用 v-bind 来动态传递 prop。 +``` + +``` +
    + + + + + + + +
    + + + + +``` \ No newline at end of file -- Gitee From 63b0ad354903e77840cc80855d1d198b44dcd625 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E4=BB=B0=E6=96=87?= <1071588432@qq.com> Date: Wed, 16 Jun 2021 09:23:46 +0800 Subject: [PATCH 7/7] =?UTF-8?q?6=E6=9C=889=E6=97=A5=E7=9A=84=E7=AC=94?= =?UTF-8?q?=E8=AE=B0Vue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../note-2021-06-09.md" | 49 +++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 "\347\216\213\344\273\260\346\226\207/note-2021-06-09.md" diff --git "a/\347\216\213\344\273\260\346\226\207/note-2021-06-09.md" "b/\347\216\213\344\273\260\346\226\207/note-2021-06-09.md" new file mode 100644 index 0000000..b1328f1 --- /dev/null +++ "b/\347\216\213\344\273\260\346\226\207/note-2021-06-09.md" @@ -0,0 +1,49 @@ +# 大二第二学期课堂笔记 + +### Description +课堂笔记 2021-06-09 + +### Content + +### Vue集成化开发 + +
    + +#### 安装命令行工具(CLI) + +``` +Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。 +``` + +
    + +#### 机房电脑上安装CLI和运行 Vue 项目 + +1. 安装CLI过程 +``` +A. cmd输入命令： + + npm i -g yarn // 全局安装yarn + yarn config get registry // 查询当前镜像 + yarn config set registry https://registry.npm.taobao.org/ // 设置为淘宝镜像 + yarn global bin // 查找yarn包的位置 + +B. 配置yarn的环境变量(path) + + 配置...... + yarn global add @vue/cli // 全局添加vue命令行工具 + yarn global list // 查看 yarn 全局列表中 vue命令行工具 是否添加成功 + 重新开一个 cmd 查看和运行vue +``` + +2. 运行 Vue 项目 +``` + 选择一个磁盘新建项目夹 --- mkdir xxxx(项目文件夹名) + + cd .\xxx // 切换到项目文件夹 + + vue create xxx // 创建 vue 项目(项目名不能大写) + + cd .\xxx // 切换到当前项目 + yarn serve // 运行 +``` \ No newline at end of file -- Gitee