diff --git a/ZK/5.25.md b/ZK/5.25.md new file mode 100644 index 0000000000000000000000000000000000000000..ca44f42605a431a9b4f4bab1cd8b08d1b70b7f8c --- /dev/null +++ b/ZK/5.25.md @@ -0,0 +1,77 @@ +# 5.25课堂笔记 +## 初识Vue.js ++ Vue是一套用于构建用户界面的渐进式框架 + ++ web前端三大框架Angular、React、Vue +## 声明式渲染 +``` +
+ {{msg}} +
+ + + +``` +## 我的第一个Vue应用 +``` +// 先建立一个html文件,然后引入vue的包,你也可以下载下来本地引入 + +
+

{{ msg }}

+
+ +// 让我们使用vue显示一个 'Hello Word!' + + +``` +让我们运行一下 + +Hell Word! +``` +
+ //绑定元素attribute(属性) + + 鼠标悬停 + + + + 这里有一些东西 + + //控制切换一个元素是否显示 +

+ 你好，Vue +

+
+ + + + + + +``` diff --git a/ZK/5.26.md b/ZK/5.26.md new file mode 100644 index 0000000000000000000000000000000000000000..25d770a73baff8d3477a648458b79e900c581511 --- /dev/null +++ b/ZK/5.26.md @@ -0,0 +1,137 @@ +# 5.26课堂笔记 + +# 条件与循环 ++ v-if 和 v-else 和 v-show ++ v-if 和 v-else 在浏览器的控制台的代码只会显示v-if 和 v-else 中其中一个而v-show不管是不是true还是false都会在浏览器的控制台(代码)显示 +``` +
+ + 这是正确的； + + + + 这是错误的。 + + +

这里有一些东西

+
+ + + +``` ++ v-for 指令可以绑定数组的数据来渲染一个项目 ++ 在控制台里，输入 app.todos.push({text:"666"})，列表最后添加了一个text。 +``` +
+ +
+ + + +``` +# 处理用户输入 + ++ 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法： +``` +
+

{{ message }}

+ +
+var app5 = new Vue({ + el: '#app-5', + data: { + message: 'Hello Vue.js!' + }, + methods: { + reverseMessage: function () { + this.message = this.message.split('').reverse().join('') + } + } +}) +``` ++ 在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。 ++ Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。 +``` +
+

{{ message }}

+ +
+var app6 = new Vue({ + el: '#app-6', + data: { + message: 'Hello Vue!' + } +}) +``` +# 组件 +``` + + + + + + wzhxtgeigei + + +
+ +
+ + + + +``` diff --git a/ZK/5.28.md b/ZK/5.28.md new file mode 100644 index 0000000000000000000000000000000000000000..be117dd86def679b2b80ee58ce9fc6037a0be090 --- /dev/null +++ b/ZK/5.28.md @@ -0,0 +1,87 @@ +# 5.28课堂笔记 + +# 创建一个 Vue 实例 +``` + var app=new Vue(object); +``` +# Vue实例中的数据 +``` + + //如此给Vue实例传入数据，那么app.msg和data.msg是相等的，在改变其中任一值时另一个也会随之改变 + //若在改变data.变量名 是data对象中没有此变量名那么view将不会发生改变 +``` +### 如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值 +``` +data: { + newTodoText: '', + visitCount: 0, + hideCompletedTodos: false, + todos: [], + error: null +} +``` +### 除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来 +``` +app.$data === data +``` +$watch 是一个实例方法 +``` +app.$watch('msg', function (newValue, oldValue) { + console.log(data); + // 这个回调将在 `app.msg ` 改变后调用 +}) +``` + +# 实例生命周期钩子 +在Vue实例被创建时会有一系列的初始化过程，有一些函数可以在Vue实例初始化时被执行调用，这些函数就被称为实例生命周期钩子。 +有created、mounted、updated、destroyed、beforeUpdate等 + +``` + + + + + + Document + + +
+ {{thinkToSing}} +
+ {{thinkPad}} +
+ {{iPad}} +
+ + + + +``` \ No newline at end of file diff --git a/ZK/5.29.md b/ZK/5.29.md new file mode 100644 index 0000000000000000000000000000000000000000..888ef622e4b18f56238c9d085e20905d171b611b --- /dev/null +++ b/ZK/5.29.md @@ -0,0 +1,86 @@ +# 5.29课堂笔记 + +## 模板语法 ++ 文本插值 “Mustache” 语法 (双大括号) +``` +
+

{{ msg }}

+
+ + + + +``` ++ 绑定参数与动态参数 +``` +
+ 这是一个带有参数的a链接 + + // 这里的[paramattribute]其实是用了数组的方式进行赋值,这种方式可以进行多属性的绑定来实现动态参数,paramattribute其实就行data中定义的属性 + 这是一个带有动态参数的a链接 +
+ + + +``` +``` + + + + + + Document + + +
+ 这是第{{msg}}次点击 + + + + 链接 +
+ + + + + +``` \ No newline at end of file diff --git a/ZK/5.30.md b/ZK/5.30.md new file mode 100644 index 0000000000000000000000000000000000000000..5a19756c23e3751db2b0937ed6f26de2205f5bbf --- /dev/null +++ b/ZK/5.30.md @@ -0,0 +1,76 @@ +# 5.30课堂笔记 +## 绑定class的几种方式 ++ 对象语法 +因为v-bind绑定数据的值是字符串的就好了,所以我们可以使用对象的设置来实现动态的切换class,如: +``` +
+
+
+ + + +结果： +
+``` +判断class是否存在,根据值得真假来判断是否需要这个class +``` +:class="{class名：变量名}" + +data{ +变量名：false/true + +} +``` +数组语法 需要应用到多个class的时候可以使用,class之间用逗号隔开,如: +``` +
+
+
+ + + +结果： +
+``` +## 绑定style的方式 +也是可以使用对象与数组两种方式,一般直接使用对象的方式 +``` +
+
+
+ + + +结果： +
+绑定style样式跟写样式差不多: + +:style="{css属性：变量名}" + +data{ +变量名：设置的样式值 +} +``` \ No newline at end of file diff --git a/ZK/img/2021-5-26 15-17-52.JPG b/ZK/img/2021-5-26 15-17-52.JPG new file mode 100644 index 0000000000000000000000000000000000000000..0bae7d4857f818e1751fbca3c0b0a5a76ed0fef9 Binary files /dev/null and b/ZK/img/2021-5-26 15-17-52.JPG differ diff --git a/ZK/img/2021-5-26 15-25-46.JPG b/ZK/img/2021-5-26 15-25-46.JPG new file mode 100644 index 0000000000000000000000000000000000000000..4de017989e9d613b8a0fecb46a1c6265e6ef6046 Binary files /dev/null and b/ZK/img/2021-5-26 15-25-46.JPG differ diff --git a/ZK/img/2021-5-26 15-33-39.JPG b/ZK/img/2021-5-26 15-33-39.JPG new file mode 100644 index 0000000000000000000000000000000000000000..ee256227514bcb5e5e95b9567cd747b05c6a9962 Binary files /dev/null and b/ZK/img/2021-5-26 15-33-39.JPG differ diff --git a/ZK/img/2021-5-28 9-21-6.JPG b/ZK/img/2021-5-28 9-21-6.JPG new file mode 100644 index 0000000000000000000000000000000000000000..f41070945dcba477d0a478d5e3dc7ac5f0e157df Binary files /dev/null and b/ZK/img/2021-5-28 9-21-6.JPG differ diff --git a/ZK/img/2021-5-28 9-39-43.JPG b/ZK/img/2021-5-28 9-39-43.JPG new file mode 100644 index 0000000000000000000000000000000000000000..ee7c5baad6d8f333bd01b7dd4aeaa988bf5e69f2 Binary files /dev/null and b/ZK/img/2021-5-28 9-39-43.JPG differ diff --git a/ZK/img/2021-5-29 15-35-11.JPG b/ZK/img/2021-5-29 15-35-11.JPG new file mode 100644 index 0000000000000000000000000000000000000000..e5f91f3176d70042e09e4c9039c9c6ee5f17b148 Binary files /dev/null and b/ZK/img/2021-5-29 15-35-11.JPG differ diff --git a/ZK/img/2021-5-29 15-36-41.JPG b/ZK/img/2021-5-29 15-36-41.JPG new file mode 100644 index 0000000000000000000000000000000000000000..59f5927fe060f31c5c15e4e3208dc9028451db99 Binary files /dev/null and b/ZK/img/2021-5-29 15-36-41.JPG differ diff --git a/ZK/img/2021-5-29 15-41-16.JPG b/ZK/img/2021-5-29 15-41-16.JPG new file mode 100644 index 0000000000000000000000000000000000000000..e28edf578c278ceff46b48b2479fe770a000d781 Binary files /dev/null and b/ZK/img/2021-5-29 15-41-16.JPG differ